Figma Studio
Course 1 · Interaction & UI Design · Beginner

The Figma canvas — your first screen

New designers freeze at the blank canvas because Figma looks like an aircraft cockpit — but you only ever need four tools to build almost any screen, and everything else is something you discover later, not a prerequisite.

Choose your track

Read this module through your lens

New to design: ignore every panel except the four tools below — that is genuinely all you need today.

The cockpit is smaller than it looks

Open Figma for the first time and you see toolbars, panels, and dozens of icons. It feels like you must learn all of it before you can make anything. You do not. Almost every screen you will ever build is made of three kinds of thing — frames, shapes, and text — placed and arranged with a fourth tool, the move/select arrow.

A Frame is a container, the equivalent of an artboard or a screen. Rectangles are the boxes: buttons, cards, backgrounds, dividers. Text is your content. Move (the arrow, V) selects and repositions everything. That is the whole starter kit. Everything else in the cockpit — components, prototyping, plugins — is something you reach for later, when you have a reason.

So ignore the panels for now. The next slide is a simulated Figma editor. Build one button with four clicks and the blank-canvas fear is gone.

Build your first button

Follow the guided steps under the canvas: make a Frame, drop a Rectangle inside it, add a Text label, then turn on Auto layout. Click a tool, then click the canvas; selected items show their size in the Properties panel, exactly like real Figma.

select a tool, then click the canvas
Layers
— empty —
Properties
Nothing selected.
Step 1 / 4Every screen starts with a Frame (like an artboard). Click Frame (F), then click the canvas.

This is a model of the interface, not the real app — but Frame, Rectangle, Text, Move, and Auto layout are the real tools with the real shortcuts (F, R, T, V, Shift+A). The muscle memory transfers directly.

Frames are everything

The single most common beginner mistake is drawing shapes loose on the infinite canvas instead of inside a frame. It looks the same on screen, but it is not: a frame is what becomes a screen you can export, prototype, and hand off. Shapes outside a frame are just floating debris — they do not belong to any screen, they drift apart when you move them, and they make the file unreadable.

So the habit from day one: make a frame first, then build inside it. Press F, draw the screen (or pick a preset size like a phone), and everything you add lives in that container. Group related items (Cmd/Ctrl + G) so a button’s box and label move together.

And name your layers. “Rectangle 1 / Rectangle 2 / Frame 4” is a file no one can read, including future-you. “Search bar / Button / Home screen” is. Naming is not bureaucracy; it is how a design stays workable past the first hour.

Hands-on exercise

In the simulated canvas above, complete the guided sequence, then free-play: make a second frame and build a simple card (a rectangle plus two text labels). If you have real Figma open (it is free in the browser), do the same there with F, R, T — make a frame, add a rectangle and text, group them, and rename every layer.

Then write one sentence on why putting everything inside a frame matters for what comes next.

Second case · a search bar

The same lesson, a different object

first try

A beginner draws a rounded rectangle and types 'Search' next to it, both sitting loose on the grey canvas.

problem

Nothing is inside a frame, so there is no 'screen' to export, the text and box drift apart when moved, and the file has no structure a teammate can read.

fix

Make a Frame first, draw the rectangle inside it, place the text on top, and group them. Now it is a real component of a screen, moves as one, and exports cleanly.

Common failures · spot them fast

The failure gallery

1

Drawing shapes loose on the canvas instead of inside a frame

2

Zooming/panning lost — cannot find the artwork

3

Nudging pixels by hand instead of typing exact sizes

4

Leaving every layer named Rectangle 1, Frame 2 (unreadable file)

5

Hunting through panels for features you do not need yet

Each of these is caught by a quality gate — keep the cheatsheet open while you work.

Worked example

Watch the journey

▶ Screen-recording: building a frame, then a rectangle, then text inside it — the correct order, in real Figma. video slot · supplementary to the written core

The pattern

A screen is just frames that contain shapes and text. Learn Frame, Rectangle, Text, and Move, and you can build the vast majority of UI. The cockpit shrinks to four buttons.

Cheatsheet

Cheatsheet

Recipe & shortcuts
F = Frame (a screen / artboard) | R = Rectangle (boxes, buttons) T = Text (labels) | V = Move (select & move) Space + drag = pan | Cmd/Ctrl + scroll = zoom | Cmd/Ctrl + G = group
Failure modes
  • Drawing shapes loose on the canvas instead of inside a frame
  • Zooming/panning lost — cannot find the artwork
  • Nudging pixels by hand instead of typing exact sizes
  • Leaving every layer named Rectangle 1, Frame 2 (unreadable file)
  • Hunting through panels for features you do not need yet
Key operations
  • Create a frame (F) to hold a screen
  • Draw a rectangle (R) for a box or button
  • Add text (T) for a label
  • Select and move (V); zoom and pan to navigate
Quality gates
  • Is everything inside a frame, not loose on the canvas?
  • Can you create, move, and resize the four basic things without the menu?
  • Are your layers named so a teammate could read the file?
Workflow steps
  • Make a frame for the screen
  • Add shapes (rectangles) for structure
  • Add text for content
  • Arrange and name the layers
Next module
  • id_hierarchy_and_spacing — making a screen readable, not just present.

Reflection

Reflection card

Active retrieval — answer from memory before re-reading. Saved to this browser.

You've completed this module when…

  • Built a frame containing a rectangle and a text label in the interactive canvas (or real Figma).
  • Can name F / R / T / V and what each does.
  • Layers named meaningfully, nothing loose outside a frame.

Next: id_hierarchy_and_spacing — making a screen readable, not just present.

Finish — back to Interaction & UI Design →