How to Build a Versatile Button Component in Figma
In this post, we will guide you on how to build a versatile button component in Figma with interactions, utilizing the latest updates to component properties.
Icon System
We must construct the icon system before taking on the button content. For this tutorial, we used Font Awesome’s icon system to create icon components that become text layers enclosed in frames. Instead of having a set of icon components to switch between, you can copy and paste the text to get the desired icon. A cheat sheet is available to help with this process. We recommend storing frequently used icons in the design system for easy access.
The widths of the different icons can vary, so the text layer needs to be set to hug content horizontally, and the parent frame wrapping it should be set to fixed width horizontally to ensure that all icons take up the same amount of space.
The icon component includes different font sizes to match the various button sizes.
Button Component
To get started, you will need to set the label and text layer of the icon as a content property. The first step in creating the button component is to create a base component named ‘.Button’. Then, apply the component properties to it. Finally, create instances of the base button component for the real button variants. The goal is to have three variations of the button component, each with unique features:
- A button with only a label
- A button with only an icon
- A button with both label and icon
Adjustments
When adjusting the padding, dimensions, and icons, it is necessary to ensure that the padding on the left and right sides of the button are equal. This adjustment will prevent an imbalanced design and shape.
When the button does not have a label, we want it to be square, with the icon perfectly centered. For this, the icon width needs to be set at 12px.
The icon frame is set to fixed width. That means that even if the icon is wider, the button will not change in size.
This button component system consists of three nested components, each with its own set of 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
Furthermore, you will be able to access and change the nested properties from the top level.
If you want to learn a common mistake in building an interactive component, go to Perpetual’s website to read the full blog post.
Finished Product
This tutorial shows how to create a functional button component in Figma using the latest updates to component properties. By utilizing boolean properties, three types of buttons were made: one with just a label, one with only an icon, and one with both a label and an icon. The final product is customizable and should resemble the video provided.
If you are a business needing help with building design systems, we invite you to explore our design services. Contact us today and let’s start building your next project together!
