Adjust multiple properties in a variant set at the same time

Hiya new to Figma. Just wondering if say I have created a component set/variants and I want to adjust lets say the width of all the components within the set is there an easy way to do it? My understanding is that all variations within the component set can’t be an instance of it. I was just going to shift click all that I wanted to change but wondering if theres an easier way.

1 Like

Select a component set and press Enter/Return.

1 Like

While it is possible to select all the variations and manually edit their width, it is better practice to follow atomic design principles and use nested components. By nesting components, you only need to edit the width of one component to update all of its instances.

1 Like

Hi @Michael_Persson Thanks! That was really helpful :slight_smile:
Im still learning the differences between components/component sets/instances. The icon with the multi diamond and the icon with one filled diamond I get confused with the difference. I thought the multi diamond icon was for variant sets but in your tutorial you have shown it used for the ‘atom’ element.

Hi Eva,

To be clear, they are both components. An atom is not a different type of component, it is just a mental model for how to think about the smallest building block in a layout. Read more here: Atomic Design | Brad Frost

As for the icons, a single diamond is just an instance of a component. A multi-diamond represents the base component, from which all instances derive their properties, and can have multiple variants.

1 Like