How to create Components?

1. Creating component

Step 1: Create a button with some background color & text “Click me” alongwith an icon placed beside the text.

Step 2: Now right click the button and view the options & select Create component, or simply click Ctrl + Alt + K.

Step 3: A four dots symbol appears beside the element that has been converted into a component like this:

2. Creating multiple components

Step 1: Firstly create a set of elements and select all of them together. Click on the triangular symbol at the top and choose one of the options: Create multiple components OR Create component set.

Step 2: Create multiple components leads to each of the element being converted to a single component.

Step 3: Create a component set leads to grouping of several components into a variant set of a number of variants used to depict those elements with similar features.

3. Creating variants from components

Step 1: Add a button element in the design frame.

Step 2: Convert the element into a component.

Step 3: Select variant from the top column and create a variant of the component.

Step 4: Two variants will thus be created: Default & Variant 2.

4. Applying component properties

I. Show Icon property (Boolean property)

Step 1: Create a button & convert it to a component.

Step 2: Choose the plus button beside the properties tab where several component properties options are displayed and add the property name “Show Icon” and change the value to true.

Step 3: Create an instance of the component from the assets tab.

Step 4: Now for the instance, you can toggle over the “Show Icon” property button to add icon or remove the icon & display only the text.

II. Change Icon property (Swap Instance property)

Step 1: Add several icons in the design file, convert each icon to a component and then create it’s variant. Do it somewhat like this:

Step 2: For the button, add one of the above icon variants at the place of icon. Set the button to auto layout and adjust the padding & margin. The tab at the left should look like this:

Step 3: Now go to the button component element, and for the component property select Swap Instance property.

Step 4: Set the name of property to “Change Icon” and set the values to different icons lying in the design file.

Step 5: Create an instance of the button component using the assets tab.

Step 6: For the instance, the property would appear like this and now you can change the name of the icon to get the desired results, without having to copy paste the icon every time.

5. Applying prototypes

Step 1: Click on the Prototype tab for the button component.

Step 2: Draw the arrow from plus sign from the button 1 to variant of the default button with a different icon. Select different animations, time duration & hover effect.

Step 3: Open presentation mode and view the animation that has been formed using the help of components that would look somewhat like this: