Optional Figma guide

Build a simple screen.

Try a frame, some text, and a shape in Figma.

Get the idea.

Words to know.

Frame

The container for one screen.

Property

A setting for an item, such as size or color.

Fill

The color inside a shape or letter.

A swatch is one small sample of a color. A palette is the group of colors you choose for a design. Here charcoal is used for words, yellow for the action, cream for the background, and olive and rust for supporting details.

Interaction

What happens when a person clicks, taps, or uses a control.

What to look for.

WHAT TO LOOK FOR

See it.
Say it.
Check it.

Use these prompts as you work through this lesson.

Check selection before every edit.

For exampleSelect the heading layer before changing its size.

Use a clear action label, such as “Book a class.”

For example“Book a class” tells the reader what the button offers.

Keep a picture of a button distinct from a working button.

For exampleA drawn rectangle with text is an example of a button; it does not book anything yet.