Figma Tutorial: Variants

as you create individual components or develop your company's design system you'll find needs for similar but different components when designing a form you'll use components for input fields and buttons maybe even a radio button or a checkbox input fields could accept only text or be a drop down menu or date picker they could have a blue border stroke when focused that turns red when a value is invalid check boxes could be unchecked checked or mixed each of the properties and attributes we use to style and describe our components are called properties a component set is a collection of components called variants that all share their properties but have different combinations of values for those properties component sets can be one-dimensional with only a single property with several values like in this example with the primary button component set that contains uniquely styled standard hover pressed and disabled variants component sets can also be multi-dimensional with multiple properties each with multiple values like if we had a collection of secondary buttons with the same property combinations as the primary button the number of buttons can balloon quickly if each button has an option with no icon when used on tablets or mobile we may also need medium or small versions of our button we can instantly double our components by adding dark mode without variants finding the exact button you need can be a pain all of these buttons are different but we can also think of them as parts of a single hole a component set and instead of needing to search through dozens of buttons we can just find a single button that contains all possible combinations the way of structuring components also maps more closely to how they're implemented in code if you already have a system of components named using the slash naming convention we can click and drag to select all the components and click merge as variants in the properties panel to instantly convert them into a single component set just rename the labels of the various properties and you're good to go if you belong to a professional team or a figma organization you can also publish your component set to the team library this can dramatically reduce the number of components in the assets panel and make it easier for you and your team to find the right component faster using a component set is as simple as creating an instance of one of the variants and customizing the values for each of the properties from the right sidebar you can create component sets from scratch or merge existing components to convert them into a single component set if you don't yet have a robust system of components to convert don't worry we'll take you through the mechanics of creating and using variants through a few examples let's start by creating a component set for a basic checkbox this will include three variants unchecked checked and mixed first we'll create a 16 by 16 frame set the corner radius to 2 and add a 1 point blue grey stroke this will be the unchecked variant the default state of our checkbox so we'll rename it to checkbox unchecked component sets can only be created from components so we'll use the keyboard shortcut command option k to turn this into a component in the right sidebar there's a new section for variants component sets need to have more than one variant within them let's click the plus icon in the variant section and see what happens whoa let's explore what changed figma created a copy of our checkbox component and placed both components in a new container this container is a component set which we can identify by the dashed purple stroke in the layers panel we can see the component set has the same four diamond icon we're used to sing for our components each variant within our component set has a single filled diamond icon the names of our layers have also been changed the text before the slash checkbox is now the name of our component set the text after the slash unchecked is now the name of our default variant the checkbox has a generic name followed by an ascending number variant 2. layer naming is an important aspect of creating and managing variants unlike other layer names in figma which can mostly be arbitrary layer names in a component set have a very specific syntax this structure contains important information about each variant including the properties and values associated with that variant let's take a closer look figma will generate properties for our variants based on the properties and values we associate with them we'll select our unchecked variant and use the shortcut command r to rename the layer to observe this figma has given this variant the name property equals unchecked this is because the default property of variant has the value unchecked at the moment our variants only have one property but what if we had two three or twelve properties when there are multiple properties figma will separate each property using a comma we'll show this later in the video now let's give our second variant a more descriptive name we can avoid using the layer naming syntax in the layers panel by renaming the value itself in the right side bar select the component set and the variance section click the existing value to rename it all our variants will use the same properties and values but each variant needs to have a unique combination of them if any variants have the same combination of values like if we rename this to unchecked figma will alert us to the conflict we want this variant to have a value of checked so we'll update this and resolve this error our variants now have different unique values for the same property we can also rename properties to make them more descriptive with the component set selected we can rename this property to state let's make some changes to our check variant to distinguish it from our unchecked variant we can edit our variant directly within the component set we'll add an 8 by 8 square inside of it and add a purple fill this looks great we've successfully created a component set with two variants the variants share one property and each one has a unique value if we select the component set we can see the values we added in the right sidebar this is all we need to get started with our checkbox component set we'll explore adding more properties and values to create multi-dimensional variants later let's try using our checkbox in our designs we can access local components and components from other libraries by opening the assets panel on the left side bar if you're familiar with components you might expect to see two components here one for the unchecked state and another for checked component sets collapses all variants down into a single entry making it easier to find the component we need we'll drag an instance of our checkbox onto the canvas if we want to use another variant of the checkbox we can select it in the right sidebar it's not possible to create an instance of an entire component set if we select the component set and try to duplicate it we'll create a brand new component set this won't always be a useful workflow but it will speed up the process of creating some similar but unrelated component sets like a set of radio buttons a radio button can only have two values selected or unselected but our checkbox could have a third value for a mixed state let's create this third mixed variant for our checkbox there are a few ways we could do this we could select the component set and in the canvas we can click the plus icon inside the component set or click the more icon in the right side bar and select add new variant we want to use the checked variant as a starting point so we'll take a third approach select the existing checked variant and duplicating it using command d we'll rename the value to mixed and make some adjustments to its appearance all set if we go back to the instance we created earlier we can now see the mixed variant as an option in the right sidebar we mentioned that the radio button can only have two values selected or unselected we call this a binary choice or a boolean value figma automatically recognizes true and false or off and on as boolean values instead of showing the value itself bigmo will show a toggle switch we'll select the component set to view the existing values we can then double click on each value to rename them as true and false we can also rename our property to something that can be described using the same true false values click on the property in the right sidebar to rename it to selected if we create an instance of the radio button on the canvas the drop down menu to switch between variants is now a toggle switch awesome so far we've only built component sets that share a single property but you can add as many properties and values as you need the more multi-dimensional our component sets become the more flexible and powerful they are to use our radio button currently has a selected property let's add another property to support both the active and inactive versions of our component select the component set click the more icon in the right side bar and select add new property we'll name this property active and hit enter to confirm figma has added a new property to the sidebar as well as a default value we want active to also be a binary choice so we'll create another boolean value both our existing variants are active so we'll double click on the default value and rename it to true we'll show you how to add a new value for false in a minute but first we'll create the inactive variance of our radio button if we duplicate our variants figma will add new variants in a single vertical line but we want to organize variants on the canvas in a way that conveys their multi-dimensional nature we can do this by creating our variants in a 2x2 grid to arrange our variants in a grid we'll select the component set and drag the right edge to resize it then select our existing variants and duplicate them now we have two pairs of identical variants remember the error we saw earlier here it is again let's remove this error by adding a different value for our new variants we can add new values in the variant section of the right sidebar click the arrow beside the active property select add new and type false in the field next we need to style our inactive radio buttons in a light blue gray perfect now we can use the two toggle switches to create any one of our four unique combinations of properties and values we can select different values in the right side bar to change the variant we're using but we can also use instant swapping to swap between component sets just like we can with regular components that don't have any variants let's swap the instance of a radio button to the checkbox we made earlier we'll select the instance and click the component name in the right sidebar to open the instance swapping menu after we select the checkbox we can choose which variant we want to use with our component sets created we can publish them as a library for the rest of our team to use we'll open the libraries modal using the shortcut alt option 3 and click publish next to the current file now our team can access all the variants of our component set from the assets tab in any file like we saw earlier figma will only show the default variant in the component set this makes it much easier for team members to find the components they need instead of having to know the ins and outs of your design system they can search for a button component to get access to the right component and all of its possible variants to learn more search libraries in the figma help center now we're going to take you through the process of converting existing components to variants earlier we discovered how figma uses layer names to store important information about each variant we saw how the slash naming convention worked on a small scale when we renamed the first checkbox to checkbox unchecked before creating our component set we can use this convention with longer and more complex names to create multiple properties and values when converting our existing components let's take a look at an existing button in our design system this button is the primary version of our component is the largest button size and is the default state of the button this particular version of our button also has no icon to make it easier to find in our existing design system we've added these attributes to the button's name separated by slashes we have another button in our design system that shares some of these values as well as having some values of its own if we were to merge these components as variants figma would use the value before the first slash as the component's name each of the subsequent attributes separated by slashes would be converted to values figma will also create four properties one for each attribute and give them generic names we use two buttons to illustrate the mechanics behind the merge as variants button but it's likely that your team will be working with many more buttons thankfully there's no limit to how many properties and values the variance in your component set can have we can use this process to convert this large collection of button components segmented by size type state and icon into a single component set figma will take most of the guesswork out of the process by creating unique values for each of your variants the only information figma doesn't know is the name of the properties themselves you'll be able to rename those properties to something more descriptive like we explored earlier and if you find yourself configuring some properties more than others you can even click and drag to reorder them from the most to least used and just like that you've combined 84 variants into a single component variants are a powerful feature that makes it easier to find the component you're looking for and configure it to suit any need variants also strengthen your company's design system by bringing your components closer to how they're represented in code to learn more search variants in the figma help center let us know how variants help your team in the comments and subscribe to figmon youtube for the latest product and community news

Channel: Figma

Views: 878,202

Keywords: product:figma_design, audience:designer, language:english, format:standard, produced_by:product_education, theme:work_with_components, event:none, series:create_your_design_system_in_figma, type:feature_tutorial, level:advanced, primary_feature:variants, secondary_feature:components

Id: y29Xwt9dET0

Length: 14min 15sec (855 seconds)

Published: Wed Oct 28 2020