Text and Shape Layers

Use text and a rectangle to make a button element.

Graphical user interfaces are composed primarily of text and rectangles. Let’s make a foundational UI element: a button.

I’ll start by drawing a rectangle shape. I can click on the rectangle tool in the toolbar, or I can use the keyboard shortcut R to more quickly switch to the rectangle tool. Figma generally shows available keyboard shortcuts for actions in its interface.

Next I’ll add a bit of text for the button. Let’s imagine I’m designing an email app, and I need a button labeled “Compose”. To add text, I’ll use the text tool, which I can access by clicking on its icon in the toolbar, or by using the keyboard shortcut T. To add text, click once, type out the text, and click again outside of the text area.

I can click and drag the elements on the canvas to move them around. I’ll move the text I just added to the center of the rectangle. Figma helps me by showing guides and snapping to them.

Notice that I now see two layers in the layer list, one for the rectangle, and one for the text. The order of these layers is meaningful. Layers higher on the list are drawn on top of layers lower on the list. If I rearrange the order, the text will disappear behind the rectangle. If I change the opacity (or transparency) of the rectangle, the text will be visible again. I’ll put the text back on top where it belongs.

With the text element selected, I can change the font, size, weight, and color of the text. If the text goes off center, I can drag it again and use the guides. With the rectangle selected, I can also change its color, and give it rounded corners to give a more button-like appearance.

And there we have it: a button made up of a text layer and a rectangle layer.

Up Next: Frames for UI Elements

See Also

Competencies

Explainers

Lessons

Resources

References

Talks

Tools

Articles