Figma Button Components (Variables, Tokens, Variants & Component Properties ) | Design System Part 5

  Рет қаралды 39,245

TD Sunshine

TD Sunshine

Күн бұрын

Пікірлер: 258
@GameRunner2049
@GameRunner2049 Ай бұрын
Why god why this much time to find this gems. Grateful to you TD. No one has explained this simple!!
@TDSunshine
@TDSunshine Ай бұрын
Thanks!! ☀️🙏🏻💛
@djashawe88923
@djashawe88923 Жыл бұрын
You are super organized that watching your process is almost therapeutic.
@TDSunshine
@TDSunshine Жыл бұрын
aww thanks! ☀️🤗
@kylechipman9472
@kylechipman9472 10 күн бұрын
This is honestly the most exciting video I've seen in a long time
@TDSunshine
@TDSunshine 13 сағат бұрын
Thanks! ☀️🙏🏻💛
@shifani2439
@shifani2439 6 ай бұрын
Your video on creating buttons using variables is incredibly helpful. Your teaching style is easy to understand, and you're doing an awesome job. Keep rocking!
@TDSunshine
@TDSunshine 6 ай бұрын
Aww Thanks! 🙏🏼☀️
@Darshan-zf9kj
@Darshan-zf9kj 2 ай бұрын
Amazing tutorials. The most valuable playlist on Figma variables I've ever found! Unbelievable how effortlessly and beautifully you explain. Plus that pretty smile and enthusiasm of teaching. Just won my ❤ It's been quite some time since I have been looking for such detailed and complete design system tutorials! Finally here I am! Thanks for making this, that too for free. This is premium content. God bless you!
@TDSunshine
@TDSunshine Ай бұрын
aww thank you so much for your kind words! ☀️🙏🏻💛
@kylegagnon6850
@kylegagnon6850 6 ай бұрын
Awesome video! I am a software engineer with no artistic skill, so using these techniques and Figma has been able to get me to start designing a UI framework! A little bit of coding knowledge / help when it comes to renaming: I found it easy to make my first state and give it all of the names. For example: Color = Default, Variant = Solid, State = Default, Radius = None, Icon = None, Size = Small Then when you go to copy it, you can change the individual properties you want. So for example, if you want to change the State from Default to Hover you can use the Match (top textbox) to match to something you want to change. So if you wanted to change the state you can put in the following in the Rename modal State = Default State = Hover When you rename it you will get the following Color = Default, Variant = Solid, State = Hover, Radius = None, Icon = None, Size = Small It helps when you have a ton of properties and you are doing the things in batch!
@TDSunshine
@TDSunshine 6 ай бұрын
Great tips! 🤗☀️💛
@coralgalaxy544
@coralgalaxy544 8 ай бұрын
Hey, Just wanted to drop a thank you message here. You're the reason for helping me to expand my knowledge on design systems a lot! Learning something new each time. Thanks 🥰
@TDSunshine
@TDSunshine 8 ай бұрын
so happy to hear that! ☀️🤗🙏
@bhossen
@bhossen 3 ай бұрын
You're awesome. I have learnt finally how to create 100s of buttons within 2 minutes. Thanks a lot
@TDSunshine
@TDSunshine 3 ай бұрын
☀️🙏🏻
@pawansk11
@pawansk11 3 ай бұрын
This is one of the best best video on the internet about how to create buttons with instances.. Thanks a ton. Finally I have created a bundle of 240 button. Keep Uploading. Love
@TDSunshine
@TDSunshine 3 ай бұрын
Thanks! ☀️🙏🏻💛
@dsouzaedson
@dsouzaedson 26 күн бұрын
I really enjoyed this session. I never thought creating these many buttons would be easy.
@TDSunshine
@TDSunshine 25 күн бұрын
☀️🙏🏻💛
@VipulPatel-y3b
@VipulPatel-y3b 6 ай бұрын
Organize, engaging, and straight to the point explanation for Variables, Tokens, Variants & Component Properties.
@TDSunshine
@TDSunshine 6 ай бұрын
👍🏼🙏🏼☀️
@AliekeZelhorst
@AliekeZelhorst Ай бұрын
Your explanations are top-notch-clear, lively, and super helpful! Thank you!
@TDSunshine
@TDSunshine Ай бұрын
Thanks! ☀️🙏🏻💛
@raskarjr
@raskarjr 6 ай бұрын
You are amazing! I have searched all over KZbin before coming to you to learn how to use variables for DS. Figma should pay you for this if it doesn't already! Super Helpful. 🙏
@TDSunshine
@TDSunshine 6 ай бұрын
haha thanks! I'm glad you found it helpful ☀️🙏🏻
@bolkhayegakya
@bolkhayegakya 2 ай бұрын
I was searching this kind of detailed design system tutorial for a long time. Thank you so much. :) Subscribed!! :)
@TDSunshine
@TDSunshine 2 ай бұрын
yay! thanks Im glad you found it helpful! ☀️🙏🏻
@bolkhayegakya
@bolkhayegakya 2 ай бұрын
@@TDSunshine why you don't upload video on daily basis?😀
@smilli6415
@smilli6415 8 ай бұрын
blown away with the way u used renaking panel to make components
@TDSunshine
@TDSunshine 8 ай бұрын
Its such a great trick right?? ☀️🤗
@smilli6415
@smilli6415 8 ай бұрын
@@TDSunshine does that mean all the layers are named when u used bulk renaming right , there is no need to rename them as we design right ?
@TDSunshine
@TDSunshine 8 ай бұрын
@@smilli6415 yes which ever layers you selected will be renamed :)
@claytonwest9299
@claytonwest9299 25 күн бұрын
Exactly what I wanted, well paced video, well described, and nice and enthusiastic. Thank you for a great tutorial.
@TDSunshine
@TDSunshine 25 күн бұрын
You're welcome! ☀️🙏🏻💛
@Amrdys
@Amrdys Ай бұрын
18:24 That was the funniest moment of truth I've seen in a while :D Thanks for the fantastic tutorial Tair
@TDSunshine
@TDSunshine Ай бұрын
haha thanks! ☀️🙏🏻💛
@platinoir
@platinoir Жыл бұрын
Love your videos & enthusiasm. Awesome work ♥️ Im a seasoned designer, but i’m still learning many new methods & applying them to the design system at my work
@TDSunshine
@TDSunshine Жыл бұрын
Thanks! I’m glad they are helpful! ☀️💛🙏🏼
@dartiv_div
@dartiv_div 7 ай бұрын
Thank you. Your calm and super organized way of designing and teaching is aspiring and beautiful. Also you're lovely and truly a sunshine 🤍
@TDSunshine
@TDSunshine 7 ай бұрын
thanks! I appreciate it! ☀️💛🙏🏻
@yashasvibagri4120
@yashasvibagri4120 3 ай бұрын
I love this series
@TDSunshine
@TDSunshine 3 ай бұрын
I'm glad it helped! ☀️🙏🏻
@cam6588
@cam6588 8 ай бұрын
Thank you so much for all your videos, it's super clear and well detailed ! keep going
@TDSunshine
@TDSunshine 8 ай бұрын
You're welcome! ☀️💛
@photomat
@photomat 4 ай бұрын
Your Figma design system series are VERY helpful and very clear and broken down. Thanks for sharing! One remark, regarding 'focused' state. I heard you mentioning it several times to be the split second when selecting the item before you let go your mouse (on mousedown) which is true in a way but it's more of a tiny visual feedback gimmick. In front-end development, the focus state is more often linked to the 'focus-visible' state, for accesibility purposes: keyboard navigation (tabbing). I guess that's your 'selected' state? But then what happens if the buttons are used in a set of select options - where you actually need one of the buttons to show to be selected/toggled? Then you need another way to display a focus-visible version. So you might want to change the focus state to a more contrasty version (usually an outline), OR, if you really want a mousedown effect, create two variants. The mousedown (CSS focus attribute) does cause trouble out of the box tough (Kevin Powell beautifully explains it here: kzbin.info/www/bejne/oGebiKmmir1nZ8Usi=uLbLW2b0ENzbjpsA), so I prefer to only design the accessibilty version - as that is way more important than a clicky effect.
@TDSunshine
@TDSunshine 4 ай бұрын
Great tips! thanks for sharing! ☀️🙏🏻💛
@juleonasefi5230
@juleonasefi5230 3 ай бұрын
Your level of focus is inspiring
@TDSunshine
@TDSunshine 3 ай бұрын
Thanks! ☀️🙏🏻
@MariaAlekseeva-b6e
@MariaAlekseeva-b6e 8 ай бұрын
Love your work, thank you so much for releasing these series
@TDSunshine
@TDSunshine 8 ай бұрын
Thanks! You’re welcome ☀️💛
@umesh6716
@umesh6716 9 ай бұрын
hahahaha that "useeee" at 14:16 was soo smooth hahaha, beautiful voice ma'am. Btw amazing video, really informative. I'm binging the whole playlist on Sunday, really exciting it has been, learning soo much new about figma. keep going ma'am I'm grateful for this content!
@TDSunshine
@TDSunshine 9 ай бұрын
haha Im always in sing song mode 🤗☀️
@laurapandjatcharam
@laurapandjatcharam 5 ай бұрын
OUAW!!! Thanks you! I love you knowledge, it's fun to learn with you! 🔥🔥🔥
@TDSunshine
@TDSunshine 5 ай бұрын
aww thanks! ☀️💛🙏🏻
@serhiytorba
@serhiytorba 6 ай бұрын
If to add button inner gap as a paddings of label wrap itself, then you'll not needed separate instance for Icon only button. Example: - label has itself wrapper with 8px horizontal paddings - icon and label wrapper will have 0px gap (because 8px was already added) - button as a parent container will have the same vertical & horizontal paddings for ex also 8px Then no matter, was icon only selected or label only - you'll have right paddings: for text button - bigger (8+default8=16hor & 8vertical), for Icon only - smaller, default only 8 hor x 8 vert. Also you could play with hidden paddings trick in left or right icon wrappers, or provide Icon Only with a separate Third icon as a property. It's more about performance for huge highly-loaded libraries. Figma doesn't like duplicating instances, but loves properties)
@TDSunshine
@TDSunshine 6 ай бұрын
Great tips thanks! 🙏🏼☀️
@bbayek5573
@bbayek5573 Жыл бұрын
I love all your videos, really great work! I am trying to learn variables as well, and considering these are still in Beta, I am really in owe of your knowledge and ease of working with them :) well done!
@TDSunshine
@TDSunshine Жыл бұрын
Thank you ! ☀️🙏🏼 variables are so fun I can’t stop playing with them 🤪
@bbayek5573
@bbayek5573 Жыл бұрын
@@TDSunshine Same! and your videos are super helpful! I am gathering some feedback for Figma team as there are some bits that could be very helpful in official release ;)
@MrBrunobrunic
@MrBrunobrunic 8 ай бұрын
I still enjoy watching your videos, though I set the playback speed on 0.5 and it's also very funny :D
@TDSunshine
@TDSunshine 8 ай бұрын
😂😂 sorry I know I speak a bit too fast sometimes 🙈🙈 glad you’re still with me though 🙏🏼☀️
@brightbrame930
@brightbrame930 3 ай бұрын
This is incredible, you just earned a new subscriber
@TDSunshine
@TDSunshine 3 ай бұрын
Thanks! ☀️🙏🏻💛
@KURI0S
@KURI0S 8 ай бұрын
Thank u for sharing, appreciate it very much. 🙏🏼
@TDSunshine
@TDSunshine 8 ай бұрын
My pleasure!☀️🤗
@bolkhayegakya
@bolkhayegakya 2 ай бұрын
You should extend this series. Please.. Please (like components for dropdowns, accordions, tags etc.)
@TDSunshine
@TDSunshine 2 ай бұрын
Working on it ! ☀️🙏🏻💛
@inka7961
@inka7961 3 ай бұрын
You are so fun to watch! Keep it up!
@TDSunshine
@TDSunshine 3 ай бұрын
haha thanks! ☀️🙏🏻
@tashazai7540
@tashazai7540 Ай бұрын
Thank youuuuu! 🌿
@TDSunshine
@TDSunshine Ай бұрын
You're welcome! ☀️🙏🏻
@surajitpatro
@surajitpatro 5 ай бұрын
You are just an amazing teacher!
@TDSunshine
@TDSunshine 5 ай бұрын
aww thanks! 🙏🏻☀️💛
@Pibepan10
@Pibepan10 Жыл бұрын
Thanks you so much, FOLLLOWING your tutorials, thanks
@TDSunshine
@TDSunshine Жыл бұрын
You’re very welcome! ☀️🙏🏼🤗
@nataliaszczypek
@nataliaszczypek 3 ай бұрын
Another way to create button components with an option for a right and left icon would be to use a boolean variable instead 😊
@TDSunshine
@TDSunshine 3 ай бұрын
Yes! I love how there are so many different ways to achieve the same outcome in Figma ☀️🙏🏼
@nikilragav
@nikilragav 7 ай бұрын
This is cool! I've been looking for some tutorials on how to use Figma design tokens (cause then I can theoretically just export those directly to CSS / Tailwind). Can you do fonts with variable tokens too? Rather than making like 100 font styles (cause I have font styles for regular text, code, icons all at 2-3 weights, and at like 10 sizes)
@TDSunshine
@TDSunshine 7 ай бұрын
Fonts are not yet manageable by variables but Figma say they are in the works! ☀️🙏🏻
@asvikram1628
@asvikram1628 6 ай бұрын
Thank you so much, This video was extremely helpful
@TDSunshine
@TDSunshine 5 ай бұрын
Thanks! 🙏🏻☀️💛
@nicoladonega
@nicoladonega 27 күн бұрын
Can we find somewhere the "Button Specs" for every basic component? Just as a remember guide. Great videos :)
@TDSunshine
@TDSunshine 25 күн бұрын
You can find the spec tables in the figma files linked in the description ☀️🙏🏻💛
@ammar_ye
@ammar_ye 5 ай бұрын
Thank you, great video🫶🏻🤍🤍
@TDSunshine
@TDSunshine 5 ай бұрын
Glad you liked it!☀️🙏🏼
@santhoshkv3990
@santhoshkv3990 8 ай бұрын
Amazing and clean explanation
@TDSunshine
@TDSunshine 8 ай бұрын
Glad you liked it! ☀️🤗🙏
@ninas1675
@ninas1675 7 ай бұрын
Thank youuu, i will adapt to your workflow 😊
@TDSunshine
@TDSunshine 7 ай бұрын
You're welcome 😊☀️
@premium_AR
@premium_AR Жыл бұрын
Really helpful! great job buddy
@TDSunshine
@TDSunshine Жыл бұрын
thanks! ☀️🙏🏻
8 ай бұрын
I saw this video some many times, that now I discovered you've a great singing voice 14:16 🥰
@TDSunshine
@TDSunshine 8 ай бұрын
Haha thanks! 🙈☀️🙏🏼
8 ай бұрын
@@TDSunshine BTW, yesterday 279 buttons variants came to life in a component set (animations included) all thanks to you!
@marziz
@marziz 21 күн бұрын
Brilliant...again. I'm wondering if it would be possible to change the color of the icons using the variables?
@TDSunshine
@TDSunshine 14 сағат бұрын
Yes of course! You can connect the icon fill colour to a variable colour and then use modes to change that ☀️🙏🏻💛
@YusukeTeratani-Ota
@YusukeTeratani-Ota 10 ай бұрын
Thank you for making tutorial videos. Your videos have been a great resource in learning how to use the variable/token system. I have one question about using semantic colors. In the case where one might want to have a light dark mode, do you have to abandon the semantic color tokens? So instead of having 4 different modes, you would have two modes (light vs dark). In that case, I guess it would make the most sense to then have semantic colors as variables (surface_primary, surface_error, etc)? Hopefully, I am making sense. Thank you again! You are awesome!
@TDSunshine
@TDSunshine 10 ай бұрын
Thanks! its a matter of approach and need. If you are more in need of dark and light then maybe setting them up as modes is more useful or maybe semantics are more useful modes. You can always use variables on components for the colour change alone by just changing the variable and not the variables mode. I hope that makes sense ☀️🤗
@YusukeTeratani-Ota
@YusukeTeratani-Ota 10 ай бұрын
Thank you@@TDSunshine !
@kirawesh
@kirawesh 8 ай бұрын
So useful, thank you for the video
@TDSunshine
@TDSunshine 8 ай бұрын
You are welcome! 🙏☀️
@YousefGhazal-k4k
@YousefGhazal-k4k 6 ай бұрын
great practical video!
@TDSunshine
@TDSunshine 6 ай бұрын
Glad it was helpful! ☀️💛🙏🏼
@altsider
@altsider Жыл бұрын
Great video!!! (and nice hair 😁)
@TDSunshine
@TDSunshine Жыл бұрын
Thanks! 💁🏽‍♀️ ☀️
@kakanishalemraju9995
@kakanishalemraju9995 Жыл бұрын
you are like supet jet fast..........hard to caught you 😀very good tutorial👌👌
@TDSunshine
@TDSunshine Жыл бұрын
Haha sorry! 🏎️🏎️ hope you were still able to follow along! 🙈☀️
@kakanishalemraju9995
@kakanishalemraju9995 Жыл бұрын
@@TDSunshine need to change my video speed to slow and have to watch to caught your speed.... you are very exited to teach us 😀
@savitar29
@savitar29 10 ай бұрын
You are the best!!! Thank you very much!
@TDSunshine
@TDSunshine 10 ай бұрын
aww thank you so much! ☀️🙏🏻
@alexander_stark
@alexander_stark Жыл бұрын
You do button incorrect... Need to do is dual icons+ text in 1 button... then, may be ,icon btn... In component turn on/off icons.. Prime btn after that will be 10 items in your example 20... Upd Need's create 1 button with state ... & will be 5 btn instead 20
@TDSunshine
@TDSunshine Жыл бұрын
There is no correct or incorrect in design 🙏🏼 it’s all up to preference and need 🤗 the way you describe works too though! You can definitely have both icons in one and then turn them on/off with Boolean component properties but because I wanted an option with just an icon on its own I decided to do it this way to avoid confusion and to have better padding ☀️
@sendd1555
@sendd1555 Жыл бұрын
Thank you!
@TDSunshine
@TDSunshine Жыл бұрын
You’re welcome! 🙏🏼☀️
@whyzytcg8873
@whyzytcg8873 Ай бұрын
wow... just wow. I really love the way you rename all of them. I used to cmd c cmd v at the left layers and its killing me LOL. Also with the component token, does that means theres no need for us to create variant of small medium large icon anymore? 🤩
@TDSunshine
@TDSunshine Ай бұрын
Yes! tokens for different sizes are a real game changer ☀️🙏🏻💛
@gulnisamirizade2994
@gulnisamirizade2994 10 ай бұрын
amazing tutorial!😍
@TDSunshine
@TDSunshine 10 ай бұрын
Thank you! 😊☀️
@eminaisic9988
@eminaisic9988 Ай бұрын
Button size? It can not be same as icon size tokens did I miss video about button sizing tokens or?
@TDSunshine
@TDSunshine 25 күн бұрын
Hey! I go through the sizes at 7:44 ☀️🙏🏻💛
@AzizulIslam-oq8cj
@AzizulIslam-oq8cj 5 ай бұрын
Thank you sister !! you have been a great help ! btw could you please tell me the usage of pill , sorry i didn understand that part
@TDSunshine
@TDSunshine 5 ай бұрын
You’re welcome! sometimes you might need two types of buttons in your system but sometimes one is enough 🙃 I guess I wanted to show a version with both as an example. I think pill buttons are great to use as part of tables for example or in cards . But there is no one right way of when to use them. ☀️🙏🏼
@jaopts5252
@jaopts5252 4 ай бұрын
Could you tell me what's a different between h-padding and v-padding. Thank you🙏
@TDSunshine
@TDSunshine 4 ай бұрын
Of course! H padding is horizontal padding so the padding the goes on the right and left of the elements inside the auto layout and the auto layout. And v padding is the vertical padding, so the padding that goes above and below. I hope that helps! 🙏🏼☀️
@ahmedazouzi2899
@ahmedazouzi2899 Жыл бұрын
Really awesome thanks 🙏🙏
@TDSunshine
@TDSunshine Жыл бұрын
Most welcome 😊 ☀️🙏🏼
@serhiytorba
@serhiytorba 6 ай бұрын
Cool video. but a bit confused states. Focused is not the same as Pressed Pressed is not the same as Selected
@TDSunshine
@TDSunshine 6 ай бұрын
Material guidelines explain this really clearly - m2.material.io/design/interaction/states.html#usage ☀️🙏🏼
@siterulers
@siterulers 11 ай бұрын
How to add Boolean using naming convention, if you can please suggest
@TDSunshine
@TDSunshine 11 ай бұрын
You can't create component properties through naming sadly only variants :/ BUT if you have a variant property which is a true/false one than you can use naming this way - "name of property = True" (or false) and then in the instance you will have a toggle to control this variant. Hope that makes sense 🙏🏻 I go through this in this video at 17:13 ☀️
@siterulers
@siterulers 11 ай бұрын
@@TDSunshine yeah actually I was able to find solution to that..but thanks!
@aleksandarvrhovac9690
@aleksandarvrhovac9690 10 ай бұрын
What about buttons that have an icon on both sides? Does it make sense to use Boolean in that case? But then there remains the case for displaying only one icon (Alone). Well done! Keep going!
@TDSunshine
@TDSunshine 10 ай бұрын
Hmm double icon buttons are always a bit tricky :/ you could use Boolean component properties on both, label them left and right and then you can toggle the visibility so you can see just the left just the right , both or none. Sometimes variants are more appropriate and sometimes component properties 🙃 hope that helps! ☀️💛
@jonathankraal1741
@jonathankraal1741 4 ай бұрын
I've learned so much from this series, thank you!! I do have a question about maintaining aspect ratio for icons that don't have the same width and height. When using a variable (icon-size) for the width of my icons, the height does not adjust automatically to keep the icon's aspect ratio and the icon becomes warped. How would you go about using variables in this scenario?
@TDSunshine
@TDSunshine 4 ай бұрын
Great question! aspect ratio is always a bit of a tricky one when resizing or fitting things into a new space. I think you can try different combinations of constraints or fixed/fill/hug and see if any of them make the swapping work better and keep the icons from distorting. Another good trick is to wrap all your icons in a square frame and set your icon inside to scale scale. that can just make swapping a bit easier. I hope that helps! ☀️🙏🏻
@jonathankraal1741
@jonathankraal1741 4 ай бұрын
Thank you so much for your answer@@TDSunshine ! I like your frame trick, I'll stick with that.
@edriasalsa9262
@edriasalsa9262 Ай бұрын
Thank you for this tutorial! but i wanna ask after making this button components and adding it to the design for the prototype, why aren’t there any actions like hover or selected? do i need to prototype it again? if so, is there a tutorial for it?
@TDSunshine
@TDSunshine Ай бұрын
Yes! I put all the prototyping into a different video because it was too long ☀️🙏🏻 - kzbin.info/www/bejne/qqCbi4uDZq15gLc
@kieronsykes
@kieronsykes 11 ай бұрын
Great series of videos! Learning loads from them atm. I did have a quick question about the radius group in the sizing tokens though. What is the reasoning for this and would it not just be easier to have a collection called 'Component Tokens' and have a Radius group in there, seeing as generally radius will just be set on components? Many thanks :)
@TDSunshine
@TDSunshine 11 ай бұрын
Thanks! My answer is as always - it depends 🙃 I think for me I found that radius is used a lot on components but I also use it on single elements sometimes when designing so it's a good one to have defined kind of separate to any component. If there is something you feel might be used across all your designs like page margins, graphic element sizing, spacings, or paddings it's great to have a collection for those. ☀️
@kieronsykes
@kieronsykes 11 ай бұрын
@@TDSunshine thanks for your reply! Makes total sense. I’m just starting out a brand new design system for a large rewrite and trying to think of as much as possible up front before getting started….nightmare 😂
@TDSunshine
@TDSunshine 11 ай бұрын
good luck! planning ahead is a great idea but remember design systems are ever evolving and Figma is also ever-evolving! haha so if in a few weeks, you find out you actually want to do something in a different way just remember that that's part of the fun! #breathdeepandchangeitagain 🤪 @@kieronsykes
6 ай бұрын
Thanks for this tutorials! I'm really looking forward to Design System Part 6, 7, 8. Are they coming?
@TDSunshine
@TDSunshine 6 ай бұрын
Hey! you can find them all here ☀️ - kzbin.info/aero/PLx-zZQ15gdAqcVCE_EQvm820iWfgoKarq
@micacharise1330
@micacharise1330 6 ай бұрын
Your channel is such a gem! ✨ Thank you, thank you so much for being generous with your knowledge! 💖🫶
@TDSunshine
@TDSunshine 6 ай бұрын
awww thanks! 🙏🏻☀️💛
@filipeamilton2879
@filipeamilton2879 Жыл бұрын
Nice tips 😁👍
@TDSunshine
@TDSunshine Жыл бұрын
Thanks 😁☀️
@ronbrown5194
@ronbrown5194 8 ай бұрын
Thank you so much for making these great videos! I'm learning a lot from them. When I made my buttons, I realized that the icon I used was only a vector, so I could not select all instances to create the instance swap. Do you know of a solution to this problem?
@TDSunshine
@TDSunshine 8 ай бұрын
You’re welcome! You can only use instance swap on other components so once you make your icons into components it should work 🤞🏼☀️
@ronbrown5194
@ronbrown5194 7 ай бұрын
@@TDSunshine I'll try that. Thanks for the tip!
@minhtamdesigner
@minhtamdesigner 6 ай бұрын
I have a case about a set width for a button. mostly I use the width is hug content. but in some cases, I want to fill a container. Ex: form sign-up, the width button is 100% (that means the width is fill container). Can we create a token with width as auto?
@TDSunshine
@TDSunshine 6 ай бұрын
hmm... I think this isn't possible right now :/ maybe check on Figma's forum though some people might have found ways around this! ☀️
@minhtamdesigner
@minhtamdesigner 6 ай бұрын
@@TDSunshine I think so, For now, Manual setting up.
@kartikmalviya834
@kartikmalviya834 8 ай бұрын
Hi, Tair. I'm trying to build a component library. I have a question, what if I have different sizes of icons with DIFFERENT STROKE WEIGHTS, Should I define one more variable for stroke. Because I have a icons collection with different sizes and if follow the advice i the video it manages the icon size but not the stroke weight. What should I do?
@TDSunshine
@TDSunshine 8 ай бұрын
That’s a great idea! I filmed this video before you couldn’t use variables for stroke but Figma keep making amazing updates! It could be a great idea to use them that way ☀️🤗
@aldiransantos1946
@aldiransantos1946 7 ай бұрын
wow!
@TDSunshine
@TDSunshine 7 ай бұрын
🙏🏼☀️
@joseparedes240
@joseparedes240 27 күн бұрын
Thanks for your videos, they are great! I have a doubt, at minute 19:58 when applying the text property, I lost the original color of the label in each type of button. Most of the texts took the value of the primitive variable “White”. Do you know if there is a way to create the text property without this happening? In advance, thank you very much!
@TDSunshine
@TDSunshine 25 күн бұрын
oo thats strange! This feels like a bit of a bug tbh not sure why it happened... ☀️🙏🏻
@mykairos
@mykairos 6 ай бұрын
Hi, first of all I would like to tell you that I love your videos and they are very useful and for that THANK YOU! but I think I have a problem with the V-padding of all the "label" buttons: despite following all the steps the button is smaller. Can you please tell me what the problem might be?
@TDSunshine
@TDSunshine 6 ай бұрын
Thanks! I'm glad you like them! ☀️🙏🏻 Check that your button is set to "hug" in the width? it might not be hugging and therefore ignoring the size of the label + the padding. I hope that helps!
@ZoomZoomAtlanta
@ZoomZoomAtlanta 11 ай бұрын
Great Videos, the only issue I have is, When I swap the Icons it goes back to the button orginal color which is Icon/Default but my button Icon is set to Neutral/Test/Negative. Please advice. I am sure you have a solution for this and I know I am not doing it correct.
@TDSunshine
@TDSunshine 11 ай бұрын
Thanks! yes this is a weird one! you need all your icon vectors to have the same name and then it should keep the colour. I hope that helps! ☀️
@irfi8
@irfi8 6 ай бұрын
Cool!
@TDSunshine
@TDSunshine 5 ай бұрын
🙏🏻☀️
@hectorosbornerodriguez9683
@hectorosbornerodriguez9683 10 ай бұрын
you have a typo on the "disabled button .. 2min into into the video :)
@TDSunshine
@TDSunshine 10 ай бұрын
I have a typo in almost every video 🙈🙈 haha thanks for flagging though 🤪☀️
@ComostroTirsoJose
@ComostroTirsoJose 5 ай бұрын
GENIUS!!!
@TDSunshine
@TDSunshine 5 ай бұрын
Thanks! ☀️🙏🏻
@karenbeal2387
@karenbeal2387 Жыл бұрын
Great video. Your videos are really well explained if a bit fast! I find keeping up difficult - must be my age! One comment I have is your icons are centred with padding so when you add left and right icons the padding left and right is inconsistent over the whole button, and it looks off to me. How do you get around that? I realise we need icons to be consistent sizes which is why they are within a regular square and some icons are irregular shapes. But I find it really jarring for there to be more visible padding on the outer side where the icon appears. Any thoughts?
@TDSunshine
@TDSunshine Жыл бұрын
I'm a fast speaker I know sorry 🙈 The icon issue is a very common one! I do prefer having them in frames sometimes to make sure that they are all the same size regardless of the shape of the icon itself but I see your pint completely about it creating different paddings sometimes 🙃 at the end of the day I think its all up to your preference as a designer. If the designs end up going to someone else its really important to have good documentation to show this point because like you said, it can be jarring to have padding there but not know where it came from. Hope that helps! ☀️🤗
@karenbeal2387
@karenbeal2387 Жыл бұрын
Thanks@@TDSunshine - I have another query about the icons, sorry if I am asking dumb questions! I have set up the buttons using the variable including sizing for the icons - small, med and large. But when I switch modes the icons size is not changing. What have I done wrong! I haven't named or made them into components yet as I need to fix the icon sizing. Do I need to put the icon into an autolayout and make it hug? I don't need the icon in the button to change just resize for small, medium and large. Thanks so much. I actually worked it out, but even so, when I change the variable for small, med and large, I have to change both dimensions, horizontal and vertical - it doesn't scale even though my icons are set to scale - must have done something wrong!
@TDSunshine
@TDSunshine Жыл бұрын
so! this is where old-school constraints come in! the icon is in a frame so you need to set up how the vector reacts when its parent changes size. I have a video where I go through constraints if you want to check it out -> *Figma Frames & Constraints* - kzbin.info/www/bejne/fZa7d2qoZb2ZpJY @@karenbeal2387
@karenbeal2387
@karenbeal2387 Жыл бұрын
@@TDSunshine - thanks - I worked out what I had done wrong in the end, thanks for the link!
@minhtamdesigner
@minhtamdesigner 6 ай бұрын
That’s amazing. I just have a question, if the line-height of text using 120%. Maybe the height of text larger/smaller with icon. the issue is the heigh of button will be different between icon only with text only. we will fix with fix line-height of text , right?
@TDSunshine
@TDSunshine 6 ай бұрын
So I would recommend either fixing the height of the button so that the elements inside don’t change its height OR you can change the line height of your text. I hope that helps! 🙏🏼☀️
@Sallysite105
@Sallysite105 5 ай бұрын
Great video thank you! I am running into an issue with my icon swapping. When I set my button to disabled state with an icon and then swap the icon to something else the icon does not keep the same color it changes to the original color of my icon not the one I set on the button. Do you have a fix for this?
@TDSunshine
@TDSunshine 5 ай бұрын
Great question! the icon vector levels need to all have the same name for them to stay the same colour. So it's ok that they are in frames with different names but the "lowest level" need to all be named the same. I hope that helps ☀️💛🙏🏻
@biag6553
@biag6553 8 ай бұрын
Thank you sooo much for this videos, they are great! But I have a question: My icons are all in 1 color, so when I change the Icon on my buttons it doesn't come with the color assigned to the previous one. Is there any way I can create a controller for color like that on the button or do I have to create an instance for all my icons with multiple colors?
@TDSunshine
@TDSunshine 8 ай бұрын
You're welcome! 💛 That's a great question I hate when that happens! the solution I found to this is pretty silly but it works 🙃 you just need to make sure that the icons all have the same name. and by that I mean the vector itself has the same name across all the icons. They can still be components or component sets with different names but the icon itself should all have the same name. I hope that helps ☀️🙏🏻
@meryemdemir4311
@meryemdemir4311 4 ай бұрын
Hello again, I have a question. In the last part, if I want to use icons of different sizes, how can I do it? So if I want to use a smaller icon on the smallest button
@TDSunshine
@TDSunshine 4 ай бұрын
Great question! you have a few options for this. You can either just change the size of the icon instance in the different button variants OR you can create different variants of the original icon in different sizes and then select the right variant when you use an instance of it in the different buttons. I hope that makes sense. ☀️🙏🏻💛
@kirubavathielumalai1311
@kirubavathielumalai1311 8 ай бұрын
Soooo cool👍
@TDSunshine
@TDSunshine 8 ай бұрын
thanks! 🙏🏻☀️
@TDSunshine
@TDSunshine 8 ай бұрын
if your buttons are autolayout maybe they aren't set to "hug" ? and then they aren't shrinking down or expanding to fit? ☀ @@kirubavathielumalai1311
@ronbrown5194
@ronbrown5194 7 ай бұрын
I couldn't find the video you mentioned where you created your icons for this project. Would you mind sharing the link?
@TDSunshine
@TDSunshine 7 ай бұрын
here you go -> *Passive income - Icon set* - kzbin.info/www/bejne/boeWfYCIppqWe9U ☀️
@ronbrown5194
@ronbrown5194 7 ай бұрын
@@TDSunshine Thanks!
@gulnisamirizade2994
@gulnisamirizade2994 10 ай бұрын
If I have 3 colors: primary, secondary, and accent, how can organize all these colors in button component? Or should I create another new component for each of the secondary, accent colors?
@TDSunshine
@TDSunshine 10 ай бұрын
there are a few approaches you can take. You could make 3 variants of the button, each with a different color, and then give them a "state" property with values for primary, secondary, and accent. Or you could keep just one button colour and then when you use an instance of it you can just change the background colour as you please. I think the first option is better for documentation and you can add a description for each variant on when to use it. I hope that helps! ☀️
@gulnisamirizade2994
@gulnisamirizade2994 10 ай бұрын
@@TDSunshine Thank you so much💞
@AlexandraTyler-n4d
@AlexandraTyler-n4d Ай бұрын
In what video do you reference the other collections you created?
@TDSunshine
@TDSunshine Ай бұрын
You can find all of them in this playlist - kzbin.info/aero/PLx-zZQ15gdAqcVCE_EQvm820iWfgoKarq ☀️🙏🏻💛
@martinkirsebom2482
@martinkirsebom2482 5 ай бұрын
at 2:30 you talk about a video where you dive into icons, can't seem to find it? :D
@TDSunshine
@TDSunshine 5 ай бұрын
Here you go - Creating an Icon Set - Passive Income for Designers [Figma & ChatGPT] kzbin.info/www/bejne/boeWfYCIppqWe9U 🙏🏼☀️
@martinkirsebom2482
@martinkirsebom2482 5 ай бұрын
@@TDSunshine Thank you!
@henkegiaretta
@henkegiaretta Жыл бұрын
Have followed along with all your videos but when I choose the appropriate Primitive Number Scale for the Spacing it doesn't show the actual value like in your video here, just the token name like 2XS and so forth which isn't that practical. Any idea?
@TDSunshine
@TDSunshine Жыл бұрын
Yes I agree with you actually! In my first video where I set up the number scale primitives I used XS, S, M etc. But then, just like you, I realised it wasn't practical so I changed the primitive variable names to reflect their actual value. ☀️🙃 I'm also still trying to learn what's the most easy way to use variables and like I always say with Figma there is never just one way to do something! its al about what suits your preferences and needs best 🙏🏻🤗
@CreativeSatyal1
@CreativeSatyal1 6 ай бұрын
@TDSunshine Thanks a lot for such great tutorial. It Helped me a lot. Just a small problem where I stuck, when I change button from small to medium and large, the button without icon is smaller than buttons with icon. Can you suggest how to fix?
@TDSunshine
@TDSunshine 5 ай бұрын
You're welcome! You can trey fixing the size of the button so it stays the same size with or without the button! I hope that helps 🙏🏻☀️💛
@CreativeSatyal1
@CreativeSatyal1 5 ай бұрын
@@TDSunshine Thank you for suggestion, I already fixed by increasing line height 😎. I really loved the way you explain. It is really motivating and helpful for me. Keep posting your amazing works..
@ugurates19
@ugurates19 8 ай бұрын
thank, thank, thank yuuuo! Sweet girl!! Wonderfull
@TDSunshine
@TDSunshine 8 ай бұрын
You're so welcome! ☀️🙏🏼💛
@TravisFulton-k9w
@TravisFulton-k9w 3 күн бұрын
I can't seem to find how to create the icon instance swap in UI3. Do you know? Thanks!
@TDSunshine
@TDSunshine 13 сағат бұрын
In UI3 when you select an instance all the controls will be at the very top of the design panel ☀️🙏🏻💛
@TravisFulton-k9w
@TravisFulton-k9w 7 сағат бұрын
@@TDSunshine Thanks so much!
@aina9873
@aina9873 6 ай бұрын
Hey if you are able to please help with this: I got an error message about my small icon buttons after creating a component set; It reads like this : Some layers have invalid names. Prop=Value, Prop=Value...Do you have any idea to fix this? Thank you
@TDSunshine
@TDSunshine 6 ай бұрын
Make sure you have commas separating each prop = value, and also make sure that you don’t have a comma at the end. I hope that helps 🤞🏼🤗☀️
@aina9873
@aina9873 6 ай бұрын
Alright, thank you!🙏@hine
@kenneth_philip_dakas
@kenneth_philip_dakas 9 ай бұрын
You are so fast and great at what you do. Please I am using the free Figma version so I cannot use mode as like you did for the button variation. Please how do I create the different button variations using group?
@TDSunshine
@TDSunshine 9 ай бұрын
Thanks! Its a bit trickier without modes but if you just create a few variables and then select them all and right click then you can group them. This is helpful because later when you swap variables on the file you can search by group name. I hope that helps! ☀️🤗
@kenneth_philip_dakas
@kenneth_philip_dakas 9 ай бұрын
Thank you for your quick response. I will try it and see I can get. @@TDSunshine
@kaysarzamy3680
@kaysarzamy3680 6 ай бұрын
What about instance swap feature, I think you missed it
@TDSunshine
@TDSunshine 5 ай бұрын
I add one at 20:42. ☀️🙏🏻
@SakibulIslam-t1e
@SakibulIslam-t1e 3 ай бұрын
OK when i chosse H padding and V padding also spacing it takes the first value.And I can't change the value.why & How?
@TDSunshine
@TDSunshine 3 ай бұрын
Not sure what you mean by "first value"?
@SakibulIslam-t1e
@SakibulIslam-t1e 3 ай бұрын
@@TDSunshine Thanks For Reply. I Figure it out later. Actually I have to change the mode from the layer. Again Thanks for this great series.
@alkesh482
@alkesh482 11 ай бұрын
Niceee
@TDSunshine
@TDSunshine 11 ай бұрын
Thanks 🤗☀️
@leticiafraga
@leticiafraga 8 ай бұрын
🤯
@TDSunshine
@TDSunshine 8 ай бұрын
🙏🏼☀️
@liamfarrell3281
@liamfarrell3281 4 ай бұрын
Instead of deleting all items of the page to add the Label property, CMD + F to find all instances with text set to 'Label', these should be the buttons you recently created, now you can add the Property. Voila.
@TDSunshine
@TDSunshine 4 ай бұрын
great tip! ☀️🙏🏻
Girl, dig gently, or it will leak out soon.#funny #cute #comedy
00:17
Funny daughter's daily life
Рет қаралды 68 МЛН
АЗАРТНИК 4 |СЕЗОН 3 Серия
30:50
Inter Production
Рет қаралды 985 М.
The CUTEST flower girl on YouTube (2019-2024)
00:10
Hungry FAM
Рет қаралды 55 МЛН
Will A Guitar Boat Hold My Weight?
00:20
MrBeast
Рет қаралды 221 МЛН
Master Figma Component Properties in 20 Minutes
20:02
Boroji Design Inc.
Рет қаралды 675
Build a Design System! Ep. 1: Figma Tokens & Variables Setup
1:25:39
UI Collective
Рет қаралды 10 М.
Master Design Tokens - From Basics to Advanced
44:30
UI Collective
Рет қаралды 22 М.
10 tips to work 10x faster in Figma
18:54
Carola Pescio Canale
Рет қаралды 410 М.
Figma tutorial advanced colour tokens using variables
39:48
Pixellink
Рет қаралды 9 М.
Girl, dig gently, or it will leak out soon.#funny #cute #comedy
00:17
Funny daughter's daily life
Рет қаралды 68 МЛН