How to Create Interactive Components in Figma

To start, you need to add the default element to your page. This is how the object will look before a user interacts with it, so it can be a button, a checkbox, an image, or anything you can think of.

I want to create a checklist for this example, so I will start by adding an empty box as the default element. This is how the box should look when a user first sees it and hasn’t interacted with it by hovering over it or clicking on it.

Next, duplicate the default object and then adjust the properties as needed. Usually, you would just need to change the color and a few elements on it and keep the general design similar to the default object. However, the properties of the new object depend entirely on the result you are after in your design.

For my checkbox, I will add a quirky red X in the checkbox and group the elements using Control + G on Windows or Command + G on Mac to show that the item is checked off.

For you to connect the objects, you need to convert them into components. To convert an object into a component, select it and then click on the Create Component icon in the top toolbar. You can also use the shortcut Control + Alt + K on Windows or Command + Option + K on Mac.

Repeat this on both objects individually, be careful not to select the objects together and convert them simultaneously, as this will cause problems in the process.

Now that both your objects are components, you can combine them as variants to show that one must change into the other when a user interacts with it. 

To combine the elements, first, select both elements by clicking on each one while holding in Shift, or click and drag over both objects. Then, click on the Combine as Variants button, which is located under the Components section in the Properties panel on the right.

Once you have connected the two components, it’s important to rename them in the Layers Panel on the left. This will ensure that you can keep track of the components and set the interaction correctly.

Rename the component by selecting it on the canvas, then locate it in the Layers Panel (it will be highlighted in the Layers Panel). Double-click on the component name in the panel and then type in the new name for it. Repeat this for the second component as well.

You can now create your design that will feature the interactive component on the canvas. Select the first component you created, and copy it by holding in Alt on Windows or Option on Mac and dragging it away from the original. Repeat this process to make as many copies as you need for your design, ensuring that you copy the default component.

Once your design is ready on the page, you need to connect the two components you initially created to ensure that one component turns into the second when interacted with. To do this, first, open the Prototype tab on the right-hand side.

Once the Prototype tab is open, select the default component by double-clicking on it. Once the component is selected, you will see a small plus sign appear on the side of the box when you hover over it. Click the plus sign and drag the line down to the second component until it clips onto it, then let go. The two components will now be connected.

As you drop the connection onto the second component, you will see an arrow connecting the two, and a panel will open, which allows you to adjust the properties of the connection.

First, set the interaction the user must do to make the element change. You can choose On click, On drag, While hovering, and many more. For this example, I will set it to On Click.

Next, you need to set the action, which determines what happens to the default component when a user interacts with it. In this example, we want the box to change the box with an X in it. You can set your own action, but for this example, I will choose Change to.

Now, you need to select what the default component will change to, which will usually already be set to the right component. However, you can change this to ensure the default component changes to the right component.

You can also set the transition to adjust how the first object changes to the second, such as by dissolving, moving in, moving out, or any of the other options. I will choose the dissolve option for this example. You can then adjust how the transition functions and the speed of the transition.

When you are happy with the properties of how the component changes, you can exit the panel using the x icon at the top.

Now, it’s time to check whether the interaction works as you want it to. To check the transition, click on the Present button, which is the Play icon at the top right of the workspace.

Clicking the Present button causes another tab to open in your browser, which shows a mockup of your design on the template you used, for instance, a cellphone. This allows you to view the design to see how it will actually look on the device. This page also allows you to test any interactions you have created.

Click on the interactive elements to see if they work. I will click on a few of the checklist boxes.

Check that the object changed to the second component you designed once you do the set interaction, such as clicking on the boxes in my case. You can now repeat the process to create any interactive components in Figma.