Setting up Variants (Steps)

1. Learning how to create variants

Step 1: Create an element named Button and add in it a text “Button”. Also add a background color of dark color.

Step 2: Turn the button into a component by right clicking the button and selecting the option of turn into component or use the shortcut: Ctrl + Alt + K. Add buttons to it by clicking on the plus icon to add a variant. Or you can also choose the new variant option at the top row.

Step 3: The set of components and variants must look like these in the side view tab. Also change the background colors of the buttons that have been added.

Step 4: Now go to the Assets tab and you can find all your components. Add an instance of the component in the design file.

Step 5: Now add properties of the variants in the column on the right side. Under the heading of current variant you can add properties for it. Change the name of property to state and set the values: Pressed, Hover, Disabled to each of the button variants.

Step 6: The property & it’s value tab should look like this for the Button component.

Step 7: Now when we click on the instance of the Button we created using the Assets tab, we can see in the right column different sets of properties and it’s values that we can set. If we click on hover, it changes to the background color & features of hover, and if disabled then it shows the features of the disabled button variant. This is how variant ensures the reusability of the designs in a much better & efficient way.

2. Setting up variants for Icons

Step 1: If we select all the three buttons and click on CTRL + D, we can create a set of replications for the button. On rearranging them and selecting them all together, we can view collective properties of the button component in the right side.

Step 2: Select two icons of correct & wrong. Copy and paste the correct icon for the button variants in the right side and the wrong icons in the left side button variants. The design should look like this:

Step 3: Create another property for the variant of name “Icon” and value “True”. We are doing this so that if the icon of right is there then the value of Icon will be true, else it will be false.

Note: For all the buttons with right icon, select all together and then set the Icon property to true. And for all buttons with cross icon, select all of them together and then set the Icon property to false.

Step 4: Insert another instance of the button in the design file.

Step 5: Now you can see two properties for the button. One is for the state, whether it is hover, or disabled or pressed which you can change by selecting one of the options. Second is the Icon option with a toggle checkbox. If true then the right icon will be shown and if false then the wrong icon will be shown.