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:

1. Create the main button component.
2. Create the button variants.
3. 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.

1. Select the Text tool in the toolbar, click on the canvas, and type Save.
2. 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.
3. Select the text layer and use the keyboard shortcut Shift A to turn it into an auto layout frame.
4. In the right sidebar, ensure that the Vertical resizing and Horizontal resizing settings are both set to Hug.
5. 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:

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.

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

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

1. Select the two icon frames.
2. Make sure Constrain proportions is enabled in the right sidebar and change the frame width to 24.
3. 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:

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.

Configure unsaved variants

First, we’ll configure our unsaved variants.

To add variants:

1. Select the component you just created.
2. Click Add variant in the right sidebar.
3. 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.

1. 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.
2. 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.
3. 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 saved variants

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

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

5. Select the top variant. Leave the state property as-is and add a new status property value called saved.
6. With the new saved variant still selected, click the purple plus to add two more variants.
7. Select the middle variant and change the state property value to hover and the fill to #E3E4EB.
8. 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:

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.

Add the hover trigger

1. Click the Prototyping tab in the right sidebar.
2. Select the default, unsaved variant and click and drag the blue plus to the hover, unsaved variant.
3. 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.
4. Apply an identical prototype connection between the default, saved and hover, saved variants.

Your first two connections should like this:

Add the mouse down trigger

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

Your connections should like this:

Add the mouse leave trigger

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

Your connections should like this:

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.

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

You final connections should look like this:

Play your button

It’s time to see your button in action!

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

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.