How to use Figma: build your first design in an afternoon

The short answer

An afternoon is enough to build a real screen in Figma. The path: frame, shapes and text, auto layout, components, prototype.

Skip auto layout and you will fight the tool forever. Learn it in the first hour and everything after it is easier.

The interface in sixty seconds

• Toolbar (top left). Move, frame, shape, pen, text, comment.
• Layers panel (left). Everything in your file, nested. Also where pages live.
• Canvas (middle). Infinite. You will end up with dozens of frames side by side.
• Design panel (right). Properties for whatever is selected: size, position, fill, stroke, effects.
• Tabs (top right). Design, Prototype, Inspect.

Shortcuts worth learning immediately: F for frame, R for rectangle, T for text, V for move, Shift+A for auto layout.

Step 1: a frame

Press F, then choose a device size in the right panel (a phone size is a good start). A frame is a screen, and everything inside it moves and clips with it.

Do not design loose on the canvas. Everything goes in a frame.

Step 2: shapes and text

Press R for a rectangle, drag it out. Set a fill color in the right panel, add a corner radius, drop a shadow.

Press T, click, type. Set the font, size, weight and line height on the right.

That is a card. Two elements, and already something recognizable.

Step 3: auto layout, the important one

Select your rectangle and text, then press Shift+A.

They are now in an auto layout frame, which means:

• They line up with consistent spacing you set once.
• The frame resizes when the content changes.
• Adding a third element pushes the others along rather than overlapping them.

Set the direction (horizontal or vertical), the gap between items, and the padding around the edges. Then change the text to something longer and watch the card resize instead of breaking.

This is the feature that makes Figma feel like a design tool rather than a drawing app. Figma's help center has a detailed guide if you want to go deeper today.

Step 4: components

Select your card, right-click, Create component (Ctrl+Alt+K).

Now copy it three times. Change the master's background color and all three copies change with it. Each copy can still have its own text.

This is how real design systems work: build the button once, use it two hundred times, change it in one place.

The gap between a beginner Figma file and a professional one is not visual polish. It is whether the file was built out of components with auto layout, or drawn by hand and impossible to change.

Step 5: prototype it

1. Duplicate your frame so you have two screens.
2. Change something on the second one.
3. Switch to the Prototype tab.
4. Select a button on screen one, drag the blue connector to screen two.
5. Choose the interaction (On click, Navigate to).
6. Press the play button.

You now have a clickable prototype you can send as a link. That is the artifact most design work is actually judged on.

Your afternoon project

Rebuild a screen from an app you use daily. Not from imagination, from the real thing on your phone.

It is the best beginner exercise because you keep hitting specific gaps: how do I round only two corners, how do I make this list scroll, how do I get consistent spacing. Each gap is a five-minute lookup and it sticks, because you needed it.

Five habits that make files usable

• Name your layers. "Rectangle 47" helps nobody.
• Use styles for colors and text, so changes are global.
• Auto layout everything that could ever change size.
• Keep one page per topic, not eighty frames on one canvas.
• Use the free plan until you know you need more. The pricing page sets out the limits, and there is a breakdown of the plans here.

When Figma is the wrong tool

Photo editing belongs in Photoshop. Complex illustration belongs in Illustrator. Print production belongs in neither of the above. Figma is for interfaces, and it is excellent at that one job.

Where to learn the rest

The UX/UI design course covers components, auto layout, prototyping and the design thinking that decides whether the screen is any good. There is also a primer on what Figma is for if you are still deciding.

One subscription opens the whole Graphic Design & Illustration school.

Frame, auto layout, component, prototype. Four ideas, one afternoon.