Designilo

Buttons are a core part of any user interface—whether you’re designing a landing page, app, or dashboard. In Figma, you can build smart, reusable buttons that adapt to different text labels, screen sizes, and states. This guide walks you through how to create a button step-by-step using Auto Layout and components, so your buttons are clean, scalable, and ready for design systems.

✅ Step 1: Add the Text Label

Start by creating the text for your button.

• Select the Text Tool (T) and type your label (e.g., “Sign Up”).
• Choose your font, size, and weight in the right-hand panel.
• Keep the text short and clear—ideally one to three words.

📌 Tip: Use a predefined text style if you’re working with a design system.

✅ Step 2: Add the Background Shape

Next, create the button shape:

• Select the Rectangle Tool (R) and draw a rectangle behind the text.
• Adjust the fill color, border radius, and drop shadow to match your style.
• Align the text on top of the rectangle and center it manually if not using Auto Layout.

However, this manual method is less flexible. Let’s do it the smart way using Auto Layout 👇

✅ Step 3: Use Auto Layout (Recommended)

Auto Layout makes your button responsive to different label lengths.

Steps:

1. Select the text layer.
2. Press Shift + A to apply Auto Layout.
3. In the right-hand panel, set:
   • Padding (e.g., 12px vertical, 24px horizontal)
   • Alignment: Center horizontally and vertically
   • Spacing: If you add icons later, you can manage spacing here
4. Add a fill to the Auto Layout frame (this becomes your button background).
5. Adjust border radius (e.g., 6–8px) and color to match your brand.

💡 Bonus: Your button now resizes automatically when the text changes.

✅ Step 4: Turn It Into a Component

To make your button reusable:

1. Select the entire button (Auto Layout frame).
2. Press Ctrl/Cmd + Alt + K or right-click > Create Component.

Now you can place instances of the button across your designs, and update the master version when needed.

✅ Step 5: Add Variants for Different States

To simulate button states like hover, pressed, or disabled, use Variants.

How:

1. Select your component and click “+” in the right-hand panel next to Variants.
2. Create multiple versions:
   • Default
   • Hover (lighter/darker shade)
   • Disabled (reduced opacity, muted text)
3. Use Properties to toggle between states easily when prototyping.

🧠 Bonus Tips

• Use icon + text inside Auto Layout for icon buttons.
• Apply constraints if you want the button to resize inside frames.
• Use component properties like text overrides and Boolean toggles to customize without detaching.

Final Thoughts

Building buttons in Figma is more than just combining a rectangle and text. With Auto Layout, components, and variants, you can create smart, flexible buttons that are easy to reuse, maintain, and hand off to developers. Once you master this workflow, you’ll be ready to scale up your entire design system.