
Micah Bowers
Micah helps businesses craft meaningful engagement through branding, illustration, and design.
In Figma, UI Components are all-powerful and unbelievably versatile, but how do they work? We demonstrate their power by focusing on one of the most common UI elements of all—the button.
In Figma, UI Components are all-powerful and unbelievably versatile, but how do they work? We demonstrate their power by focusing on one of the most common UI elements of all—the button.
Micah helps businesses craft meaningful engagement through branding, illustration, and design.
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.
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.
To make the button interactive, we’ll add a focus ring.
This is how our button, in its most simple form, will look in a focused 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.
Now we must add layout constraints to each element of our button.
Let’s see how our button works with a longer button label.
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.
With our button default in place, let’s create primitives of our hover and focus states.
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.
Now, we’ll create stylistic variations.
You can use this same process for any number of themes that you need in your design.
Once you’ve made all of your themes, take a second to observe just how powerful working with components can be.
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.
Figma is an online design tool that allows designers and design teams to work collaboratively. Designers can use the Figma app as a mockup tool for a variety of digital product deliverables. Also, because Figma is a browser-based design tool, designers can access work on any computer with an internet connection.
It’s hard to definitively state which design software is better because every designer and design team has different needs and workflow preferences. That said, Figma has been lauded for its collaborative features which allow designers, developers, and stakeholders to build and refine digital products together.
Designers and design teams using multiple design platforms are in luck because Figma allows for easy exporting of single objects, entire frames, and full project files. In many cases, objects may be dragged from Figma into another program, or they may be copied as SVG and pasted directly into the other program.
Yes. Any object in your Figma prototype (buttons, icons, etc.) may be exported into Sketch. SVG files can be dragged directly from Figma into Sketch. There’s also an option for exporting an entire design file from Figma to Sketch. From your Figma file, simply go to File > Save as .fig file.
Figma, based in San Francisco, was founded in 2012 by former Brown University students Evan Wallace and Dylan Field. Wallace and Field believed that in order for design to be truly collaborative, it needed to take place on the web (as opposed to the isolation of individual computers).
World-class articles, delivered weekly.
World-class articles, delivered weekly.
Join the Toptal® community.