Mini Tutorial – Working with Figma Button Components

In Figma, UI elements are called Components. Built properly, they’re incredibly versatile and easy to update, but what are components capable of, and how do they operate? We’ll demonstrate their power by working with one of the most common UI elements of all—the button.

Why buttons?

Buttons are brimming with variables like height, width, label length, internal padding, state, and theme. By building a basic button system, we’ll learn the immense value of using Figma with a component-based mindset and the Figma components library.

*Editor’s Note: This written tutorial was derived from a video tutorial created by David Luhr of Build UX.

Task 1: Build a Basic Figma Button Component

1. We'll start by creating a new frame and renaming it Buttons in the layers panel.
2. Type your button label text. We'll be using "Sign Up" for this tutorial.
3. Our typeface is:
   
   • Roboto Medium
   • Font Size 18
   • Line Height 24
   • Text Align Center
   • Align Middle
   • Resizing = Fixed Size
4. Once you've written your button label, double-click on the lower right corner of the text box so that it will automatically size to the smallest constraints of the text.
5. Rename the text layer Button Label.



Click to see full-sized image.

6. Make a rectangle, place it below Button Label in the layers panel, and rename it Button Container. Allow the color of the button container to remain the default gray.
7. Establish a fixed height for the button container. We'll use 60 pixels.
8. Now, we'll add internal padding to the button container.
   • The width of the button label is 63 pixels.
   • We need 24 pixels right and left padding. Combined, this equals 48 pixels.
   • So, we'll enter the width of the label (63 pixels) + total padding (48 pixels).
9. Select both the label and the container and center them with the alignment tools.

Click to see full-sized image.

We have designed a rudimentary button. However, the internal padding of our button is not yet able to accommodate changing label lengths. In a later step, we’ll address the internal layout, which will allow our button container width to be flexible in relation to label length.

Task 2: Make the Button Interactive

To make the button interactive, we’ll add a focus ring.

1. Duplicate Button Container and rename it Button Focus Ring.
2. Make sure that the focus ring is beneath the button container in the layers panel.
3. Remove the fill of the focus ring, and add a black, inside stroke with 4-pixel thickness.
4. We also want a 4-pixel gap between the button container and the focus ring on all four sides, so we'll add +16 to both its width and height.
5. Select and center align the label, button container, and focus ring.

This is how our button, in its most simple form, will look in a focused state.



Click to see full-sized image.

6. Select all three elements (label, button container, focus ring), right-click, and choose "Create Component."



Click to see full-sized image.

7. Rename the component Button/Primitive/Default.
   • Button = Component Type
   • Primitive = Variation
   • Default = State

This is our primitive button. It won’t appear in our final design, but it will act as a foundation that all of our button variations will build upon. The advantage? If we need to redesign our buttons in the future, we only have to edit in one place.

Click to see full-sized image.

Task 3: Establish a Button Layout Grid

1. Select Button/Primitive/Default, go to the design panel, and click the "+" icon next to "Layout Grid."



Click to see full-sized image.

2. Then, click on the grid icon, select "Columns," and enter the following values:
   • Column Count = 1
   • Width = Auto
   • Gutter = 0
   • Type = Stretch
3. "Margin" provides the padding inside the button container.
   • Remember, we need 24 pixels left and right padding.
   • We also need to consider the 4-pixel thick border and 4-pixel gap of our focus ring.
   • This means that we'll need a margin of 32 pixels.



Click to see full-sized image.

4. With the margin added, you'll notice a red indicator area that shows the interior padding of the button container and fits the label width exactly.



Click to see full-sized image.

Now we must add layout constraints to each element of our button.

5. Select all three layers within the component, go to "Constraints," and pin them to "Left & Right" and "Center."
6. At this point, you may select the component and drag it to any width you'd like. You'll see that the layout works exactly as it was designed to.
7. If you make the button width shorter than the label, you'll notice that the label breaks to another line.

Click to see full-sized image.

Task 4: Adjust Button Width for Text Length

Let’s see how our button works with a longer button label.

1. Go to the assets panel, drag in a new instance of the button, and type "Schedule Appointment" or something longer. What happens? The label overflows onto the next line—not exactly what we want.



Click to see full-sized image.

2. Go back to your layers panel, select the new component you just dragged in, and use the arrow keys to adjust the width to the precise dimension that fits the label.
3. When you do this, you'll see that all the layout variables remain as intended—interior padding, label placement, 4-pixel stroke and 4-pixel gap of the focus ring. (Delete this duplicate button before moving to Task 5.)

By using a layout grid, you can create one button that can be used throughout all of your designs, and all you have to do is adjust the width for whatever length of label you need.

Click to see full-sized image.

Task 5: Create Hover and Focus States

With our button default in place, let’s create primitives of our hover and focus states.

1. Toggle off the focus ring in your button default.
2. Hold the Alt key and drag out a new instance of the button default.
3. Make the button container a lighter gray color (#E7E7E7).
4. Right click, "Create Component," and rename Button/Primitive/Hover.



Click to see full-sized image.

5. Drag out another instance of the default state, turn the focus ring on, and match the color of the button container to the color of the hover state container (#E7E7E7).
6. Right click, "Create Component," and rename Button/Primitive/Focus.

We now have a handle on the button’s layout and how it functions in different states. From here, we can begin to add specific themes or styles depending on what we need.

Click to see full-sized image.

Task 6: Implement Button Themes

Now, we’ll create stylistic variations.

1. Hold the Alt key and drag in another instance of Button/Primitive/Default.
2. Change the color of the container to match the desired theme color (#204ECF).
3. Make the button label white (#FFFFFF), toggle on the focus ring, change the stroke to the desired theme color (#204ECF), and toggle off.
4. Right click, "Create Component," and rename Button/BrightBlue/Default.



Click to see full-sized image.

5. Drag out two instances of this new default button: One for hover state and one for focus state.
6. Change the color of the button container to match the desired theme color (#678FFF), right click, "Create Component," and rename Button/BrightBlue/Hover.
7. Apply the same color to the focus button container, toggle on the focus ring, right-click, "Create Component," and rename Button/BrightBlue/Focus.

You can use this same process for any number of themes that you need in your design.

Click to see full-sized image.

Task 7: Behold the Beauty of Figma Components

Once you’ve made all of your themes, take a second to observe just how powerful working with components can be.

1. Select your Button/Primitive/Default, add a corner radius, and you'll see that all instances of your button are updated automatically.



Click to see full-sized image.

2. Then, go to your component panel. All instances of your button are available to be dragged into any part of your design.



Click to see full-sized image.

3. Also, because we've used this naming convention, we can now swap out any button for an alternative instance/theme. To see this in action, drag in one instance of the button, then go to "Instance" in the design panel, select any instance you need, and it changes immediately.

Click to see full-sized image.

Working within the framework of components allows us to quickly and efficiently manage our buttons across all areas of our design. Best of all, it doesn’t just work with buttons, it works with UI components of all types.