Figma tutorial: Component properties

Подписаться 543 тыс.

Просмотров 463 тыс.

50% 1

Figma is free to use. Sign up here: bit.ly/3msp0OV
With component properties, you can define which parts of a component can change. And instead of creating separate variants, you can use component properties to reduce the number of components needed. This takes the guesswork out of designing for anyone using these components and they can quickly make adjustments as Figma keeps component property controls in one place.
Play with our component properties community file:
bit.ly/3llmSKh
Learn more about component properties on our Help Center:
Learn more about interactive components:
bit.ly/3mhWRx4
Learn more about variants:
bit.ly/3Ow9gbT
Check out our other component properties video:
bit.ly/3n6WPaL
00:00 - Introduction
01:20 - Types of properties
01:29 - Overview
01:40 - Previous content
01:46 - Community file
01:51 - Button Component
02:31 - Instance swap property
03:38 - Text property
04:09 - Boolean property
05:24 - Consume component properties
05:53 - Variant property
08:52 - E-commerce store card
09:25 - Add component properties
12:04 - Set up the left icon
13:01 - Set up the right icon
14:18 - Set up the text layer
16:08 - Clean up
17:08 - Using the new button
17:49 - Wrap up
____________________________________________________
Find us on ⬇️
Twitter: / figmadesign
Instagram: / figma
LinkedIn: / figma
____________________________________________________
Music credit:
Those Days When We Were Happy by Babasmas
/ babasmasmoosic
Creative Commons - Attribution-ShareAlike 3.0 Unported - CC BY-SA 3.0
Free Download / Stream: bit.ly/3Kk5cZB
Music promoted by Audio Library • Those Days When We Wer...
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone

Наука

Опубликовано:

28 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 205

@shibambiswas415 Год назад

Finally an official videos on Component properties. It was bit confusing at first. But now I am feeling much comfortable. Thanks 😊

@tinababaian8934 Год назад

@elmotareal Год назад

im still at confusing :'(

@shibambiswas415 Год назад

@@elmotareal What's wrong Ayyash?

@baraka99 Год назад

She has the sweetest voice. Love hearing her talk through this informative video.

@cliffy00 Год назад

Very easy to understand. Exactly what I needed, great job :)

@SkYHawK2600 Год назад

I really loved component properties, but there wasn't many tutorials when it first released, there was only a figma file explaining. I had to figure out by myself and after that, I FCKING LOVE IT! I couldn't believe how we were creating sooooo many variations. It was a must all alone. Figma is literally the leader of design industry, other apps still needs many years to catch up. Only thing I wish are regional pricing and improvements of photo editing (and maybe more options for prototype). Like small addon or something like that would save us opening photoshop for editing pictures. You can't always find the perfect picture for your design, sometimes you have to make it.

@ASPnovosibirsk Год назад

I wonder if Sketch developers take long breaks to self reflect after each one of these incredible Figma updates

@OnceABustAlwaysABust Год назад

Is Sketch still alive?

@CPTZK11 Год назад

hahah, Sketch is like an ancient dinosaur now

@aPhiluppus Год назад

Sketch actually has had component/symbol properties for years (and has killed it). I made icons with changeable and toggleable icons many years ago in Sketch. They just never really nailed down the auto layout part, which is the huuuuuge win for Figma here.

@WealthyThomas Год назад

I had not known about a position called sketch developer. The internet is creating a variety of positions I have not heard of.

@Ibk225 Год назад

@@WealthyThomas😂😂

@debaseesh Год назад

A very good tutorial. But PLEASE get rid of that awful background music.

@saribgraphy4676 Год назад

Very well explained in a simple way. Thanks alot.

@lindaduong289 Год назад

This is by far the best video. This is how tutorials should be done! I love the intro which summarizes what we’ll be learning/requirements we’ll cover, easy to find sections, displaying which buttons you’re using on the screen (instead of the ones that disappear instantly).

8 месяцев назад

Exactly! All that ego filled mumbo jumbo 45 minutes long videos are disaster!

@anyalashenko176 Год назад

Amazing and well explained video! The thing that's troubling me now is how to swap efficiently to all the new properties components in alllll the design files which use currently the regular components variants...it wasn't really explained in the video

@chauhannikunj2531 Год назад

Mid blowing.. these reduce our time aslo manage our file size.. super features by figma... Simply loving it ☺️

@TheWebCoder 3 месяца назад

These tutorials are perfect. Thank you for producing them.

@alexfoxleigh9443 Год назад

Ah I finally understand how to use these! Thank you so much. I cannot wait until you have styling properties too, being able to set variable colours in particular would be incredible useful.

@lilmamaxyungpapa Год назад

FAX

@chinaadesignagency Год назад

This has been so delightful to watch. Thanks a lot Figma, you're awesome✨

@lucpotage Год назад

I did not spend the time to discover the new Components properties and now I understand everything. Thanks!

@_felicia Год назад

I love this!! Such a nice addition to components.

@niels6542 Год назад

This is a great tutorial with real use cases and a very foolproof explanation. Just the right amount of detail.. well done! --> The pace of the background music did get me into a trance sometimes, so i had to scroll back a few times when I got distracted. But this could be all on me :) Keep 'm coming!

@omurozgur5046 Год назад

You are right! That music is not a good choice.

@benjaminrehmie8427 Год назад

Top stuff fig team, its been a little difficult getting my head around it but you have answered many questions...cheers

@melissaviesca2299 Год назад

Amazing tutorial! Have to watch it a couple more times for it to sink it, but it does the trick! Thanks!

@vedantaz365 11 месяцев назад

This is exactly , how should be a tutorial , I loved it ❤

@abhinavrv0092 Год назад

What a great video, Clarified each and every doubt on component properties. You guys are awsome❤❤❤❤

@lfgraf Год назад

This was very needed!! Thanks, Figma!

@hannahschrupp7248 Год назад

OMG THANK YOU for explaining how to use this on an already created component set... I was worried I would have to figure this out on my own...

@NyuvelUX 7 месяцев назад

This video has been very helpful to me. I used to create sooo many variants 🤣 Knowing how to handle properties makes it a lot easier

@glendanascimento1853 Год назад

Dude, this is the only video that works. Thanks for posting!

@petergunold9962 Год назад

Great video. Helped me a lot do understand and use properties, what makes my work so much easier

@vagarysoulkothari1694 Год назад

clarity , clarity 😀 end of confusions...thanks 🤟🏻

@MoritzFischer 4 месяца назад

Very useful video as always! Thank you so much!

@watchingutubeinpeace 8 месяцев назад

What would be useful is actually using the same example of the button to demonstrate how component properties differ from variant properties - less context switching and users can actually see how one thing (in this case, a button) can have both component and variant properties.

@ericfonseca4577 Год назад

This is awesome! Are there any plans to add a color/text style property?

@ytrpaz Год назад

Thank you figma... awesomeness is the greatness of figma😊

@ultramouse Год назад

thanks for making an official video. I finally feel like I really understand properties now.

@Figma Год назад

Glad it was helpful!

@josephgardner1310 Год назад

This is great! Will it be possible to add a Fill property? Not sure if that makes sense but I'd love to have one component and easily swap the brand style (fill color, text color).

@lealfj Год назад

Great explanation! One question though.. at the beginning of the process you created a copy of the variants in our design system so we don't mess it up but, how do we replace the existing one with the copy once we have finished implementing the changes? Would deleting the original one be enough (as they have the same names?)?

@thangtastic Год назад

This is very convenient for the designer. But when we hide everything, how will the developers see that there are other variations with either properties? Personally, I clone instances and show all of them anyway. How do you solve this issue?

@bradmacdonald6591 5 месяцев назад

I think the component playground in Dev Mode addresses this concern.

@billiekun1394 Год назад

Do you create the icons as variants or different components with same name and slash before?? Because with the first way, i'm not able to swap between icons when i set them as a swap instance... To change the icon i must select it, it won't let me change it just selecting the button...

@incyphe Год назад

4:40 I'm in love with how she says "false"

@medi7573 Год назад

I'm new to Figma and find it easy to understand and use. best experience. Question please, which design system is being followed/used for creating these components in this video and on the Figma website?

@deeteekay6859 Год назад

This is awesome!

@mustafa_ahmed1 Год назад

THAT IS A REALLY AWESOME VIDEO!

@tehoko Год назад

This feature is wonderful, though it's missing one crucial thing to make it useful for design systems. The properties (and variants) of children should be controllable by parents. As it is now, you have to dig deep into the tree of nested components to control variants - it would be way better to have all the controls surfaced to the parent component instead. This was suggested on Figma forums around a year ago, it would be great to finally have it supported natively.

@browsing4307 Год назад

This! I wish you could wire up and access some child component properties from the parent.

@Figma Год назад

You might like an upcoming feature for Component Properties called "Bubbled Props", as it does exactly that! Jacob Miller talks more about it in a recent Office Hours: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hobK6JqADio.html

@browsing4307 Год назад

@@Figma You guys are beyond awesome! Figma is shaping up to be my favorite tool. Thanks for listening to your community!

@tehoko Год назад

@@Figma This is great news, thank you! For anyone interested, the timestamp in that video is 46:08.

@varcxxdesign179 Год назад

@@browsing4307 I concur, Figma just keeps getting better and better. What an amazing team! What an amazing tool!

@ludwigvillalba1886 Год назад

Perfect voice for such videos!

@actualmastermind Год назад

What happens to designers' components and instances properties when a design system is published with a reduced number of components set due to utilizing Boolean feature?

@SayidMoghadam Год назад

Awesome figma, love you

@ionrus1355 Год назад

Figma is just amazing!

@klhmia Год назад

I'm following a guide from a few months ago with I can't use because the UI updated, so I find this newer guide which also has a different UI. Very frustrating when UIs are inconsistent or rapidly change.

@AnshMehraa Год назад

Simply epic.

@mytrung Год назад

My only issue with the buttton left and button right properties is I currently have different padding on the left and right to force centering. Any way to circumnavigate that?

@hahaha-rd6tp Год назад

Thank you

@DanielTateNZ 11 месяцев назад

It doesn't say in the tutorial but your icon must be a component instance to do this.

@brunochidozie Год назад

I'm struggling with the instance swap property. I have all the icons I'm using for this project as variants of an icon component so when I apply the instance swap property, It just selects the icon component without giving me an option of selecting a default icon. Could it just be a problem with the way I organized the icons?

@steadynow Год назад

I'm a bit unclear on how the component properties retained/inherited the prototype settings since those variants were removed and deleted from the component set.

@ChristianWS. Год назад

I do wish you could manipulate nested Component Properties on the parent component, would make things soooooo much easier

@daniellepacheco8150 Год назад

Does this feature set eliminate the need for a base component?

@pablizoful 3 месяца назад

Love it.

@dungmh Год назад

I love Figma!

@svetvn Год назад

thank you

@YuliiaShevel 9 месяцев назад

In the Example: Message List: "Message" component, is it important to create a separate text style for "Typing..." in blue as in the case of "Subline" in color gray? Does it matter since we will not write anything there? Thanks :)

@ajayji1009 Год назад

It's good but yes it was confusing. The only thing, in the file shown with the previous variants...a user can see the number of variants :) One thing, if I have a variant of size (default and large), how will I manage that.

@weezyf775 Год назад

8:40 what's the deal with Figma not allowing you to paste to replace images like you're doing here. It makes you take the long way of importing a file from your computer. But then you can also use certain plugins, like unspalshed to drop an image in. Is there a simple way to just use an image you have within figma?

@jetmartin9501 11 месяцев назад

Nice video....@14:30 you opted to create the text properties (boolean and text change) from the component set rather than from the Text layer (i.e., your explanation was....."this method is useful if you want to apply existing properties to a new layer or object"). Can you expound on that a bit more? What existing properties are we trying to apply here? Maybe some more discussion of the downsides of doing it the other way or the advantages of taking the approach you took would help clarify....especially given that you're chosing to do something different then what you had done for other properties...Why is the text stuff special and different enough to warrant a completely different approach. This part of the video REALLY begs for a more detailed explanation. Thoughts?

@user-do3us3hu4y 7 месяцев назад

I don't see the option to create a component property when I have the checkmark selected. (2:53 in video) In my right side bar I have Parent component > sinple button, then layer. the Checkmark item doesn't show up

@JoshuaArco Год назад

This video is amazing, but the music is so bad I have to mute it and try to interpret the captions... Please do not have such ear piercing music next time. This is a informative tutorial, much better to make it easy to watch without music, than to try to add music only to make it unwatchable.

@mhmmdinsank 10 месяцев назад

Amazing

@mortezazafary113 Год назад

wonderful

@tingtingcheng4917 Год назад

Is there an efficient way to reduce the current variants within a design system? A lot of variants are used in different design files, if I were to remove them or modify, I'd have to go through each and every design and manually update...

@anyalashenko176 Год назад

Great question, waiting for an answer too

@ju.ice-der-boi Год назад

The only downer of this feature is that you can't change paddings accordingly. Usually (if we take the button example) you don't have the same paddings with an icons, as you have without them. Just removing an icon doesn't really help for that example. Good feature, but sometimes it makes things look much simpler than they actually are. Any solution?

@gergelykovacs8625 Год назад

Yup, this is my gripe as well. Looks good on paper, but if your design system is not this cut-and-paste simple system, this new method will enjoy very limited use.

@ju.ice-der-boi Год назад

@@gergelykovacs8625 well I must say I use it on a daily. It limits the designer for sure, but now I‘m not even sure if that‘s bad tbh.

@nguyenvuongliving 2 месяца назад

I wonder there are different paddings based on icons and text. When turning the icon on and off for a button including text and icon, how can the padding change too? For example, (text+icon) padding will be (24 | 16), (text only) padding will be (24 | 24)? Thank you guys

@vBAAM Год назад

I don't know what I'm doing wrong. When I select my text layer, it only gives me an option to create a Boolean property. Why don't I have the option to create a text property?

@bradmacdonald6591 5 месяцев назад

3:45 - The Content section is now contained in the Text property panel

@Golrokh.Sajjadi 2 месяца назад

I have a query. I have 200 frames, each depicting an animal and its name. Now, I aim to utilize them and trigger an action where hovering changes the frame's border color, or clicking on the frame navigates to the respective animal's page. How can I achieve this with swap properties or variables to minimize excessive components and avoid multiple computations for 200 animals each time? Thanks

@vr2766 Год назад

How do you organise your icons? They are all seperate components, and not variants of the same component?

@glitchedmac5969 Год назад

I've followed the instructions here and I do not have the true/false toggles. I get a setting icon and have to go to a menu to change that value.

@tower1990 Год назад

love your voice

@jasminavajs1540 Год назад

Thank´s ;)

@mbrmorshad2528 Год назад

Hey figma, thanks for keep creating helpful video. Can you please help us to show how much way we can share the component library and how to remove it? And how can i create a basic style guide/DS and use it for all of my internal work. It should be for unpaind version. Coz as you know very wll there are a lost's of unpaid figma user who needs your support.

@aydemironur35 Год назад

You can't share library between files with free account. But you can copy/paste them between files if you want

@cortneyreber Год назад

I'm loving these improvements to Figma! However, I'm struggling with the instance swap property for icons when applied to variable interaction states. In my case, the icon color/alpha needs to change for different states - hover, focus, pressed, and on click. I'm trying to utilize this instance swap property to make it much easier than my previous approach. However the icon color of whatever the first variant state is gets passed forward to other states instead of displaying the new status color. I've been following a "trick" suggested by someone online to nest icons within a color-fix frame, nested within another frame. This has worked but it's cumbersome to accurately select the icon layer when needing to swap out icons. I was hoping this instance swap property feature would help solve my issue, but it hasn't. Bummer. I should probably add that my icons are SVGs, not font icons.

@cortneyreber Год назад

Also, I've come to learn that the instance swap property is only available so deep within a component. I'm not able to apply this property to the nested nested icon layer.

@Figma Год назад

Hi Cortney, sorry for the frustration. It's a bit hard for us to diagnose the issues without file access. Can you submit a bug file so the engineering team can look into it more? Here's how you can submit a bug report: help.figma.com/hc/en-us/articles/360041468234-Submit-a-bug-report

@Figma Год назад

Also, there is an upcoming feature for Component Properties called "Bubble Properties", which will allow you to control the nested properties from the parent component directly. You can check out the Office Hours livestream to learn more: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hobK6JqADio.html

@TiagoImme Год назад

@@Figma hey, I'm facing the same problem that Cortney. Basically, whats happens is that when we set an icon as a swap property, and then we change the color of the icon, when we swap the icon i t doesn't mantain the color. What was my test: 1. in my icon lib., the icons are grey; 2. in my component, I setted the icon as green, than make it a swap instance; 3. in an instance of a component, I changed the icon with the swap property, and the new icon goes gray. This limits a lot the usage of the swap property. Hope Figma fix this soon, because is a big limitation of the swap property (today I can't use the swap in the icons of my DS, for example). Even thought, component propoerties was a great feature, thanks for that!

@thegospel9855 Год назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hobK6JqADio.html Check this out! It's addressed in this Office Hours video

@KimPieWYJ 3 месяца назад

I really need help... The boolean function is not visible in my figma. How to enable it, i've searched for it everywhere...

@brandywalters2271 7 месяцев назад

What is the "option" key for Windows? I tried ALT, but CTRL+ALT+K opens an app on my computer.

@leomega Год назад

anybody has a link to download the Whyte font?

@turboklaus Год назад

Love the component properties, but I'm having the following problem: My component contains an auto-layout frame with two elements (text and icon). When I hide both elements using component properties, the auto-layout frame keeps its size (instead of disappearing as it is empty). Is there any chance you're going to solve this?

@Figma Год назад

Hi Laurin, thanks for reporting that bug! This is an auto layout bug and we're working on it now.

@turboklaus Год назад

@@Figma when can we roughly expect the fix for this?

@OnceABustAlwaysABust Год назад

17:20 this is a bad example of properties. The original component set was bloated but clear. After the cleanup it has become possible to create a button with left & right icons, and no text. This should not be allowed

@ajgaming7167 Год назад

Any chance you can make an official video on how to make a notification component with variants, been searching for weeks but none are definitive. Basically how to go about it the right way like, your websites's notification system for instance

@SEIMYUNGVACTRONCOLTD Год назад

How about when you have different button sizes?

@asyncuz Год назад

Figma SUPER ever 😍😍.

@CoryMckinnonHandle Год назад

I am still confused by properties, when and where to use them... it doesn't map easily to my thinking of CSS or even variables (in any programming language)...

@ladaki_ Год назад

I don't understand. I keep getting an error message "not used within component". Is there something specific I should be doing when creating the object, because I've been trying to do this for an hour and I'm stuck on the first step.

@rainalim7978 Год назад

same here

@rainalim7978 Год назад

Hi Figma community, any suggestion??

@AdsonCicilioti Год назад

I couldn't can make button auto resize on text change or when is icon hided ... How to component wrap auto resize?

@AgataKrolTrefl Год назад

You need to put text in a frame with auto layout. In this case, button will be behaving as like you wish.

@kaechm Год назад

I love you figma

@michaelschultze3595 Год назад

It is actually very comfortable. But, I stick with my many variants (like 96 buttons), because I have variants that need 3 icon sizes. The buttons has different colors and shapes and states. All this does not work here so far. And by the way, have a look to the comments on the playground file ;-)

@karenrose2504 Год назад

the same situation :( Did you find a solution?

@srinivas_gaddam Год назад

Very Easy to understand but background music is so sad hear.

@ReductioAdAbsurdum1 Год назад

13:58 This is confusing. If you set a new Property for Icon Right, why would the corresponding Boolean Property titled Has RIGHT Icon need to be set to FALSE? I understand setting it to FALSE if the Property name were still Icon Left, but the icon IS on the right in the Icon Right property, so why set it to FALSE?

@verohimself Год назад

Meanwhile, Adobe XD still doesn't have vertical text alignment ;) Great job Figma team.

@Hamedu Месяц назад

Rally weird, i created a component, how to define an instance swap property and use it? In your video the element is there.

@robertquillen5675 10 месяцев назад

The file structure in this video is extremely confusing. There are 4-5 folders named icons, some with only one icon in them. There is a reason why @2:31 is the most replayed. I've tried for 4 hours and cannot make sense of this.

@ericlampius3729 Год назад

It's ctrl+alt+K to make a variant, there is no "option" on WIndows. Also, I've tried this a dozen times in both the desktop application and the web application on Windows/Chrome and I do not see the same UI shown here. Are you checking these tutorials on both Mac and PC?

@Figma Год назад

Hi Eric, thanks for the catching the mistake! We'll make sure to use the right shortcuts in our next tutorial. The tutorials are applicable for both Mac and PC, which specific UI are you referring to?

@dpapez2 Год назад

When you are swapping the components .. do they need to be of the same size or can the component auto-resize based on the size of component you are switching with?

@danielwatson6529 Год назад

text was easy i didnt have any of the options to do this with the icon. i think the simple button you started was too complicated for me 😅 i did a rectangle and text and tried my own icon

@amyjeanprentice Год назад

Super helpful information, but please re-visit your choice of backing track 🙉

@namenl2205 Год назад

I'm so glad I persued another path in my career after working as a UX/ Product designer since 2008 till 2020. To me most product designers have no clue how to design these days, they just edit components and drag & drop.