wearehwa.blogg.se

Component sets can only contain components.

Note: Figma places variants in a single container called a component set. Click to edit the property and give it a more descriptive name.Hover over the property so a grey box appears around it.View the current properties in the Variants section in the right sidebar.You'll need to rename those properties to something more descriptive. Figma will add all components to a single component set.Īs part of the conversion process, Figma will create generic properties and add any attributes you added to the component's name as values.Īs Figma doesn't know the names of the properties, it will name the first property Variant, then number them sequentially: Property 2, then Property 3, and so on.In the right sidebar, click the Combine as Variants button.Select the components you want to combine.You can adjust the fill and stroke properties of the component set to better suit your brand or design system. Tip! By default, component sets have a dashed-purple stroke and no fill. Learn how to name and organize components → This makes it easier to navigate your library, or find and swap related components. Each / in a component's name will create another level of hierarchy.

Rename your componentsįigma uses the slash naming system to organize components in the Assets panel and Instance menu. You don’t need to have a component for every possible combination of properties and values. For example: the state property could have default, hover, pressed, and disabled values.Īll variants within the component set should use the same properties and values, but each variant needs to be a unique combination of them.

Values are the different options available for each property.For example: the properties of a button component could be the size, state, or color. Variable properties are the variable aspects of our component.You can even map your properties and values to code components in your design system. You can add as many properties and values as you need, and customize them to suit your design system. Variant properties are a type of component property specific to variants and component sets. Variant properties and their values allow you to define the attributes of your variants. Note: We don't recommend using variants to group different icons.If you have different sizes of the same icon, then you could combine these as variants instead.