How to Make a Button in Figma: Design Best Practices

Most files I open have three or four buttons that look identical and share nothing. Same blue, same 8 pixel radius, same label. Somebody drew one, copied it twice, and moved on. Then the brand color shifts and every copy has to be hunted down by hand.

The alternative is a frame with auto layout, component properties attached, and variants covering the states, so every instance updates from one main component. Product teams build it once inside a component set and reuse it across every screen in a file without redrawing anything.

Worth knowing who is actually doing this work now. Figma’s own 2025 IPO filing reports that non-designers made up two-thirds of its more than 13 million monthly active users that March, so most people assembling a button today are not trained designers at all.

What Is a Button in Figma

Strip it back and you get a frame with auto layout switched on, a text layer inside, and at least one component property hanging off it. A rectangle and a text layer that somebody grouped and named “Button” is a different object entirely, even though it looks the same sitting on canvas.

The vocabulary is where people stall. The main component is the source, and every copy anywhere pulls its styling from that one object. An instance is one of those copies, still linked back to it. Variants are the odd ones out, since they are states rather than separate things, and they live together inside a shared component set.

Mixing these up is common among people just getting comfortable with interface components in general, not only in Figma.

A grouped rectangle and text layer breaks the moment one copy needs to change without dragging every other copy along with it. Nobody updates the master, because there is no master.

Figma’s own vocabulary places button somewhere between component and component set, and getting comfortable with how components work inside Figma makes every later step easier.

Should a Button Be Grouped or Built as a Component

Not every button needs the full component treatment.

What decides it, more than anything else in building components in Figma, is how many times the button gets reused. Once. Twice. Forty times across nine screens. Those are different problems.

Grouped Shape

Quick to throw together, and completely disconnected from everything else. Every copy is independent, so a color change means editing each one by hand. For a single screen nobody will revisit, that is fine and I do it all the time.

Atlassian’s public design system takes the opposite approach for anything reused across products, documenting Button as a component rather than a one-off shape (atlassian.design).

Single Component

A single component without variants is reusable, but it can’t hold more than one state cleanly. Every hover or disabled look ends up as its own disconnected component instead of living in the same set, which defeats most of the point.

Fine for a static icon or a logo mark. Falls apart the moment a button needs to look different on hover.

Component Set With Variants

This is the version that scales. Every state and every placed instance ties back to one source.

• Default, hover, pressed, focused, and disabled all live in the same set
• A single edit to the main component updates every instance across every file
• Setup takes longer upfront, which only pays off if the button gets reused often

Figma’s design system tooling was built around exactly this kind of setup, and teams that skip it usually end up rebuilding the same button five different ways.

How Auto Layout Shapes a Button

Auto layout controls a button’s padding, its internal spacing, and how it resizes when the label changes.

Getting comfortable with how auto layout works in Figma pays off far beyond buttons, since nearly every component in a file depends on it.

Figma’s own developer documentation confirms that wrap behavior and minimum and maximum width and height controls shipped together as Auto Layout v5, rolled out at Config 2023.

Resizing mode is the setting that matters most here. Hug contents is the one to reach for by default, since the frame grows and shrinks around whatever the label says. Fill container earns its place inside a form row or a card footer, where the button should stretch to whatever space it gets. Fixed width is rarer, and it really only suits an icon-only button that has no business changing size.

Direction and gap settings decide whether an icon sits beside the label or above it, and padding on each side keeps the label from touching the edge.

The same thinking behind responsive design on the web applies here. Auto layout is Figma’s version of it, just applied at the design stage instead of in the browser.

How to Build the Base Button Shape and Label

The hands-on part is short, and it happens before any component or variant gets involved.

1. Draw a frame and switch on auto layout before adding any content to it
2. Add the text label first, so the frame can hug its width around it
3. Apply a fill color and, if the button needs one, a stroke
4. Round the corners from the right panel to match the rest of the file’s shapes
5. Name the layer something readable, not the default frame number Figma assigns

The frame is the foundation for everything that follows, and getting comfortable with how frames work in Figma makes step one almost automatic.

Corner radius is easy to get wrong by eye, and a quick look at how corner rounding actually works avoids a mismatched-corner mistake.

How to Turn a Button Into a Reusable Component

Figma’s own keyboard shortcut for this step is Ctrl+Alt+K on Windows or Option+Cmd+K on Mac, confirmed on Figma’s community support forum.

Keeping a running list of shortcuts like this one, through a full Figma shortcuts reference, saves real time once component sets get involved.

Converting a finished shape into a real component takes four more steps after that.

1. Select the frame and press the create component shortcut, or use the right-click menu
2. Duplicate the new component to produce default, hover, pressed, focused, and disabled versions
3. Select every duplicate and combine them into a single component set
4. Rename each variant property instead of leaving Figma’s default labels in place

Step three is where most of the value shows up. It links every state to one shared properties panel instead of five separate components.

Building out full variant sets like this is the same workflow used for buttons, form inputs, and just about anything with more than one visual state.

How Component Properties Control a Button’s Variants and Content

Component properties are what let one button component behave like five or six different buttons without ever detaching an instance.

Figma offers a handful of property types. These are the ones a button actually uses.

Variant Property

Default, hover, pressed, focused, and disabled all sit under one variant switch.

Picking a state becomes a dropdown choice instead of hunting through separate, disconnected components.

Boolean and Text Properties

A boolean property shows or hides a leading or trailing icon layer, which is the tidiest way I know to handle a button that sometimes has an arrow and sometimes doesn’t. A text property is the other half of it, letting each placed instance carry its own label, like “Save” versus “Cancel”.

Neither one requires detaching the instance from its main component, which keeps future updates flowing through.

Instance Swap and Slots

An instance swap property changes which icon component sits inside the button, without touching anything else about it.

Slots go further. A slot can hold more than one layer at once, not just a single swapped component, and Figma’s help documentation, current as of 2026, describes them as a way to add an icon plus a badge inside one instance without detaching it.

Google’s Material Design kit for Figma shipped its own version of this idea, called Slot Components, back in 2024, before Figma’s native slots existed (Material Design blog, 2024).

Editing these properties on an existing component is covered in more depth in a separate guide to editing components in Figma, worth a look once a button component gets past the basics.

Which States Does a Button Need

Most buttons don’t need every state Figma allows for. Four cover the vast majority of real interfaces.

• Default is what the button looks like before anyone touches it
• Hover is a subtle shift confirming the cursor is over a clickable target
• Pressed gives immediate feedback the moment someone clicks or taps
• Disabled should be visually reduced, not just a lower opacity slapped on the same colors

Skipping hover on touch-only interfaces is usually fine. StatCounter’s global traffic data for June 2026 puts mobile at 51.45 percent of all website visits, which means a large share of button taps never trigger a hover state at all.

A focused state is different. It isn’t optional the way hover sometimes is.

Keyboard-only users rely on it to see where they are on the page, which is exactly what web accessibility guidelines require for any interactive control.

Disabled states get this wrong constantly. Dropping the opacity to 50 percent often fails basic color contrast checks, even though the button visually reads as “off.”

How to Connect Button States With Prototyping

A component set full of variants still looks static until reactions tie the states together.

Reactions are what let someone prototype in Figma a button that actually responds to a cursor or a tap. Wiring it up takes a couple of minutes.

1. Select the default variant and open the Prototype tab in the right panel
2. Add a reaction with the trigger set to While Hovering or While Pressing, not On Click
3. Set the action to Change To and point it at the matching variant
4. Choose Smart Animate for the transition, then set a short duration so the change feels intentional

Figma’s own help documentation notes that smart animate matches layers by name across frames, so a hover variant with renamed layers will not animate correctly. Took me an embarrassingly long time to work that one out.

It also does not support transitions between a drop shadow and no shadow. Figma falls back to a plain dissolve instead.

Worth knowing before spending an afternoon on it: getting the reactions right is the same skill covered in most guides to how to animate in Figma, just applied to a single component instead of a full flow.

Variables or Styles for Button Color and Radius

A button’s fill, text color, and corner radius can live in three different places.

Which one makes sense depends on whether the button needs to adapt to light and dark mode automatically.

Variables support mode switching, so the same button can flip between a light and dark fill without a second component.

They also connect more directly to code, since a variable can carry a name like button/fill/primary straight into a design token.

Supernova’s State of Design Tokens 2024 report found that 69.8 percent of surveyed design teams were already using Figma variables in their design systems.

Styles are quicker to set up and still perfectly reasonable for a small file with one theme. I wouldn’t feel bad about it.

Hardcoded values are fine for a single one-off button. They become a liability the moment that button gets reused, since a proper variables setup in Figma is what prevents five slightly different shades of the same blue.

Naming a variable after its role rather than its raw color, something a solid design system for components gets right from day one, keeps future updates predictable.

What Size and Spacing a Button Needs

A button can look balanced and still be too small to tap reliably.

Size and padding decisions come from documented standards, not personal preference.

Minimum Tap Target Size

The published minimums don’t agree with each other, which is worth knowing before anyone argues about it in review.

• WCAG 2.5.8 Target Size (Minimum), Level AA: 24 by 24 CSS pixels (W3C, WCAG 2.2, 2023)
• WCAG 2.5.5 Target Size (Enhanced), Level AAA: 44 by 44 CSS pixels (W3C)
• Apple Human Interface Guidelines: 44 by 44 points minimum tappable area
• Material Design: 48 by 48 dp minimum touch target

These numbers describe the tappable hit area, not necessarily the visible button.

An icon-only button can look small and still pass, as long as its padding extends the actual click zone out to the minimum. That gap between what’s drawn and what’s clickable trips up icon buttons that hurt usability despite looking fine on a design file.

Padding Scale

Padding built on a consistent scale keeps a button from looking arbitrary next to every other component in a file.

Most files settle on 8, 12, 16, and 24 pixels, following the same logic as the 8-point grid system used across most design systems.

A small button might use 8 pixels vertical and 12 horizontal. A large primary button often needs 12 and 24.

Staying inside one scale across a file is what makes buttons feel like they belong to the same product.

How to Publish a Button Component to a Library

A finished component set is only useful to one file until it gets published.

Figma’s own documentation describes a library as a collection of components, styles, and variables that live in one file but get reused across others.

1. Move the finished button component set onto a dedicated page, separate from working files
2. Open the Assets panel and select Publish next to the library
3. Write a short description of what changed, especially for updates to an existing button
4. Confirm and publish, then check that teammates see the update notification in their own files

That last step matters more than people expect.

According to Figma’s help documentation, an update to a published component does not apply anywhere automatically.

Someone in each file has to review and accept it first.

IBM’s Carbon Design System ships its button and other components exactly this way, distributing an official library through Figma that teams sign into rather than rebuild (carbondesignsystem.com).

Getting this workflow right early is most of what separates a one-off file from a real design system built in Figma.

Skipping the description field is a common shortcut. It is also exactly what good design system practices warn against, since nobody downstream knows what actually changed.

How to Hand a Button Off to Developers

A button component is only half finished once the design work stops. Someone still has to turn it into working code.

Figma splits that job between two tools, and they solve different problems.

Dev Mode shows padding, corner radius, fill, and typography values as code-ready specs the moment a developer selects the button layer.

It does not generate a working component on its own. It hands over the measurements and expects someone to build it.

Figma Make works differently. Launched in open beta at Config 2025 in May of that year, it takes a prompt or an existing frame and generates working UI directly, without a separate coding step.

Turning a Figma file into code this way suits a rough prototype more than a production button that has to match an existing design system exactly.

Naming is where most handoffs actually break down.

A mismatch between the component’s name in Figma and its name in code forces a developer to guess which button they are looking at, every single time.

When a Button Component Breaks

Most problems with a Figma button trace back to a handful of repeated mistakes.

Detaching an instance is the most common one. The moment someone detaches to make a quick edit, that copy stops receiving every future update from the main component.

Skipping auto layout causes a slower, quieter failure. The label overflows the frame the first time someone types a longer word into it.

Forgetting the focused state breaks the button for an entire group of users without anyone noticing in a normal design review.

Nesting too many auto layout frames inside one button slows the file down and can misalign padding that looked fine a moment ago.

An icon-only button with no accessible label is its own failure mode, and it is more common than most teams assume.

WebAIM’s Million report for 2026, based on scans of one million home pages in February of that year, found empty buttons on 30.6 percent of pages, up from 29.6 percent the year before. Going the wrong direction, in other words.

An empty button usually means an icon with nothing backing it for a screen reader, the same gap that ARIA labeling exists to close.

A slot left unconfigured fails quietly too. It falls back to empty content instead of whatever the button was supposed to show.

None of these show up in a normal visual review. Running a button component through a proper web accessibility checklist catches most of them before they reach production.

FAQ on How To Make A Button In Figma

When Should You Use a Slot Instead of an Instance Swap Property

Use instance swap to change one thing, like the icon component.

Reach for a slot when the button holds more than one piece of content, such as an icon plus a badge, without detaching the instance.

What Keyboard Shortcuts Speed Up Building a Button

Shift+A turns a selected frame into auto layout instantly.

Ctrl+Alt+K (Option+Cmd+K on Mac) creates a component, and Ctrl+D duplicates a variant. None of these replace understanding component properties, but they cut minutes off every button built afterward.

Does Figma Have a Built-In Button Component to Start From

No. Figma does not include a default button component in new files.

Every button gets built from scratch or imported from a UI kit in Figma Community, which is why understanding auto layout and component properties matters more than memorizing a template.

Can You Build a Button Without Auto Layout

Yes, technically. A rectangle and a text layer can sit in a plain frame with manual positioning instead of auto layout.

The button will not resize itself when the label changes, which is exactly the problem auto layout exists to solve.

Is a Paid Figma Plan Required to Create Variants

No. Building components, variants, and auto layout are core design features available on Figma’s free Starter plan.

A paid plan becomes necessary only when publishing that button as a shared team library other files can reuse.

How Is a Figma Button Different From an HTML Button Element

A Figma button is a visual design artifact with no native behavior until someone wires up reactions in a prototype.

An HTML button element is a real interactive control the browser handles automatically, with built-in focus, click events, and form submission.

What Should You Fix First in How To Make A Button In Figma?

A Figma button gets fixed in one order: auto layout first, component properties second, and color or radius tokens third, because every later attribute inherits whatever the frame does under auto layout before anything else gets touched.

• Auto layout structure and resizing mode
• Component properties and variant states
• Color, radius, and spacing tokens

Reversing that order costs the most time. A button styled with variables before its padding is settled forces a rebuild of every token reference once the frame resizes differently.

Following this sequence means visual polish waits. A button can sit unstyled through the whole structural pass, which reads as unfinished in review even though the component underneath is correct.

That trade-off holds for a single button. Once a file holds a dozen components on shared tokens, the next step is a full Figma design system tutorial, not another reordering pass.