Figma Tutorial: Components - Swapping and States

In this video we'll show you how to take Components to the next level by swapping instances and managing state.

If you're new to Figma's Components feature, be sure to watch "Components - The Basics" and "Components - Organizing Components" first.

0:00 - Why are components useful
0:30 - How are components used
1:03 - How to swap out instances
2:55 - How to swap between states

#Figma #FigmaDesign #FigmaTutorial #Components #Swapping #States

[Figma]

"In June 2024, we introduced a redesigned Figma—called UI3.
With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content.

[loquatmuncher]

I really appreciate it when you guys talk about tips for efficiency and best practice. Showcasing the feature and providing use cases helps me understand the importance of the tool.

[vikrammahto]

I've a small request, it would be really nice if you can add Windows shortcut keys in your tutorials. For eg. you've just shared shortcut keys for Mac OS users in this tutorial.

Rest everything is awesome. I enjoy watching your tutorials. Sending a virtual hug to your team.

[KevinAllOver]

Currently struggling with swapping different sized instances. I'd love an option to respect constraints so the replaced instance can maintain proportions to the left or right, or stretch to fill the original instance. For example, swapping sponsor/partner logos within a consistent card layout.

[GetNrfd]

How do you enable toggling off primary/secondary instances in your prototype?

[GabeColors]

Pre-requisite videos mentioned at the beginning:

[mattward]

Is there a way to swap instances during playing the prototype? this seems an obvious thing to do but i can't seem to work out how

[davidwalsh]

This is awesome. But take me to the next level. How do I use this in a prototype so that when a user clicks on the icon it goes from default outlined to active filled? I can't find anything in the prototype/interactions menu.

[solidsnake]

Please include the youtube links of the videos you mentioned in the description.

Thanks for sharing 🙋🏻‍♂️.

[sohierlotfy]

it's outdated informations because the new version doesn't have these features anymore

[gilbertumeh]

Thanks for the videos you have been sharing to make the use of my favorite UI design tool more efficiently easy. But I'd want to ask for a tip I think is important. How can I make the component state active in prototype preview mode e.g been able to click on a button and it swaps instance? I don't know if its possible

[GeorgBednorz]

Figma is so awesome! Components are dope! So easy, so powerful! CRAZY

[xooxu]

Is there a way to create instances that have nested features from a master, but can become their own master component?

For example, I'm trying to create some button state assets. I need an asset for the default state, the active state, the hover state, the focus state, and a disabled state. I'd like to be able to use the instances panel to swap between these, and I'd also like for things like the background color, size, and corner options to update whenever I update the default button's master. Is this possible?

[thiago_]

Life made easier! Thanks! Where can I find shortcuts for Windows? I'm trying swapping componentes in drag / drop style but it just won't do it. Tried ctrl + alt, Windows + alt... weird stuff happens but never the intended effect.

[Tijdperkzuid]

so, the problem I have is the image, I made a component lets say review, then I als copy those several times and I can change the text and colors no problem, but the image doesn't seem to work

[radmylakussi]

It is hard for newbie to understand the information when it is not synchronous. Better it would be simple step-by-step guide. Thank you.

[kateaid]

I used the slash naming convention on two objects (button/active, button/off) but the instance menu did not appear. Do the objects need to be a parent and child in order to become instances of the same object? Thank you for any help!

[MelissaLynn]

Can you change the picture in an instance? I tried doing it but the picture in the instance is still there and instead it just added a picture on top of the entire instance

[Underhills]

I don't get it. I have a selected and an unselected state for two checkboxes. Both are different components and both are on the same frame, just like the buttons in this example. However, the component names are grayed out when I try to make a swap interaction on click. It's impossible to choose them.

[tomiwaaina]

Is there no way to swap out instances on click during a prototype?