exact definition of what i have been searching for , i learned more from your tutorial than the original documentation on figma's site , much love and great appreciation. !
Thank you so much for this extremely informative tutorial! There is no fluff and you get straight to the point. I watched several Figma and LinkedIn Learning tutorials, and I feel that you've explained it way better than they have.
As someone who was getting really confused figuring out the Version 2 way of configuring components, this was such a helpful explainer vid. Thank you so much!
I've started using Figma a week now, and working with variants was not an easy thing for me + it didn't work form the first time. With this video I was able to achieve what I needed without much effort. Thank you.
Omg,I'm finally able to understand this concept after watching tons of other videos, but through your video I'm able to make it to an end and am so grateful for your video. Keep making such videos ..🥺😌✔
Thank you very much!!! I am learning Figma so that I could create a design plan for my android application. This greatly helped me understand the concepts between variants of component version 1 and 2. Now my workflow is comparably faster from what I started last week. Keep it up!!! I want to support you all the way!!!
Awesome video, this is one of the few tutorials that clearly explains this needlessly complicated mess that Figma created, and BTW, tip for the Figma developers. STOP CHANGING THE WAY THE PROPERTIES INSPECTOR OPERATES!!!!!! Here it is only 13 days after this tutorial was uploaded and Figma has ALREADY altered the inspector AGAIN, making it difficult to follow.
Yo this helped so much and I always appreciate the content and when i found the channel and got the energy from you from the previous video, you've been nothing but real and can vouch for the amazing content and how down to earth you are with everything! All the most love, respect, and appreciation
This was one of the best tutorials I've ever followed :) Thank you so much for making this, it's so clear and informative! I learnt a lot, now I need to make 100 examples to practice :D
Thank you! This is very helpful. I tried learning from bit-size tutorials in Figma channel, but I get confused. You provide more information in this video I was able to recreate it :)
That’s why I made the video! I couldn’t find anything that explained it well enough for me to understand! Glad it helped you. Thanks for saying something!
Thanks! Chris for making a separate video on components in Figma. It will be crazy if Figma adds a feature to convert those components to library/frameworks like React.js.
You make fantastic videos mate, the quality is high, your voice is pleasant, you speak clearly and concisely. Subbed and I wish you success :) (This is Kevin Powell tier essentially)
Hello Chris, I was just watching your tutorial on RUclips about creating components with properties in Figma. Well done! And thank you for providing it. At the end of your tutorial 22:43 you change the icon to a kind of Photo icon and it does not completely change to the light color theme. I think when you make a booelan ”union” of all icon elements it will apply the color to all elements. Even though I often encounter another problem with icons and it drives me crazy: I have an icon set in a dark color. I integrate it in a component, but when I want to change the icon with icon swop the original color of the icon comes back. When I try to apply a a white color to the changed icon I often end up appliying colour to the square frame instead of the icon itself. I have to select the icon in the layers and this works but this is far from comfortable. I already considered creating a boolean switch with light / darkmode for all my icons but there must be a different way to avoid this. 🥲I hope you understood what I mean, Greetings and thanks agian, yenz
The only way I've found to do this is to have variants for each of my icons (light and dark ones). And then to toggle them in the nested sidebar settings for the wrapper component. Hopefully that makes sense?
@@CodinginPublic yes I actually started to create dark and light variants for my Icons and it already paid off. I think this is really a weak point in Figma. So many things are thought extremely well of the team, but handling icons was much better in Sketch 👍🏽
That’s why I made the video! I couldn’t find anything that explained it well enough for me to understand! Glad it helped you. Thanks for saying something!
Great tutorial thanks! Quick question....what mode are you in in terms of background etc? When I change the background of my design page to black from the right hand panel then the whites in text for example show up as more of a grey color than true white. I'm not seeing any other options for this setting.
Loved the tutorial! I definitely got a better understanding of components & Variants. I kind of hit a wall when I tried dragging the icons into the button. The blue line didn't show up for me, I'm not quite sure what I'm doing wrong there.
Glad you loved the tutorial, Imani! You’ll need to make sure your button is an auto-layout first before dragging in an icon. If it is an auto layout and you still can’t get it to work, you can always drag the icon in using the left-hand sidebar. Let me know if that doesn’t make sense or if you get stuck!
@@CodinginPublic You really are an outstanding instructor. While I could add some polish, for the most part, this free tutorial is better than both courses I bought and paid for (Udemy). Would encourage you to consider creating material for sale, if that's something you contemplate. Great job here.
@@stormbytes That's very kind! I may consider doing paid courses at some point, but I wouldn't want to do it unless I could really up my quality. Currently, I don't know that I have the capacity to do that, but maybe one day!
Awesome!!! Is there a way to connect those hover states and toggles to another button? How would you make a "cart" where you can add items and it will update in the summary?
Hmm…I don't know how to do that in Figma? It might be possible though? Not sure :) Sorry! If it was possible, it'd be in the prototyping settings. You'd hook up add to cart buttons in your design to the cart and wire up a change in the number based on the button you click?
Thank you very much for this video, I was previously doing an outdated method, this is a time saver but I have one question. if you prototype one button to another and used it on one frame instead of connecting two frames, would it work or affect the settings?
So glad it was a big help! Yes, so I'd just hook up the prototypes on the actual components you create and then all their instances should pick that up. Hope that makes sense.
amazing tutorial! very helpful. but quick question. what if i wanted to prototype a hover animation for multiple of those buttons while having the text/icon color change? what would be the most efficient way of going about doing that?
Great tutorial. Thanks for sharing! How do you delete a state name? Not change but delete from the variant property section? All I'm able to do is change the stacking order of them and/or change the name. I'm all up to date with latest version. Keep'em coming 👍
Glad you enjoyed it! Just make sure you've selected the component (not a variant, but the whole component with the dashed purple border) and right-click the property in the right-hand sidebar. You can delete it from that popup menu.
@@CodinginPublic Thanks, I didn't know that and that will come in handy. But I was referring to state name, not property name. For instance, if I have a button and I have named a state within a property named Type for Hover, then how do I delete the name Hover from the property section? Is deleting the actual component related to the state name the only way?
Thanks for showing us the swap feature, I must say your the first one explaining that in a sensible manner. I think I get it. But the the swap menu shows other components that are on the same Figma page in my button demo, does this mean that this button component set needs to be living in a solo section without anything else on that page in order to just show the icons that are prepared like you showed? Seems like it cause when I use the asset panel to get my button demo component to place in a separate page the same 7 components are available in the swap icon menu. I just wanna have the prepared set of 4 icons there, not those 3 other components.
I think they've pushed an update since my video that allows you to choose how the swap feature works (need to still look into that), but you should be able to place all the icons in a single frame. Just make sure all those icons are individual components. Then when you add an instance of one of those components to your button (or whatever you’re building), swapping will naturally select all the other icons on your board in the swap menu. Hopefully that makes sense.
Such a great tutorial! One thing, how did you fix the colour issue with the icon at the end? where only some of it gets coloured I think due to different amount of vector layers in icon frames?
if anyone can answer - @16:52 , how was he able to simply option drag the icon component into the button component? Mine refuses. I have to detach the button component to add the icon next to the text and create the button component again. Please help!
Hello I had exactly the same problem, he said "hold down the Option key and drag to create the instance of the component". On Windows that's Alt+drag. It just didn't work. What solved the problem was deleting all that I have done and starting the tutorial from scratch. I remade the buttons and when I came to 16:52 I Alt+dragged the icon component into the button and it magically worked. I don't know if I've missed some step or what, but redoing it worked for me.
I use a Mac and i followed option drag like he said and it didnt work first. I resized the icons and then it magically worked for me too! 😀@@papagooseonline
thanks very helpful. just want to comment on 2 things. when you create a frame and turn it into auto layout then put text in it, the width and the height have to be set to hug so frame resizes with the text size. other issue that i noticed was with the icons. when i made an instance and dragged it to the button it would lay on top, so i needed to go to the layers tree and drag it into the location where i wanted. this was annoying so if i missing something would appreciate clarification.
Glad it was a help! Yes, so when I typically want to add text to a frame (like for a button), I create the text first and then turn that text frame into an autolayout. I think that automatically makes it set to hug? But either way, yes, you're correct. For layering, you can use the [ and the ] buttons in your keyboard to move things up and down. I think perhaps it's shift + ] or something to move all the way? You can use the command palette and search for "send to front" or something. Does that help?
Thank you for the tutorial. When using Instance Swap Property, the replaced new icon is disorted in a way as if it tries to fill the container of the old icon. Is there a way for the replaced icon to come by maintaining its original size?
In minute 7:16 how are you getting that detach/broken link option? My panel looks like a regular Fill section and the broken link does not appear. Using the shortcut Command B to detach it changes the formating of the button.
It's because I'm using local color styles. I did a video on Figma for developers that shows how to set this up: ruclips.net/video/2liZ3uvO9bs/видео.html
Really great tutorial, thank you very much, hugely helpful for somebody like me getting to grips with Figma's key concepts. However, I had a small problem. The buttons I made in sync with your video had both colour fills and white fills as is a common convention with primary/secondary button types in UI design. So my white icon set was invisible in many of my buttons. Is there a neat solution or do you just need to change the button colour manually (or produce a duplicate non-white set which would be less than ideal)?
Sorry for my delay here. Since the icons are their own components, I’d just set up a light and dark variant on those components? Then you can change the nested component when needed. Does that make sense?
Ok so the 2022 update made it so that we don't have to create each version of the button - but what about when handing off to development? Is it useful to them to see all the different types laid out visually?
I guess it depends on the dev; personally, being generally comfortable with Figma, I'm more than happy to cycle through the buttons I'd need and create them using the component props. A lot of this depends on the scale of the application, too? I'd recommend just asking the dev what she/he prefers; I'm assuming you'd get different answers per dev and per project.
Thank you for the video. The point of Boolean is to reduce the number of components (Let's say a button component will now have 10 variants instead of 50). My question is, if the 50 button components were already used in design files by other designers from a shared component library, and the buttons get reduced to 10 using Boolean, any impact this could have on the designers' design files?
Hey, Mastermind! Sorry for my delay here. Hmm…I’m not actually sure? I haven’t run into that scenario (I’ve mostly worked in my own files). I’m assuming everything will update to match? Anyone else have experience here?
I’ll respond to you privately, too, but in case others are struggling, I think it’s because you’re trying to move the entire icon component rather than an instance of the component over. So hold down alt (Windows) or opt (macOS) and click-drag the icon over to the button. If it doesn’t let you snap it in there, you can situate it in the button in the sidebar. Sorry I didn’t make that clear in the tut. Let me know if that doesn’t solve your problem!
can you help me, When I try to replace the icon the icon's color will change to the original icon color not follow on button properties. is there any way to fix it?
You’ll need to set up the icons as their own components with two variants (one for each color). Then you can double click into that icon on the button and change it with a toggle or dropdown (depending on how you set it up). Does that make sense?
After I set up the icons as components, I created a dark and light variant. Then when I created the button component, I selected either the light or dark version of the variant in the button component sidebar. Does that make sense?
exact definition of what i have been searching for , i learned more from your tutorial than the original documentation on figma's site , much love and great appreciation. !
So glad it was a help!
Thank you so much for this extremely informative tutorial! There is no fluff and you get straight to the point. I watched several Figma and LinkedIn Learning tutorials, and I feel that you've explained it way better than they have.
Awesome! Glad you enjoyed it!
Super clear, much better that Figma original videos explain the subject. Thanks a lot!
So glad it was a help! Thanks for taking the time to say something !
Awesome! Yeah, I couldn’t understand it, so putting the video together really helped me. Glad to know it was a help to you, too!
@Xeno Nautili 100%
🙌
As someone who was getting really confused figuring out the Version 2 way of configuring components, this was such a helpful explainer vid. Thank you so much!
Wonderful! Thanks so much for saying something!
I've started using Figma a week now, and working with variants was not an easy thing for me + it didn't work form the first time. With this video I was able to achieve what I needed without much effort. Thank you.
Thanks for sharing!
Omg,I'm finally able to understand this concept after watching tons of other videos, but through your video I'm able to make it to an end and am so grateful for your video. Keep making such videos ..🥺😌✔
So glad it was a help!
Watched so many videos and nobody has explained it like you! Thank you.
So glad it was such a help!
Thank you very much!!! I am learning Figma so that I could create a design plan for my android application. This greatly helped me understand the concepts between variants of component version 1 and 2. Now my workflow is comparably faster from what I started last week. Keep it up!!! I want to support you all the way!!!
So glad it helped! Thanks for saying something!
This is pure gold, now I can have some peace. Thank you for sharing.
So glad it was a help!
This is an excellent tutorial that helped me a lot, thanks a ton!
Great! Thanks for saying something!
Yoooo
This was so easy to understand
Thank you so much!
I’m sending you a virtual hug right now 😭
You’re welcome 😊 Right back at ya! 🤗
Awesome video! Finally someone who explains it in a manner that's easy to understand. Congratulations!
Glad it was helpful!
I've seen different videos on components and this is definitely the best
That’s great to hear! So glad it was a help!
very helpful! i've been struggling with component properties for a while
Glad it helped!
Awesome video, this is one of the few tutorials that clearly explains this needlessly complicated mess that Figma created, and BTW, tip for the Figma developers. STOP CHANGING THE WAY THE PROPERTIES INSPECTOR OPERATES!!!!!! Here it is only 13 days after this tutorial was uploaded and Figma has ALREADY altered the inspector AGAIN, making it difficult to follow.
So glad it was a help! Bummed to hear they’ve already changed the inspector again :)
This is the best and right to the point explanation of Figma components. Thank you !
You’re welcome! Glad it was such a help!
You teach so well, one of the best channels here to learn, thank you v v much! Wish I could be your student 😭
So glad you’re enjoying the channel!
I really benefited from this tutorial. It was such a great help. Straight to the point explanation. Thank You
Great! Thanks for saying something!
Yo this helped so much and I always appreciate the content and when i found the channel and got the energy from you from the previous video, you've been nothing but real and can vouch for the amazing content and how down to earth you are with everything! All the most love, respect, and appreciation
So glad to hear they've been a help! And even better that you've enjoyed the channel. Thanks for your kind words!
Much much much appreciate this tutorial and effort you put it to make it very concise
So glad it was a help!
The best tutorial so far :) Thank you so much!
You're very welcome!
Great Video with superset clearity. Thanks sir
You're welcome! Glad it was a help!
Thank you so much! This is the best explanation I've found!
Glad it was helpful! Thanks for taking the time to say something!
Thanks alot man for clear & concise approach.
Helped me alot.🙌🙌
Awesome! Thanks for saying something!
Really Beautiful and straight forward video. I learned a lot. Thank you very much🙂
Awesome! Thanks for saying something.
This was one of the best tutorials I've ever followed :) Thank you so much for making this, it's so clear and informative! I learnt a lot, now I need to make 100 examples to practice :D
You're so welcome! Thanks for taking the time to say something!
Thank you! This is very helpful. I tried learning from bit-size tutorials in Figma channel, but I get confused. You provide more information in this video I was able to recreate it :)
Wonderful! So glad it was a help. Thanks for taking the time to say something!
Amazing! You cleared up a lot for me in this video. I was just working on a component system yesterday, so this was timely. Thanks.
You're welcome! Thanks for saying something!
Learned a lot!! Thanks for the tutorial 🙂
Glad it was helpful!
Thank you so much for this tutorial, your explanations and examples are so clear! Really appreciate it
You're very welcome! Thanks for taking the time to say something!
Very Informative, helpful and Educational video! Thx for the tutorial man!
Wonderful! Glad it was a help!
Thanks bro I almost watched all videos but you explained it "smooth as butter" 👍 please make more videos on figma
🙏That's very kind. Hopefully some more Figma stuff soon! :)
Thank you so much this really help me understand components better looking forward to other of you videos
You’re welcome!
This was really helpful👏 Very Well explained !
Glad it was helpful!
Excellent video. Highly recommend this. Better than figma official one for sure. Thank you 😊
Awesome! Glad you’ve enjoyed it!
Thank you for the informative tutorial. Really helped me💯
Awesome! Thanks for saying something!
Vraiment parfait ! Très clair. (very clear, perfect) 👏
🙏 So glad it was a help!
Duuude! This was one of the best tuts i've come across. No BS, straight to the point, thorough and informative! Thanks so much. Keep em coming!
So glad you enjoyed it!
Love your work!
🙏 thanks so much for saying something. Glad it was a help!
Subscribed just for this video. On point content
Thanks so much!
Nicely explained. Thanks, Man.
Glad it was helpful!
Thanks, a lot. this video helped me to learn varients very well.
Glad it helped!
Oh my, thank God for this video. Finally I understand! Thanks so much. Subscribed :)
That’s why I made the video! I couldn’t find anything that explained it well enough for me to understand! Glad it helped you. Thanks for saying something!
Super clear, thanks for this!
Glad it was a help!
I found this today ❤❤ it clear my doubt.
Glad it was helpful!
Thanks for the video, it was super helpful
Glad it helped!
Thanks! Chris for making a separate video on components in Figma. It will be crazy if Figma adds a feature to convert those components to library/frameworks like React.js.
Thanks so much, Neon! Glad to know you enjoyed it. I'm sure there's some community plugin that does that?
@@CodinginPublic Wow this will be a great topic for your next video - How to create and publish a figma community plugin or UI Kit?
Well, I’ve never done it 😊
@@CodinginPublic Oh! No worries save the idea for a future video.
Excellent tutorial, thank you. And also thank you for centering that set of components @11:58 :)
Lol I got you 👊
This was sooooo helpful, thank you!
You’re welcome!
You make fantastic videos mate, the quality is high, your voice is pleasant, you speak clearly and concisely. Subbed and I wish you success :)
(This is Kevin Powell tier essentially)
Thanks so much! Kevin-like is a high compliment! That’s very kind. Thanks for the sub!
Amazing tutorial man!
Glad it helped!
This helped a lot! Thank you so much
I'm so glad! Thanks for saying something!
thank you so much for the clear presentation! great presenter, subscribe!!🔥🤝
You’re welcome! Thanks!!
finally understand. thank you, great video
You're welcome! Thanks for saying something!
You Help me a Lot Big Love From Algeria
Great! Thanks for saying something!
Great video. Very informative
Great! Glad it was a help!
Great video very helpful thanks 🙏
You’re welcome!
The best explanation!
Glad it was helpful!
Hello Chris, I was just watching your tutorial on RUclips about creating components with properties in Figma. Well done! And thank you for providing it. At the end of your tutorial 22:43 you change the icon to a kind of Photo icon and it does not completely change to the light color theme. I think when you make a booelan ”union” of all icon elements it will apply the color to all elements. Even though I often encounter another problem with icons and it drives me crazy: I have an icon set in a dark color. I integrate it in a component, but when I want to change the icon with icon swop the original color of the icon comes back. When I try to apply a a white color to the changed icon I often end up appliying colour to the square frame instead of the icon itself. I have to select the icon in the layers and this works but this is far from comfortable. I already considered creating a boolean switch with light / darkmode for all my icons but there must be a different way to avoid this. 🥲I hope you understood what I mean, Greetings and thanks agian, yenz
The only way I've found to do this is to have variants for each of my icons (light and dark ones). And then to toggle them in the nested sidebar settings for the wrapper component. Hopefully that makes sense?
@@CodinginPublic yes I actually started to create dark and light variants for my Icons and it already paid off. I think this is really a weak point in Figma. So many things are thought extremely well of the team, but handling icons was much better in Sketch 👍🏽
Wow 👍🤝✌️🎉 very profound but you made it easy to understand
Great!
Great tutorial - thanks a ton!
Glad you enjoyed it! Thanks for saying something!
Thank you thank you thank you! you help me a lot!
So glad it was a help!
super clear!!!thanx!
You’re welcome!
it worked! thank you so much!!
You’re welcome!
thank you thank you and thank you,finally I get how it works
That’s why I made the video! I couldn’t find anything that explained it well enough for me to understand! Glad it helped you. Thanks for saying something!
Great tutorial thanks! Quick question....what mode are you in in terms of background etc? When I change the background of my design page to black from the right hand panel then the whites in text for example show up as more of a grey color than true white. I'm not seeing any other options for this setting.
Thank you, that's amazing!👏
Glad it was a help!
AHH thank you so much for this!
You’re welcome! Glad it was a help. Thanks for saying something!
Man your explanations are so clear. Haha did you take some public speaking course or something? Great video. Thanks 😁
Thanks so much for the kind words. Glad my explanations are clear! 😊
Thankyou so much chief.
You’re welcome!
Loved the tutorial! I definitely got a better understanding of components & Variants. I kind of hit a wall when I tried dragging the icons into the button. The blue line didn't show up for me, I'm not quite sure what I'm doing wrong there.
Glad you loved the tutorial, Imani! You’ll need to make sure your button is an auto-layout first before dragging in an icon. If it is an auto layout and you still can’t get it to work, you can always drag the icon in using the left-hand sidebar. Let me know if that doesn’t make sense or if you get stuck!
@@CodinginPublic Thank You, I tried again and that worked!
🙌
thank you, this really help me
Wonderful ! Thanks for saying something!
Great tutorial. You forgot to add a link to that full Figma course you mentioned.
Glad you enjoyed it! It’s in the description, called “Figma for Developers”
@@CodinginPublic You really are an outstanding instructor. While I could add some polish, for the most part, this free tutorial is better than both courses I bought and paid for (Udemy). Would encourage you to consider creating material for sale, if that's something you contemplate. Great job here.
@@stormbytes That's very kind! I may consider doing paid courses at some point, but I wouldn't want to do it unless I could really up my quality. Currently, I don't know that I have the capacity to do that, but maybe one day!
Damn centering text automatically 😍
Figma is 🔥
It was really a great video
So glad you enjoyed it!
Awesome!!! Is there a way to connect those hover states and toggles to another button? How would you make a "cart" where you can add items and it will update in the summary?
Hmm…I don't know how to do that in Figma? It might be possible though? Not sure :) Sorry! If it was possible, it'd be in the prototyping settings. You'd hook up add to cart buttons in your design to the cart and wire up a change in the number based on the button you click?
Thank you very much for this video, I was previously doing an outdated method, this is a time saver but I have one question. if you prototype one button to another and used it on one frame instead of connecting two frames, would it work or affect the settings?
So glad it was a big help! Yes, so I'd just hook up the prototypes on the actual components you create and then all their instances should pick that up. Hope that makes sense.
I love this video!!
Great! Glad it was a help!
great tutorial
Glad you found it helpful!
Say I have 3 button sizes and want the icons to adhere to the different icons sizes in the different buttons. What can I do?
amazing tutorial! very helpful.
but quick question. what if i wanted to prototype a hover animation for multiple of those buttons while having the text/icon color change? what would be the most efficient way of going about doing that?
You could just set up different variants and then set up prototype hover effects. Is that what you're asking?
Thank you very much🥹❤️❤️
You’re welcome 😊
I love Figma, I got a well paid job thanks to figma
Awesome!
Great tutorial. Thanks for sharing! How do you delete a state name? Not change but delete from the variant property section? All I'm able to do is change the stacking order of them and/or change the name. I'm all up to date with latest version. Keep'em coming 👍
Glad you enjoyed it! Just make sure you've selected the component (not a variant, but the whole component with the dashed purple border) and right-click the property in the right-hand sidebar. You can delete it from that popup menu.
@@CodinginPublic Thanks, I didn't know that and that will come in handy. But I was referring to state name, not property name. For instance, if I have a button and I have named a state within a property named Type for Hover, then how do I delete the name Hover from the property section? Is deleting the actual component related to the state name the only way?
@@Underhills AH! It will automatically remove itself when no components in the component set have that as the set state. Does that make sense?
@@CodinginPublic Yeah, makes sense. But I actually didn't have any component with that state. Figma seems a bit unstable sometimes.
Weird!
Thank you!!!!
You're welcome!
Thanks for showing us the swap feature, I must say your the first one explaining that in a sensible manner. I think I get it. But the the swap menu shows other components that are on the same Figma page in my button demo, does this mean that this button component set needs to be living in a solo section without anything else on that page in order to just show the icons that are prepared like you showed? Seems like it cause when I use the asset panel to get my button demo component to place in a separate page the same 7 components are available in the swap icon menu. I just wanna have the prepared set of 4 icons there, not those 3 other components.
I think they've pushed an update since my video that allows you to choose how the swap feature works (need to still look into that), but you should be able to place all the icons in a single frame. Just make sure all those icons are individual components. Then when you add an instance of one of those components to your button (or whatever you’re building), swapping will naturally select all the other icons on your board in the swap menu. Hopefully that makes sense.
Such a great tutorial! One thing, how did you fix the colour issue with the icon at the end? where only some of it gets coloured I think due to different amount of vector layers in icon frames?
Glad you enjoyed it! I think I just created variations of the icon components-one dark and one light. Does that make sense?
if anyone can answer - @16:52 , how was he able to simply option drag the icon component into the button component? Mine refuses. I have to detach the button component to add the icon next to the text and create the button component again. Please help!
I Believe you have to command click and drag?
Thank you works now!@@CodinginPublic
Hello I had exactly the same problem, he said "hold down the Option key and drag to create the instance of the component". On Windows that's Alt+drag. It just didn't work. What solved the problem was deleting all that I have done and starting the tutorial from scratch. I remade the buttons and when I came to 16:52 I Alt+dragged the icon component into the button and it magically worked. I don't know if I've missed some step or what, but redoing it worked for me.
I use a Mac and i followed option drag like he said and it didnt work first. I resized the icons and then it magically worked for me too! 😀@@papagooseonline
I'm glad that you got it working too!@@deipty222
thanks very helpful. just want to comment on 2 things. when you create a frame and turn it into auto layout then put text in it, the width and the height have to be set to hug so frame resizes with the text size. other issue that i noticed was with the icons. when i made an instance and dragged it to the button it would lay on top, so i needed to go to the layers tree and drag it into the location where i wanted. this was annoying so if i missing something would appreciate clarification.
Glad it was a help! Yes, so when I typically want to add text to a frame (like for a button), I create the text first and then turn that text frame into an autolayout. I think that automatically makes it set to hug? But either way, yes, you're correct. For layering, you can use the [ and the ] buttons in your keyboard to move things up and down. I think perhaps it's shift + ] or something to move all the way? You can use the command palette and search for "send to front" or something. Does that help?
Thank you for the tutorial. When using Instance Swap Property, the replaced new icon is disorted in a way as if it tries to fill the container of the old icon. Is there a way for the replaced icon to come by maintaining its original size?
You’re welcome! Hmm, if I think I'm understanding you … you could set the same fixed height/width on all the items you’re instance swapping?
In minute 7:16 how are you getting that detach/broken link option? My panel looks like a regular Fill section and the broken link does not appear. Using the shortcut Command B to detach it changes the formating of the button.
It's because I'm using local color styles. I did a video on Figma for developers that shows how to set this up: ruclips.net/video/2liZ3uvO9bs/видео.html
I love Figma, didn’t realize we had to become engineers to build out systems lol 😂
lol engineer all the things!
Really great tutorial, thank you very much, hugely helpful for somebody like me getting to grips with Figma's key concepts. However, I had a small problem. The buttons I made in sync with your video had both colour fills and white fills as is a common convention with primary/secondary button types in UI design. So my white icon set was invisible in many of my buttons. Is there a neat solution or do you just need to change the button colour manually (or produce a duplicate non-white set which would be less than ideal)?
Sorry for my delay here. Since the icons are their own components, I’d just set up a light and dark variant on those components? Then you can change the nested component when needed. Does that make sense?
@@CodinginPublic Thanks again
Ok so the 2022 update made it so that we don't have to create each version of the button - but what about when handing off to development? Is it useful to them to see all the different types laid out visually?
I guess it depends on the dev; personally, being generally comfortable with Figma, I'm more than happy to cycle through the buttons I'd need and create them using the component props. A lot of this depends on the scale of the application, too? I'd recommend just asking the dev what she/he prefers; I'm assuming you'd get different answers per dev and per project.
Apologies, I meant change the icon colour manually :)
Thank you for the video. The point of Boolean is to reduce the number of components (Let's say a button component will now have 10 variants instead of 50). My question is, if the 50 button components were already used in design files by other designers from a shared component library, and the buttons get reduced to 10 using Boolean, any impact this could have on the designers' design files?
Hey, Mastermind! Sorry for my delay here. Hmm…I’m not actually sure? I haven’t run into that scenario (I’ve mostly worked in my own files). I’m assuming everything will update to match? Anyone else have experience here?
Hi, when you want to make an animated prototype how do you use this variants for that purpose?
You should be able to just hook up the components in the prototype and that should carry over to all the instances. Hopefully that helps!
For some reason my button won't expand to accommodate the added icon. I have auto layout fit with the same criteria as yours.
🤔 I’d make sure you have the fit set to hug contents in the right sidebar?
@@CodinginPublic I'm having the same issue. My button is set to hug
If you send me a link to your file on Twitter DM or email, I’m happy to check it out!
@@CodinginPublic sent! thank you so much!!
I’ll respond to you privately, too, but in case others are struggling, I think it’s because you’re trying to move the entire icon component rather than an instance of the component over. So hold down alt (Windows) or opt (macOS) and click-drag the icon over to the button. If it doesn’t let you snap it in there, you can situate it in the button in the sidebar. Sorry I didn’t make that clear in the tut. Let me know if that doesn’t solve your problem!
can you help me, When I try to replace the icon the icon's color will change to the original icon color not follow on button properties. is there any way to fix it?
You’ll need to set up the icons as their own components with two variants (one for each color). Then you can double click into that icon on the button and change it with a toggle or dropdown (depending on how you set it up). Does that make sense?
I have the same color issue with icon, how did you solve that?
After I set up the icons as components, I created a dark and light variant. Then when I created the button component, I selected either the light or dark version of the variant in the button component sidebar. Does that make sense?