New Figma Components 101: Variants and Component Properties (Boolean, Instance Swap, and Text)
Vložit
- čas přidán 5. 08. 2024
- 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 - Jak na to + styl
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!
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!
Awesome video! Finally someone who explains it in a manner that's easy to understand. Congratulations!
Glad it was helpful!
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!
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%
🙌
Watched so many videos and nobody has explained it like you! Thank you.
So glad it was such a help!
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!
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!
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!
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!
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!
This is the best and right to the point explanation of Figma components. Thank you !
You’re welcome! Glad it was such a help!
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! 🤗
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!
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!
Super clear, thanks for this!
Glad it was a help!
I really benefited from this tutorial. It was such a great help. Straight to the point explanation. Thank You
Great! Thanks for saying something!
Thank you so much this really help me understand components better looking forward to other of you videos
You’re welcome!
The best tutorial so far :) Thank you so much!
You're very welcome!
Vraiment parfait ! Très clair. (very clear, perfect) 👏
🙏 So glad it was a help!
Very Informative, helpful and Educational video! Thx for the tutorial man!
Wonderful! Glad it was a help!
Thanks alot man for clear & concise approach.
Helped me alot.🙌🙌
Awesome! Thanks for saying something!
Much much much appreciate this tutorial and effort you put it to make it very concise
So glad it was a help!
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!
Really Beautiful and straight forward video. I learned a lot. Thank you very much🙂
Awesome! Thanks for saying something.
Thank you so much! This is the best explanation I've found!
Glad it was helpful! Thanks for taking the time to say something!
Love your work!
🙏 thanks so much for saying something. Glad it was a help!
This helped a lot! Thank you so much
I'm so glad! Thanks for saying something!
Subscribed just for this video. On point content
Thanks so much!
Thanks for the video, it was super helpful
Glad it helped!
Awesome tutorial as always! Thank you
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! :)
Great Video with superset clearity. Thanks sir
You're welcome! Glad it was a help!
This was sooooo helpful, thank you!
You’re welcome!
Learned a lot!! Thanks for the tutorial 🙂
Glad it was helpful!
Thank you! Very cool tutorial!
Glad you liked it!
Thank you for the informative tutorial. Really helped me💯
Awesome! Thanks for saying something!
Great tutorial! Thank you!
Glad it was helpful!
Nicely explained. Thanks, Man.
Glad it was helpful!
very helpful! i've been struggling with component properties for a while
Glad it helped!
Thanks, a lot. this video helped me to learn varients very well.
Glad it helped!
Thank you saved me a lot of time trying to browse videos for an actual working one
Glad it was a help!
super clear!!!thanx!
You’re welcome!
This was really helpful👏 Very Well explained !
Glad it was helpful!
thank you so much for the clear presentation! great presenter, subscribe!!🔥🤝
You’re welcome! Thanks!!
AHH thank you so much for this!
You’re welcome! Glad it was a help. Thanks for saying something!
Excellent tutorial, thank you. And also thank you for centering that set of components @11:58 :)
Lol I got you 👊
I've seen different videos on components and this is definitely the best
That’s great to hear! So glad it was a help!
Great tutorial - thanks a ton!
Glad you enjoyed it! Thanks for saying something!
finally understand. thank you, great video
You're welcome! Thanks for saying something!
Thank you, that's amazing!👏
Glad it was a help!
it worked! thank you so much!!
You’re welcome!
thank you, this really help me
Wonderful ! Thanks for saying something!
Great video very helpful thanks 🙏
You’re welcome!
Amazing tutorial man!
Glad it helped!
Thank you!!
Excellent video. Highly recommend this. Better than figma official one for sure. Thank you 😊
Awesome! Glad you’ve enjoyed it!
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!
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!
Thank you thank you thank you! you help me a lot!
So glad it was a help!
The best explanation!
Glad it was helpful!
Great video. Very informative
Great! Glad it was a help!
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!
I love this video!!
Great! Glad it was a help!
I found this today ❤❤ it clear my doubt.
Glad it was helpful!
Wow 👍🤝✌️🎉 very profound but you made it easy to understand
Great!
You Help me a Lot Big Love From Algeria
Great! Thanks for saying something!
Thankyou so much chief.
You’re welcome!
It was really a great video
So glad you enjoyed it!
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!!!!
You're welcome!
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!
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 :)
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.
Thank you very much🥹❤️❤️
You’re welcome 😊
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! 😊
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!
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?
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
Glad it was a help!
Hello Chris, I was just watching your tutorial on CZcams 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 👍🏽
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?
You could just set up different variants and then set up prototype hover effects. Is that what you're asking?
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?
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
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: czcams.com/video/2liZ3uvO9bs/video.html
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?
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 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?
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?
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.
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!
works gj
🙌
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?
thx
You’re welcome!
When I try to drag the icon into de component , it does not get added as you show on the video and an alert message appears when i drag the icon: The variant is missing one or more properties, I just has just starting to learning , what am i doing wrong? please your help u.u
Hmm. Is the icon a component? Or just a frame?
@@CodinginPublic it is a component :c
16:41 Can I *create component set* instead of *create multiple components* or the first one will not allow me to chose which icon by being an instance inside an instance?
Edit: well actually the answer is *no* 🤷♀
lol sorry I didn’t get to this yet. But glad you found your answer :)
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.