New Figma Components 101: Variants and Component Properties (Boolean, Instance Swap, and Text)

Today I'll walk you through the two two levels of Figma Components:
1) Variants
2) Component Properties (Boolean, Instance Swap, and Text)
Try Figma: bit.ly/figma-cip
While variants have been around for a while, component properties are new to Figma!
---------------------------------------
📹 Related Videos 📹
- Figma for Web Developers: • Figma for Web Developers
- Figma Card Components: • How to Create a Card C...
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
0:50 Variants (Components Version 1)
11:35 Component Properties (Components Version 2)
12:12 Text Properties
15:16 Boolean Property
19:34 Instance Swap Property
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public

[@pedrosanchez5739]

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. !

[@CodinginPublic]

So glad it was a help!

[@AlexV-wi2wr]

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.

[@CodinginPublic]

Awesome! Glad you enjoyed it!

[@kelikicheeki3767]

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!

[@CodinginPublic]

Wonderful! Thanks so much for saying something!

[@nhadepshouse]

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

[@CodinginPublic]

So glad to hear they've been a help! And even better that you've enjoyed the channel. Thanks for your kind words!

[@michaelmcinerney1425]

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!

[@CodinginPublic]

So glad you enjoyed it!

[@lisatestmann6789]

Super clear, much better that Figma original videos explain the subject. Thanks a lot!

[@CodinginPublic]

So glad it was a help! Thanks for taking the time to say something !

[@CodinginPublic]

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!

[@ryanjohnson8933]

@Xeno Nautili 100%

[@CodinginPublic]

🙌

[@bhavyaluthra6231]

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 ..🥺😌✔

[@CodinginPublic]

So glad it was a help!

[@LordDungeon]

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!!!

[@CodinginPublic]

So glad it helped! Thanks for saying something!

[@oscarsanzsanchez2123]

Awesome video! Finally someone who explains it in a manner that's easy to understand. Congratulations!

[@CodinginPublic]

Glad it was helpful!

[@sprioleau]

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.

[@CodinginPublic]

You're welcome! Thanks for saying something!

[@maaznadeem120]

Watched so many videos and nobody has explained it like you! Thank you.

[@CodinginPublic]

So glad it was such a help!

[@julia_ggg]

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

[@CodinginPublic]

You're so welcome! Thanks for taking the time to say something!

[@black-purple]

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.

[@CodinginPublic]

Thanks for sharing!

[@khaldounal-nuaimi3594]

This is an excellent tutorial that helped me a lot, thanks a ton!

[@CodinginPublic]

Great! Thanks for saying something!

[@EnesKab]

This is the best and right to the point explanation of Figma components. Thank you !

[@CodinginPublic]

You’re welcome! Glad it was such a help!

[@jvillaruel9230]

The best tutorial so far :) Thank you so much!

[@CodinginPublic]

You're very welcome!

[@Jen-hi2tg]

Thank you so much for this tutorial, your explanations and examples are so clear! Really appreciate it

[@CodinginPublic]

You're very welcome! Thanks for taking the time to say something!

[@llemnus]

Super clear, thanks for this!

[@CodinginPublic]

Glad it was a help!

[@alessandroventuri3194]

Love your work!

[@CodinginPublic]

🙏 thanks so much for saying something. Glad it was a help!

[@laxmanpatil81]

Nicely explained. Thanks, Man.

[@CodinginPublic]

Glad it was helpful!

[@yarosonelizabeth53]

Yoooo This was so easy to understand Thank you so much! I’m sending you a virtual hug right now 😭

[@CodinginPublic]

You’re welcome 😊 Right back at ya! 🤗

[@preciouswen9608]

I really benefited from this tutorial. It was such a great help. Straight to the point explanation. Thank You

[@CodinginPublic]

Great! Thanks for saying something!

[@craftysapphire6672]

Really Beautiful and straight forward video. I learned a lot. Thank you very much🙂

[@CodinginPublic]

Awesome! Thanks for saying something.

[@animedrill]

This is pure gold, now I can have some peace. Thank you for sharing.

[@CodinginPublic]

So glad it was a help!

[@marilynyballa809]

Very Informative, helpful and Educational video! Thx for the tutorial man!

[@CodinginPublic]

Wonderful! Glad it was a help!

[@another.designer]

Thanks alot man for clear & concise approach. Helped me alot.🙌🙌

[@CodinginPublic]

Awesome! Thanks for saying something!

[@AmandaSannn]

Great tutorial! Thank you!

[@CodinginPublic]

Glad it was helpful!

[@nfrigus]

Thank you! Very cool tutorial!

[@CodinginPublic]

Glad you liked it!

[@mohammedabdulaziz3658]

Great Video with superset clearity. Thanks sir

[@CodinginPublic]

You're welcome! Glad it was a help!

[@ariellekrebs2421]

Vraiment parfait ! Très clair. (very clear, perfect) 👏

[@CodinginPublic]

🙏 So glad it was a help!

[@karthikeyana35]

Subscribed just for this video. On point content

[@CodinginPublic]

Thanks so much!

[@milimomoonga7758]

Much much much appreciate this tutorial and effort you put it to make it very concise

[@CodinginPublic]

So glad it was a help!

[@_the_one_1]

Awesome tutorial as always! Thank you

[@CodinginPublic]

Glad it was a help!

[@harshadrokade201]

Thanks bro I almost watched all videos but you explained it "smooth as butter" 👍 please make more videos on figma

[@CodinginPublic]

🙏That's very kind. Hopefully some more Figma stuff soon! :)

[@ucheodozie9836]

Thank you so much this really help me understand components better looking forward to other of you videos

[@CodinginPublic]

You’re welcome!

[@thenameisgolden]

This helped a lot! Thank you so much

[@CodinginPublic]

I'm so glad! Thanks for saying something!

[@geoffreykaranja6125]

Thank you for the informative tutorial. Really helped me💯

[@CodinginPublic]

Awesome! Thanks for saying something!

[@rastamamka]

Thank you so much! This is the best explanation I've found!

[@CodinginPublic]

Glad it was helpful! Thanks for taking the time to say something!

[@imeuboh7739]

Thanks for the video, it was super helpful

[@CodinginPublic]

Glad it helped!

[@Rinacks]

very helpful! i've been struggling with component properties for a while

[@CodinginPublic]

Glad it helped!

[@AinaKanatkyzy]

This was sooooo helpful, thank you!

[@CodinginPublic]

You’re welcome!

[@mariammariamidze9251]

super clear!!!thanx!

[@CodinginPublic]

You’re welcome!

[@travis_saldanha]

Amazing tutorial man!

[@CodinginPublic]

Glad it helped!

[@iram694]

This was really helpful👏 Very Well explained !

[@CodinginPublic]

Glad it was helpful!

[@lydiab6161]

Oh my, thank God for this video. Finally I understand! Thanks so much. Subscribed :)

[@CodinginPublic]

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!

[@literallyshane4306]

finally understand. thank you, great video

[@CodinginPublic]

You're welcome! Thanks for saying something!

[@adnanktr3030]

Thanks, a lot. this video helped me to learn varients very well.

[@CodinginPublic]

Glad it helped!

[@goodworkers4christ]

it worked! thank you so much!!

[@CodinginPublic]

You’re welcome!

[@oZenakos]

Great video very helpful thanks 🙏

[@CodinginPublic]

You’re welcome!

[@mobileleggings]

Thank you saved me a lot of time trying to browse videos for an actual working one

[@CodinginPublic]

Glad it was a help!

[@ameya822]

AHH thank you so much for this!

[@CodinginPublic]

You’re welcome! Glad it was a help. Thanks for saying something!

[@OmarRam]

The best explanation!

[@CodinginPublic]

Glad it was helpful!

[@AntoniGawlikowski]

Great tutorial - thanks a ton!

[@CodinginPublic]

Glad you enjoyed it! Thanks for saying something!

[@user-ig3we8ou5v]

Thank you, that's amazing!👏

[@CodinginPublic]

Glad it was a help!

[@saintpumpkin]

I've seen different videos on components and this is definitely the best

[@CodinginPublic]

That’s great to hear! So glad it was a help!

[@badcatdesign]

Excellent tutorial, thank you. And also thank you for centering that set of components @11:58 :)

[@CodinginPublic]

Lol I got you 👊

[@NNiranjan1]

Great video. Very informative

[@CodinginPublic]

Great! Glad it was a help!

[@Xamy-]

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)

[@CodinginPublic]

Thanks so much! Kevin-like is a high compliment! That’s very kind. Thanks for the sub!

[@heinzart9977]

thank you, this really help me

[@CodinginPublic]

Wonderful ! Thanks for saying something!

[@kevinpaul3616]

Excellent video. Highly recommend this. Better than figma official one for sure. Thank you 😊

[@CodinginPublic]

Awesome! Glad you’ve enjoyed it!

[@vitalinastorchak8378]

thank you so much for the clear presentation! great presenter, subscribe!!🔥🤝

[@CodinginPublic]

You’re welcome! Thanks!!

[@pandubudikusuma5693]

Thank you thank you thank you! you help me a lot!

[@CodinginPublic]

So glad it was a help!

[@karandesai]

Thank you!!

[@aqeela.fathima12]

You teach so well, one of the best channels here to learn, thank you v v much! Wish I could be your student 😭

[@CodinginPublic]

So glad you’re enjoying the channel!

[@liz.q]

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 :)

[@CodinginPublic]

Wonderful! So glad it was a help. Thanks for taking the time to say something!

[@raoufbn2619]

You Help me a Lot Big Love From Algeria

[@CodinginPublic]

Great! Thanks for saying something!

[@AdarshYouTube]

Thankyou so much chief.

[@CodinginPublic]

You’re welcome!

[@AlisterDiaz]

I love this video!!

[@CodinginPublic]

Great! Glad it was a help!

[@robertbecaria7626]

Wow 👍🤝✌️🎉 very profound but you made it easy to understand

[@CodinginPublic]

Great!

[@user-uj7qb6uz6m]

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.

[@arifhossain8753]

It was really a great video

[@CodinginPublic]

So glad you enjoyed it!

[@tosinajayi7510]

Thank you!!!!

[@CodinginPublic]

You're welcome!

[@user-uh9st1xz9r]

Thank you very much🥹❤️❤️

[@CodinginPublic]

You’re welcome 😊

[@afrooz93]

thank you thank you and thank you,finally I get how it works

[@CodinginPublic]

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!

[@AzonDesigns]

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?

[@CodinginPublic]

Glad you enjoyed it! I think I just created variations of the icon components-one dark and one light. Does that make sense?

[@neontuts5637]

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.

[@CodinginPublic]

Thanks so much, Neon! Glad to know you enjoyed it. I'm sure there's some community plugin that does that?

[@neontuts5637]

@@CodinginPublic Wow this will be a great topic for your next video - How to create and publish a figma community plugin or UI Kit?

[@CodinginPublic]

Well, I’ve never done it 😊

[@neontuts5637]

@@CodinginPublic Oh! No worries save the idea for a future video.

[@Solika23]

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?

[@CodinginPublic]

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?

[@YenzSchmidt]

Hello Chris, I was just watching your tutorial on KZbin 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

[@CodinginPublic]

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?

[@YenzSchmidt]

@@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 👍🏽

[@MrIkesimba]

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.

[@CodinginPublic]

So glad it was a help! Bummed to hear they’ve already changed the inspector again :)

[@nyashachiroro2531]

Man your explanations are so clear. Haha did you take some public speaking course or something? Great video. Thanks 😁

[@CodinginPublic]

Thanks so much for the kind words. Glad my explanations are clear! 😊

[@ajakayejoshua9886]

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?

[@CodinginPublic]

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.

[@tori2040]

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.

[@CodinginPublic]

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?

[@SheisIGA]

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.

[@CodinginPublic]

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!

[@SheisIGA]

@@CodinginPublic Thank You, I tried again and that worked!

[@CodinginPublic]

🙌

[@salad5701]

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?

[@CodinginPublic]

You could just set up different variants and then set up prototype hover effects. Is that what you're asking?

[@grahamnorton9702]

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)?

[@CodinginPublic]

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?

[@grahamnorton9702]

@@CodinginPublic Thanks again

[@Underhills]

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.

[@CodinginPublic]

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.

[@emirece1873]

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?

[@CodinginPublic]

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?

[@renise27]

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.

[@CodinginPublic]

It's because I'm using local color styles. I did a video on Figma for developers that shows how to set this up: kzbin.info/www/bejne/aJ3Mi2arq7RsmNU

[@mayaracarvalho4861]

AMAZING

[@CodinginPublic]

Glad it was a help!

[@etc115]

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?

[@stormstudio6126]

Hi, when you want to make an animated prototype how do you use this variants for that purpose?

[@CodinginPublic]

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!

[@melissaviesca2299]

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?

[@CodinginPublic]

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.

[@Underhills]

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 👍

[@CodinginPublic]

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.

[@Underhills]

@@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?

[@CodinginPublic]

@@Underhills AH! It will automatically remove itself when no components in the component set have that as the set state. Does that make sense?

[@Underhills]

@@CodinginPublic Yeah, makes sense. But I actually didn't have any component with that state. Figma seems a bit unstable sometimes.

[@CodinginPublic]

Weird!

[@stormbytes]

Great tutorial. You forgot to add a link to that full Figma course you mentioned.

[@CodinginPublic]

Glad you enjoyed it! It’s in the description, called “Figma for Developers”

[@stormbytes]

@@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.

[@CodinginPublic]

@@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!

[@valterfriafilho2150]

I have the same color issue with icon, how did you solve that?

[@CodinginPublic]

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?

[@arieismanto97]

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?

[@CodinginPublic]

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?

[@davidho1258]

Damn centering text automatically 😍

[@CodinginPublic]

Figma is 🔥

[@yb1829]

thx

[@CodinginPublic]

You’re welcome!

[@MRGAM3BO1]

works gj

[@CodinginPublic]

🙌

[@nisanur1787]

Hi i loved the video, it was very helpful. However i couldn’t do the instance swap. The arrow icon is not visible 20:07. The only thing that i see when te icons are selected is the ‘Show icon’ (from the Boolean). Can you help me? I tried many things like adding instance swap throughout the properties pannel but it didn’t show up when the icons are selected.

[@CodinginPublic]

Ah, sorry you’re having trouble. Are the icons components? If not, they won’t be able to be added as instance swaps.

[@nisanur1787]

@@CodinginPublic Thanks! Indeed the icons weren't components.

[@CodinginPublic]

Glad it worked!