How to Make Interactive Components in Figma

A successful UX design considers dynamic components. For example, how would you let the user know a button is activated? In this tutorial I’ll show you a simple way to make interactive components in Figma.

A component interaction can be as simple as swapping an icon or changing the text. Setting this up helps to keep consistency in design when working in multiple digital brand assets.

Setting interactive properties helps you define specific changes to a button or a checklist.

This is really helpful to present your idea to a client, making every element in your design proposal look as close to the live version.

Full Course: Figma Components Tutorial

Figma components allow you to work efficiently by not having to recreate an element each time you need to. This is specially helpful with elements such as buttons and forms.

Check out with this full free course on Figma Components by design expert Adi Purdila. Find this and more quick and easy-to-follow video tutorials on our Envato Tuts+ YouTube channel.

How to Make Interactive Components in Figma

In this tutorial, we’ll use an interactive button as an example of how to make interactive components in Figma. I’ll be working with Transit - Travel App Mobile App UI Kit available on Envato Elements.

1. Define Your Button Default State

Let’s focus on the first screen of the template. Before creating other button states, start by defining the color, font size and elements of your button on its default state.

One of the huge benefits of working with a template is that you’ll have that already sorted out.

We’ll create an interactive Figma component for the Get started button on the first screen. In this case, I decided to keep the orange button as my default state.

2. Create a Component Set

Step 1: Define Active and Inactive States

Duplicate your default button and define a style for your active state. Now you have to different states of the same button.

Design Active and Inactive States in Figma

Step 2: Select Buttons to Create a Component Set

Select both button states and go to the top bar to Create a component set.

Rename it to identify this element in your design system. I called it “Get started button”.

Give the Property (right side panel) a name. Let’s call it “Active.”

Then, click each button starting with the Active button (in this case the black one) and assign a “Yes” state. Then click on the Inactive button (in this case the orange one) and assign a “No” state.

Step 3: Prototype

Go to the Prototype panel con your top right side and link both buttons.

Set the Inactive button to go to the Active one and the other way around with the Active button.

3. Test Your Prototype

Drag your “Get started button” into the frame you want and click on the Present button on the top right side.

Click on the button and see how it is now an interactive component that activates with one click. You’re all set!

Figma Web Templates on Envato Elements

A prebuilt Figma UX/UI kit will definitely save you time since you won't have to set everything up from scratch. Screen, button and font sizes will be all set for you to focus on your web design.

Premium Figma templates are created with the best UX/UI design practices in mind. Save up some time and focus on your content. Try out one of the many Figma templates available on Envato Elements!

Find More Figma Resources and Tutorials

Now you know how to make interactive Components in Figma. It's time to take your skillset to the next level. Check out these tutorials and set of resources to guide you through your Figma learning experience:

It’s a Wrap!

I hope you found this quick and easy Figma tutorial helpful. Try out these new tricks on your next web design project. Find all the inspiration and creative resources you need on Envato Elements.