Design your first button – Figma Learn - Help Center

Project overview

Product: Figma Design
Topics: Text, auto layout, color, effects, components
Length: 10 minutes

In this project, we’re going to design a stylish button component that automatically resizes based on the length of its label. Buttons are common UI elements and this project will give you hands-on experience using text, applying auto layout, and creating components that you can reuse throughout your designs.

An animation showing the button we'll be building in this project

Add a text layer

We’ll begin by adding a text layer.

Enable the Text tool from the toolbar or press T on your keyboard.
Click anywhere on the canvas and type Button to create a new text layer.

In the left sidebar, you’ll notice the Layers panel now has a new text layer called Button. Double-click on the layer and rename it to Label.

Why name layers?

Naming layers in Figma Design is an optional, but beneficial practice. Naming your layers helps you find and modify layers faster, improves collaboration, and makes it easier for agentic tools like Figma Make to read and interpret your designs.

When you add a text layer, the layer name automatically matches what you typed on the canvas until you rename it. For other object types, the default names are less descriptive. For example, each frame you add to a design file will be called “Frame 1”, “Frame 2”, and so on. Consider giving these layers descriptive names to improve your workflow and file organization.

If you’re running short on time, try using Rename Layers to give your layers contextual names in just a few clicks using Figma AI.

Next, we’ll update the font family and change the font size:

Select the Label layer and use the settings in the Typography section of the right sidebar to change the font family to Outfit.
Change the font size to 16.

How to choose a font size?

When designing digital experiences, it’s useful to establish a foundation for your type system.

You can do this by creating a typography hierarchy that determines the scale of your fonts, from smallest to largest. Start by deciding the size of the body text font, since that’s what you’ll use most often throughout your designs. It’s good practice to set your body copy between 16px and 18px, depending on the font family you choose.

Keep in mind, it’s important to consider the context of your overall design when building your hierarchy. For example, if you were designing buttons for a car touchscreen, the font scale may need to be increased to fit buttons with larger clickable surfaces.

If you’re new to design systems, we recommend taking our Introduction to design systems course for tips on building and managing a design system.

Apply auto layout

Our button isn’t looking too button-like yet, but we’re about to change that using auto layout!

Auto layout helps you organize, arrange, and space out design elements so that they adjust automatically as you make changes, saving you time and making your designs responsive and adaptable.

To apply auto layout:

Select the Label layer.
Right-click on it and select Add auto layout or use the shortcut Shift A. This will add the text layer to a frame with auto layout applied.
In the Auto layout section of the right sidebar, make sure the Horizontal resizing and Vertical resizing settings are both set to Hug contents. Setting the resizing to Hug contents ensures that the button frame will automatically grow or shrink when the label changes.
Double-click on the new frame in the left sidebar and rename it to Button.

Tip: Check out our Figma Design for beginners course for more hands-on learning opportunities.

Style the button

When we applied auto layout, the existing text layer was added to a frame. This allows us to add visual properties like color, strokes, and effects to give our button some style.

Add a fill and a stroke

Select the Button frame and click the plus in the Fill section of the right sidebar to add a fill.
Use the color picker to change the color to #DEB0FB.
Click the plus in the Stroke section of the right sidebar to add a stroke.
Use the settings to configure the stroke:
- Fill: #000000
- Position: Inside
- Weight: 1

Round the corners

Select the Button frame.
In the right sidebar, set the Corner radius to 1000 px.

Why round button corners?

Rounded corners may seem like a small thing, but it can have a large impact on the look and feel of your final designs. Rounded corners soften the aesthetics of your design, making it feel friendlier and more approachable than objects with sharp edges.

Beyond aesthetics, it’s common for interactive elements in modern digital interfaces to have rounded corners. This means that your users are more likely to understand that they can click your button if its design matches other interfaces they use.

To full round a frame’s corners, the corner radius value must be at least half the height of the frame. For example, if our frame was 40 px high, we’d need to set the corner radius to a minimum of 20 px to achieve fully rounded corners.

You may be wondering why we set the button’s corner radius to 1000 px when a lower value would produce the same effect. Using a higher corner radius value helps future-proof components and ensures that the corners stay fully rounded, even if the height of the frame changes later.

Apply a drop shadow

Applying drop shadows to buttons is an optional design choice, but one that can help enhance the clickable feel of a digital button.

To add a drop shadow:

Select the Button frame.
Click the plus in the Effects section of the right sidebar and choose Drop shadow from the dropdown menu.
Use the settings to configure the drop shadow:
- X-position: -2
- Y-position: 4
- Blur: 0
- Color: #000000 at 100% opacity

Refine the padding

When we applied auto layout, it automatically added padding between the frame’s boundary and the text layer inside. Right now, the padding is equal on all sides. Let’s update those values to create a chunkier button that will be easier to tap once we add it to our designs.

Select the Button frame.
In the Auto layout section of the right sidebar, change the Horizontal padding to 32 and the Vertical padding to 24.

Test out your button

The button looks great! Best of all, because we used auto layout, the button will resize based on the length of the label inside it. Test this for yourself by double-clicking on the text layer and typing Sign up or Continue.

Turn the button into a main component

It would be a shame to only use this beautiful button once. Luckily, we can turn it into a main component and reuse over and over again!

To create a main component:

Select the Button frame.
Click Create component in the right sidebar or use the shortcut:
- Mac: Option Command K
- Windows: Ctrl Alt K

If you take a look at the left sidebar, you’ll notice the Button layer is now identifiable by the purple component icon. Now you’ll be able to add instances of your button from the Assets tab in the left sidebar whenever you need! Learn more about using components.

What’s next?

Congratulations! You just designed a responsive button using auto layout. If you’re looking for another challenge, check out our Design an interactive button project or the Figma Design for beginners course to get more hands-on experience with auto layout and components.

Check your knowledge