How to Make a Button Component in Figma: Variants

The button is the best first component to build in Figma. It uses auto layout, variants and properties, and you will use it on every screen. This guide builds one button component that can be primary or secondary, small or large, with or without an icon, and shows hover and disabled states. It takes about 15 minutes.

Step 1: Draw the button with auto layout

Press T and type "Button". Choose a font size of 16.
With the text selected, press Shift + A to add auto layout.
Set horizontal padding to 20 and vertical padding to 12.
Set the corner radius to 10 and add a fill color for the background.
Set the text color to white, or to a dark color if your background is light.

Because the button uses auto layout, it grows with the label. You never need to resize it by hand.

Step 2: Add an icon slot

Place an icon layer to the left of the text, inside the same auto layout. Set the gap between icon and label to 8. Make the icon a component or an instance, so you can swap it later. Keep the icon 18 to 20 pixels, aligned with the text.

Step 3: Create the component

Select the button frame and press Ctrl + Alt + K (Option + Command + K on Mac). Rename it "Button". For a longer guide to this step, see how to create a component in Figma.

Step 4: Add variants

With the main component selected, click the plus next to Variants. Add these properties:

Type: primary, secondary, ghost.
Size: small (height 36), medium (height 44), large (height 52).
State: default, hover, disabled.

Figma creates a set of variants. Edit each one so it looks right: the secondary has a border and a transparent fill, the ghost has no border, the hover is a little darker, and the disabled has lower opacity and a grey fill. Keep the same padding in every size, so the label stays aligned.

Step 5: Add properties for content

A boolean property "Show icon" on the icon layer.
A text property "Label" on the text layer.
An instance swap property "Icon" on the icon, with a few preferred icons.

Read component properties and variants explained if you want the detail on each type.

Step 6: Check the details

Contrast. White text on a mid blue passes. White text on yellow does not. Aim for a contrast ratio of at least 4.5 to 1 for normal text.
Touch size. Keep buttons at least 44 pixels tall for mobile.
Focus state. Add a visible focus ring if developers will build from this file.
Naming. Name variants "Type=Primary, Size=Medium, State=Default" so they are clear in the panel.

Use the button

Open the Assets panel, drag the button onto a frame, and use the right panel to choose the type, size and state. Type your label in the Label field and turn the icon on or off. If you change the main component later, every button in your designs updates.

Skip the build

If you want a finished set to learn from, copy one of our button kits: they include primary, secondary and ghost types with states. Browse the free Figma components, pick a button set, paste it with Ctrl + V and inspect how it is built.

Quick answers

What size should a button be?

Between 36 and 52 pixels tall is common. Use 44 or more on mobile.

How many variants does a button need?

Usually type, size and state. That can be 27 variants. If it grows past that, move optional parts into boolean properties.

Should the corner radius be a variable?

Yes. A radius variable lets you change the style of every component at once.

How to Make a Button Component in Figma with Variants and Auto Layout