What is the best workflow of creating components?

Can you post screenshots, because if all you have is a component without any variants and choose to create one, all that should happen is that a variant is created for you based on the original component. No size should be affected.

Copy/Pasting into a component set sounds tedious. Either I create all variations before creating a component set

Or I create individual components and later join them as variants

This way I find it easier to name them so they get the correct property values.

When I say I click “variant plus icon” I mean that I need a second variant, fo example to make a hover effect for a button. When another variant is created the whole component becomes bigger because of the copy of the original variant below. When this component is already in Auto layout everything is shifting. In the screenshots below you can see before and after I create variants inside of the main design. Thats why I had to move the button outside of the design and copy/paste it back again when all variants are done.

The purple dashed line is the border that contains all the variants of a component set. All components within a component set are called variants, because they are all one and the same component. That’s what happens when you add variants to a component - a new component is created and if there aren’t already any variants the component will become a component set that you’ll can identify by the purple dashed border. Therefore you don’t want to use the component set in your design, what you want is to use an instance of a component variant.
Adding interactions within the component set is how you create interactive components, which is what you want to do hover states for your button.
Here’s a tutorial on what variants are and how to use them:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.