Build a Flexible Button Component
Introduction
Figma provides a structured framework for building components of different design elements. This tutorial covers how you can effectively design button components utilizing auto-layout and component properties in Figma. Our final output at the end of this tutorial will be a customizable button component with interchangeable icons, sizes, labels, and more.
The Icon System
Before we build the button component, we must construct the icon component. For this tutorial, we used Font Awesome icon system, so icon components become text layers wrapped in frames. To get a different desired icon, we can copy-paste the text to the text layer instead of having a set of icon components and swapping instances. We have the frequently-used icons text layer content handy in the design system for easy copy-paste.
Font Awesome’s icon system makes icons a special kind of font
Since different icons have different widths, we need to set the text layer to hug content horizontally and the frame wrapping it to be fixed width horizontally so that all icons will take the same space.
The Button Component
We want to set the label and text layer of the icon as a content property. The button component consists of many variants, but all of them will share some common features. Instead of editing each variant individually, by having the Boolean component property on our base button, we can edit all the variants simultaneously. For example, we want to utilize component Boolean properties to get 3 types of buttons:
A button with only a label
A button with only an icon
A button with both a label and an icon
This approach of making the button component requires first creating a base button component, “.Button,” and then applying the aforementioned component properties to it. After this, we will make instances of this base button main component to be variants of the actual button component. When finished with this step, your Figma should look something like the image below.
Button Base Component with Component Properties
Since the icon will be a nested instance within the button, we can expose properties from the nested component. This approach will allow us to change the text layer of the icon from the button component level.
Adjusting the Padding, Dimensions, and Icons
With the boolean property applied, the amount of padding on the left and right sides of the button must be the same. Otherwise, the button will have different left and right padding when either the icon or label is hidden, resulting in an off-balanced design and shape like in the video below.
Keep the padding the same on both sides
When we turn off the label, we want to get a square button where the icon fits in appropriately. To achieve a perfect square, the width of the icon needs to be 12px for this component.
Calculation of the dimensions of the icon component inside the button component
Even if we have a really wide icon, since the icon frame is set to fixed width, it doesn’t make the button wider. In this design, the icon stays 12px wide no matter what size button we choose.
In this button component system, we have 3 levels of nested components, each level has its component properties:
Button - Variant property: Type, class, size, status
Button base - Boolean property: Show label, show icon; Content property: Label content
Icon - Content property: Icon content
We can expose properties from the nested component, so we could change the nested properties from the top level.
3-level button component
Designing an Interactive Component
A common mistake made while building an interactive button component is linking the resting state to the pressed state - while pressing. If this is the case, the pressed state for the button will not be triggered when the button is pressed in the prototype. The button stays in the hovering state even the pressing the button.
To resolve this issue with the pressed state, the hover state should be linked to the pressed state - while pressing. The reason for this approach is that the button is already in a hover state when the pressed state is triggered.
Interactive button component
Final Product
How to use the button component