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.įigma is an online design tool that allows designers and design teams to work collaboratively.We'll be using 'Sign Up' for this tutorial. We'll start by creating a new frame and renaming it Buttons in the layers panel.Task 1: Build a Basic Figma Button Component *Editor’s Note: This written tutorial was derived from a video tutorial created by David Luhr of Build UX.

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.

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.īuttons are brimming with variables like height, width, label length, internal padding, state, and theme.

The parent frame alignment is set to the right.In Figma, UI elements are called Components.

How does the button stay pinned to the corner?

The image and text box both use the resizing behavior 'fill container' for their widths, so they can be dynamic and fill the amount the space given.

How do the image and text box stretch when the parent frame size changes?

The text box resizing behavior for the height is set to 'hug contents' so it will expand when content is added/removed/resized.

The parent frame resizing behavior for the height is set to 'hug contents' so it will expand when content is added/removed/resized.The parent frame direction is set to 'vertical' so the card will grow longer, rather than wider.How does the card grow longer when more text is added? They can be simple with only a few objects inside, or more complex with multiple nested auto layout frames inside. Auto Layout allows cards to have responsive sizing for different devices and varying amounts of content. Cards are another great use case for Auto Layout.

Space between buttons on resize