Make one named static screen with supplied text, a button-shaped rectangle, and deliberate alignment.
Before you begin.
Optional guide. Finish Set up your Figma file first. Use Find your way around Figma if you cannot select a frame or text. Skip if you can already make and check this simple static screen.
Learn the concept.
A frame holds the screen. Text layers hold words, and a rectangle provides the visual shape behind a button label. Selection determines which settings you see. The result is static: a drawn button does not click or book anything.
Words to know.
Frame
The named container for the practice screen.
A boundary for content
Text layer
An editable item holding the heading, paragraph, or button label.
Editable words in a design
Rectangle
The shape behind the button label.
A four-sided shape
Static screen
A drawing of an interface; it has no working click behavior.
A drawing without click behavior
The idea in practice
See a worked example.
Start with the supplied class copy.
For exampleStart with “Find a pottery class,” “Choose a time that works for you,” and “View classes.”
Select text and align the repeated edges.
For exampleSelect the heading text layer to change its size. Align its left edge with the paragraph and rectangle.
Preview the static screen for clipped words.
For examplePreview Intro 08 — Class screen to check text fit. The drawn View classes control is static.
