How to Create a Button System in Figma: Step-by-Step Guide

To create a button system in Figma, start by designing a base button component with text and background layers. Then use variants to add different states like default, hover, and disabled. Finally, apply text styles and color styles for easy updates and reuse across your designs.

Syntax

In Figma, a button system uses these key parts:

• Component: A reusable button design.
• Variants: Different button states or types grouped in one component.
• Text Styles: Predefined font styles for button labels.
• Color Styles: Reusable colors for backgrounds and text.

These parts work together to create a flexible button system.

text

1. Create a frame for your button.
2. Add a rectangle for background.
3. Add text for the label.
4. Select both and create a component (Right-click > Create Component).
5. Add variants (Properties panel > Add variant) for states like Default, Hover, Disabled.
6. Define text styles and color styles in the Assets panel.
7. Apply these styles to your button layers.
8. Use instances of the component in your designs and switch variants as needed.

Example

This example shows how to create a simple button system with two variants: Default and Hover.

text

1. Draw a rectangle (width: 120px, height: 40px) with corner radius 8px.
2. Set fill color to a blue color (e.g., #2563EB).
3. Add a text layer centered inside the rectangle with text "Click Me".
4. Select both layers and create a component (Ctrl+Alt+K).
5. In the right panel, click "Add variant" to create a second variant.
6. Change the second variant's fill color to a lighter blue (e.g., #3B82F6) to represent hover state.
7. Name the variants "Default" and "Hover".
8. Save text style "Button Label" with font size 16px, weight Medium.
9. Apply the text style to the text layer in both variants.
10. Use instances of this component and switch between variants in the properties panel.

Output

You will see a button component with two states: a blue button labeled "Click Me" and a lighter blue hover state. Switching variants changes the button's look instantly.

Common Pitfalls

• Not using components: This makes buttons hard to update consistently.
• Forgetting variants: Leads to multiple separate components instead of one flexible system.
• Not using text and color styles: Makes global changes tedious.
• Overcomplicating variants with too many states at once.

Keep your button system simple and organized for easy maintenance.

text

Wrong way:
- Create separate button frames for each state without variants.

Right way:
- Use one component with variants for all states to switch easily.

Quick Reference

Step	Action	Purpose
1	Design base button frame	Create the button shape and label
2	Create component	Make button reusable
3	Add variants	Add states like Default, Hover, Disabled
4	Define text styles	Standardize font for labels
5	Define color styles	Standardize colors for backgrounds and text
6	Use instances	Place buttons in designs and switch variants

Key Takeaways

Use components with variants to build flexible button systems in Figma.

Apply text and color styles for consistent and easy updates.

Keep your button states organized within a single component.

Avoid creating separate frames for each button state.

Test your button system by switching variants on instances.