Design an interactive button – Figma Learn - Help Center

This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign →

Project overview

Product: Figma Design
Topics: Auto layout, components, variants, prototyping
Difficulty: Intermediate
Length: 20 minutes

In this project, we’re going to design an interactive button. This button will feature three states—default, hover, and pressed—and be animated using prototyping.

To build this button, we’ll do the following:

Create the main button component.
Create the button variants.
Add prototyping interactions to connect the button variants.

When you’re done, your button will look and behave similar to the following:

final button design

Create the main button component

To start, we need to make our main component that will be used to create the button variants.

Select the Text tool in the toolbar, click on the canvas, and type Save.
Select the text layer and use the Text section in the right sidebar to change the font size to 16. We’re using the default Inter font for this tutorial but feel free to pick something else.
Select the text layer and use the keyboard shortcut Shift A to turn it into an auto layout frame.
In the right sidebar, ensure that the Vertical resizing and Horizontal resizing settings are both set to Hug.
Style the frame by adjusting the following:
- Click the plus in the Stroke section and add an inside stroke with a weight of 2
- Click the plus in the Fill section to add a fill
- Change the corner radius to 8
- Change the horizontal gap between objects to 8
- Change the horizontal padding to 32
- Change the vertical padding to 12

Before moving on, check to make sure your button looks similar to the following:

Style your button.png

Tip: You can also set padding on an auto layout frame using this shortcut. Hold ⌘ Command or ⌃ Control and click into a padding field in the right sidebar. Type your vertical padding number first and then horizontal padding number, separating both numbers with a comma 12,32.

If you want to enter different numbers on all sides, then enter the numbers in the order of top, right, bottom, then left. For example, entering 1,2,3,4 sets the top, right, bottom, and left padding to 1, 2, 3, and 4 respectively.

Next, we’ll add a bookmark icon. You can create your own icons or use one of the many icon plugins found on the Figma Community. For this tutorial, we’ll be using the Phosphor Icons plugin to insert two bookmark icons.

Click Actions in the toolbar.
Click the Plugins & widgets tab.
Enter “Phosphor” in the search field.
Select Phosphor Icons to open the plugin.
In the Phosphor Icons plugin, enter “Bookmark” in the search field.
We’re going to use the Regular and Fill versions of the “BookmarkSimple” icon. Use the plugin’s filter option to find both versions.
Click and drag the icons onto the canvas.

image (1).gif

Let’s make sure the icons are the correct size for our button:

Select the two icon frames.
Make sure Constrain proportions is enabled in the right sidebar and change the frame width to 24.
You can move the filled icon to the side for now. Drag the regular icon into the button frame to the left of the button label. Since this is an auto layout frame, the frame automatically adjusts to fit the icon.

Select the button frame and click Create component in the right sidebar. This will be the main component we’ll use to create the other button variants. Double-click on the frame name and rename it to button/default/unsaved.

Before moving on, check to make sure your button look similar to the following:

Check your work.png

Why use a slash separated naming system?

Structuring your component name with slashes ( / ) allows you to quickly set the component’s property values. Any text before the first slash will become the component name and every extra slash level creates a new property that will be applied to all variants in the component set. For example, our button has the name button/default/unsaved.

Once you add a variant, the component set will look like:

Component set name: button
Property 1: default
Property 2: unsaved

To finish the configuration, we'll need to update the property names and add property values for each variant in the component set. We’ll walk through this process in the following section.

Create the button variants

Now that we have our main component, we can use it to add additional button variants to our component set. Each variant will have two variant properties.

Why do we need two variant properties?

Because our button has a saved and unsaved status, and both status variations can move through different interactive states (default, hovered, or pressed), we need a status variant property and state variant property to cover each of these cases.

The number of variant properties you need is determined by the number of variant types in your component set. For example, if we expanded our component set to include a large and small version of each button and a text-free version, we would need to add two additional variant properties: size (large or small) and hasText (true of false).

Configure unsaved variants

First, we’ll configure our unsaved variants.

To add variants:

Select the component you just created.
Click Add variant in the right sidebar.
Click the purple plus below the new variant to add another variant.

Now we need to configure each of these button variants so that they contain default, hovered, and pressed states.

Select the original variant at the top of the component set. In the Current variant section of the right sidebar, you’ll see that this variant has a property of Property 1 with a value of default and a Property 2 with a value of unsaved. Let’s update the property value names to be more descriptive.

Double-click on Property 1 and rename it to state. Do the same for Property 2 and rename it to status. Now, all of the variants in the component set have two properties called state and status.
Select the middle variant. Next to the state property, type hover in the property value field to add a new value. Use the Fill section to change the variant’s fill to #E3E4EB.
Repeat the process with the bottom variant. Next to the state property, type pressed in the property value field and change the fill color to #A8A9B2.

Before moving on, check to make sure your component set looks like this:

Check your component set properties.png

Configure saved variants

Our component set is looking great. Now we need to add the saved variants and create their different states.

Click the purple plus to another variant.
With the new variant selected, double-click on the text layer and type Saved.
Select the filled BookmarkSimple icon you added to the canvas earlier and copy it.
Select the unfilled icon version in the variant you just created, right-click and select Paste to replace.

image (2).gif

Select the top variant. Leave the state property as-is and add a new status property value called saved.
With the new saved variant still selected, click the purple plus to add two more variants.
Select the middle variant and change the state property value to hover and the fill to #E3E4EB.
Select the bottom variant and change the state property value to pressed and the fill color to #A8A9B2.

When you’re done, your component set should look similar to the following:

Final component set (1).png

Add prototyping connections to your button

Next, we’ll add prototyping connections to make our button interactive. If you’re new to prototyping, check out the glossary in our comprehensive guide to prototyping to learn more about the terms used in this section.

What connections do we need?

Before adding prototype connections, it’s important to plan out what you want the different interactions to look like.

When recreating common UI elements (like buttons), referencing other buttons or reading existing documentation can help you understand how the element should behave. Take notes on the interaction and try to match them with corresponding prototype triggers in Figma, such as while hovering, on click, mouse enter, etc.

For more complex components, consider creating a flowchart to help breakdown the interaction into more digestible steps.

For this button, our interactions will look like this:

When a cursor is hovering over the button, we want the hover state to appear
When a cursor presses down on the button, we want the pressed state to appear
If the cursor leaves the button surface while pressing down, we want the button to remain in the default state
When the unsaved button is pressed, we want the state to change to saved
When the saved button is pressed, we want the state to change to unsaved

Add the hover trigger

Click the Prototyping tab in the right sidebar.
Select the default, unsaved variant and click and drag the blue plus to the hover, unsaved variant.
Apply the following interaction settings:
1. Change the trigger to While hovering
2. Set the action to Change to
3. Set the animation to Smart animate
4. Change the transition to Ease in and out
5. Enter 150ms in the Duration field.
Apply an identical prototype connection between the default, saved and hover, saved variants.

Your first two connections should like this:

First prototype connection (2) (1).png

Why set the animation duration to 150ms?

Animations bring joy to digital interactions. When animating your designs, make sure that it enhances the user experience without delaying people from reaching their goal. For web-specific content, it’s common practice to have animations to land in the 150-300 ms range. Animations in this range will allow users to notice the interaction but will not prevent them from moving forward in a timely manner.

Add the mouse down trigger

Select the hover, unsaved variant and click and drag the blue plus to the pressed, unsaved variant.
Leave the rest of the connection settings as they are but change the trigger to Mouse down.
Apply an identical prototype connection between the hover, saved and pressed, saved variants.

Your connections should like this:

Second prototype connection (2) (1).png

Add the mouse leave trigger

Select the pressed, unsaved variant and click and drag the blue plus to the default, unsaved variant.
Leave the rest of the connection settings as they are but change the trigger to Mouse leave.
Apply an identical prototype connection between the pressed, saved and default, saved variants.

Your connections should like this:

Third prototype connection (2) (1).png

Add the mouse up trigger

We need to add two final connections so that the unsaved button can become the saved button when pressed, and vice versa.

Select the unsaved, pressed variant click and drag the blue plus to the default, saved variant.
Leave the rest of the connection settings as they are but change the trigger to Mouse up.
Apply an identical prototype connection between the pressed, saved and default, unsaved variants.

You final connections should look like this:

Final prototype connection (2) (1).png

Play your button

It’s time to see your button in action!

Select the Frame tool in the toolbar or press F and add a frame to the canvas.
From the Assets tab, drag an instance of your button into the frame.
With the new frame selected, click the Prototype view dropdown in the toolbar and select Preview.
Use your cursor to hover over and interact with the button.

Test out your interactive button by adding an instance and playing the prototype.gif

What’s next?

Great job! You designed an interactive button using a component set and prototyping. If you’re looking for another challenge, try creating a component set that includes an icon-only button. If you design something you're extra proud of, we'd love to see it! Mention us on X (formerly Twitter) @Figma or publish it to the Figma Community.

Project overview

Product: Figma Design
Topics: Auto layout, components, variants, prototyping
Difficulty: Intermediate
Length: 20 minutes

In this project, we’re going to design an interactive button. This button will feature three states—default, hover, and pressed—and be animated using prototyping.

To build this button, we’ll do the following:

Create the main button component.
Create the button variants.
Add prototyping interactions to connect the button variants.

When you’re done, your button will look and behave similar to the following:

Create the main button component

To start, we need to make our main component that will be used to create the button variants.

Select the Text tool in the toolbar, click on the canvas, and type Save.
Highlight the text and use the Text section in the right sidebar to change the font size to 16. We’re using the default font for this tutorial but feel free to pick something else.
Select the text layer and use the keyboard shortcut Shift A to turn it into an auto layout frame.
Style the frame by adjusting the following settings:
- Click the plus in the Stroke section and add an inside stroke with a weight of 2
- Click the plus in the Fill section to add a fill
- Change the corner radius to 8
- Change the horizontal gap between items to 8
- Change the horizontal padding to 32
- Change the vertical padding to 12

Before moving on, check to make sure your button looks similar to the following:

style the button frame (1).png

Click Resources in the toolbar to open the resource modal.
Click the Plugins tab.
Enter “Phosphor” in the search field.
Select Phosphor Icons to open the plugin.
In the Phosphor Icons plugin, enter “Bookmark” in the search field.
We’re going to use the regular and fill versions of the “BookmarkSimple” icon. Use the plugin’s filter option to find both versions.
Click and drag the icons onto the canvas.

The bookmark icons are too large for our button so let’s resize them.

Select the two icon frames.
Make sure Constrain proportions is enabled in the right sidebar and change the frame width to 24.
You can move the fill icon to the side for now. Drag the regular icon into your Save button frame to the left of the button label. Since this is an auto layout frame, the frame automatically adjusts to fit the icon. It should look similar to the following:

Save button (1).png

Select the button frame and click Create component in the toolbar. This will be the main component we’ll use to create the other button variants. Double-click on the frame name and rename it to “button/default/unsaved”.

Why use a slash separated naming system?

Once converted, the resulting component will look like:

Component name: Button
Property 1: default
Property 2: unsaved

To finish the configuration, you’ll need to update the property names and add property values for each variant in the component set. We’ll walk through this process in the following section.

Create the button variants

Now that we have our main component, we can use it to add additional button variants to our component set. Each variant will have two variant properties.

Why do we need two variant properties?

Because each of our button variants will have a state (default, hovered, or pressed) and a status (unsaved or saved), we need a variant property to cover each of these.

First, we’ll configure our unsaved variants.

To add variants:

Select the button component you just created.
Click Add variant in the toolbar to add a variant.
Click the purple plus below the new variant to add another variant.

Now we need to configure each of these button variants.

Select the original variant at the top of the component set. In the Current variant section of the right sidebar, you’ll see that this variant has a property of Property 1 with a value of default and a Property 2 with a value of unsaved. Let’s update the property value names to be more descriptive.
Double-click on Property 1 and rename it to state. Do the same for Property 2 and rename it to status. Now, all of the variants in the component set have two properties called state and status.
Select the middle variant. Next to the state property, type hover in the property value field to add a new value. Use the Fill section to change the variant’s fill to #E3E4EB.
Repeat the process with the bottom variant. Next to the state property, type pressed in the property value field and change the fill color to #A8A9B2.

Before moving on, check to make sure your component set looks like this:

Configure unsaved variants (1).png

Our component set is looking great. Now we need to add the saved variants.

Click the purple plus to another variant.
With the new variant selected, double-click on the text layer and type Saved.
Select the fill BookmarkSimple icon you added to the canvas earlier and copy it.
Select the unfilled icon version in the variant you just created, right-click and select Paste to replace.

Add saved variant .gif

Select the top variant. Leave the state property as-is and add a new status property value called saved.
With the new saved variant still selected, click the purple plus to add two more variants.
Select the middle variant and change the state property value to hover and the fill to #E3E4EB.
Select the bottom variant and change the state property value to pressed and the fill color to #A8A9B2.

When you’re done, your component set should look similar to the following:

Full component set.png