TD Sunshine is a channel dedicated to helping you learn Figma and UX design in a fun and engaging way. I'm Tair, your host and expert instructor, I will guide you through the ins and outs of using Figma to create stunning user interfaces and experiences. Whether you're new to Figma or an experienced designer looking to expand your skill set, TD Sunshine has something for you. My tutorials are designed to be easy to follow, with step-by-step instructions and clear explanations of key concepts.
💎 CHANNEL MILESTONES 🪬 ☆ Published my first video - Mar 19, 2023 ☆ 100 subscribers - May 11, 2023 ★ 1000 subscribers - Jul 23, 2023 ★ 4000 watch hours - Nov 9, 2023 ☆ 5000 subscribers - Apr 4, 2024 ☆ 10k subscribers - Aug 11, 2024
Hey, Quick question: How do you assign the Text color tokens to your Text styles to avoid designers choosing the right style but forgetting to change the color of the text itself? Appreciate your videos so much!
hmm that didn't really tell us how Grid's work, but rather what happens when grid's are present and when they are not present. There is no prescriptive rational being shared.
Thank you for your explanation. May I ask you how to do prototyping responsive design? We should do it each frames first (desktop, tablet, mobile) or we can do it just for one frames but it will relates with other frames? Or we're prototyping it each frames first (desktop, tablet, mobile) then in responsives frame it works for everything when we try it each frames? Sorry for my bad english, hope you understand what I mean. Thank you
Why do some design systems use the floating label text fields and some use traditional text fields? I've started to see many use both- I understand when they use traditional in their desktop design system and switch over to the floating label for a mobile version of their design system (like Shopify does) but some use both types within their mobile experience and I can't comprehend why.... it seems like the traditional text field has the best usability but for the little benefit of reducing some vertical space some designers opt to create both types of text inputs to switch desktop and mobile experiences? Seems like too much extra work....
Hi! Thanks for the video. Am I missing why at the beginning of the "Variable it" part you are adding a token just for this button? Does this mean that each component that I am going to add to the design system will have its own set of variables values? Thanks in advance
Hi great video. I don't understand what "subtle" "lighter" "default" "darker" came from? Is this something the designer can just choose or should their be a protocol to follow? What if I need more color surfaces?
Thank you so much again for everything you do on this channel.🙌🏻 I get excited for each video like a little kid :) I do have one question about the dark/light switch. Since I have 20 connected screens, is there a way to change the theme on all of them with one button click? Right now, it only works on the current screen, but as soon as I click the action button to switch to another screen, it goes back to auto mode (e.g. light).
dev mod kısmında sistem patlıyor :) dev mod aşamasında title font-size değerini tablet, desktop, mobile nasıl verecek? gerçi değer verebiliyoruz ancak tailwind gibi class atarsak sistem patlıyor.
Im not familiar with Tailwind but from what I know Devmode works well with variable modes and will show the actual properties and the name of the variable and the mode. ☀️🙏🏻
Hi, Im sure you did a video about how to create a dynamic e-commerce store using tokens? It had a collection page and when you clicked on a product the product page dynamically loaded that data? I think it was trainers. Could you post a link to the video here please? Thanks!!
Yes! this one - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-fB-4ikrt3mk.html. But I will say lots has changed since I created this. For example, you can now use "change variable mode" in prototyping and that would have been useful. Also, the UI is different since UI3 launched. The basics are still the same so still worth a watch ☀️🙏🏻💛
@@TDSunshine hey, got this working so thanks, but yes the set variable mode is a game changer, saves you doing that extra collection for the product page. So thanks again 👍👍
Thanks! Free accounts don't allow modes so you sort of have to do it manually. I would create separate variables for the different sizes and make sure to group them (desktop/width, mobile/width, etc...) and then you assign all of them in your design and when you want to see a different screen size you will need to go in and manually replace all of them for the correct device BUT because you grouped them it will be easier to find because you can search by device name in the variable list. It's not the best but it's a workaround. ☀️🙏🏻💛
Hello, thank you so much for this particular video because it’s easy to understand and very helpful…. I’m not sure if I’m doing the right thing or it’s the new figma update but I can’t seem to add the value “the one in quotation that allows the prototype interaction “ and because of that, it isn’t working as it should…. If anyone can help me out I’ll really appreciate… I can’t share a screenshot here but literally I can’t just input a value that allows it to work.. thank you
Thank you so much! The explanation on fill/fixed/hug was the simplest, most engaging way to teach this. Thank you for making it accessible to new Figma users. SO helpful. I don't subscribe to a lot of channels, but I've subscribed to yours!
Your content is underrated, and you have fewer subscribers than you deserve. You are teaching production-level design. By the way, I’m a full-stack developer, and I hate design, but your videos are amazing, and now I can create a decent website!
haha I get lots of inspiration for other talented creators on RU-vid and also annoy my colleagues to no end with questions about what they would like to see ☀️🙏🏻💛
Advanced mode : You can also use the Copy/Paste technique of hovering over the left side of the Prototype Interaction to copy the Set to Fruit and it will use the correct Variable because of the Text field relation. Saves a couple clicks.
Hey I saw your video and this is really helpful I really liked and also subscribe a genuine request can you make a video on nested autolayout pls? it would be really helpful.
OMG!! I didn't know I can use variables for font sizes now! This is a game changer!! I'll have to update a lot of styles, but I can finally have an easy way of switching the typography scale from desktop to mobile!!!
For fonts - what if we created local font styles in both libraries and published them, similar to the color styles? Wouldn't swapping the libraries also include fonts in that case?
