Figma Tutorial for Beginners (Free, Step by Step)

Figma is a free browser-based design tool for UI, websites, and graphics. Sign up free at figma.com, create a new design file, then use the frame tool to set a canvas, the shape and text tools to build, and the Export panel to save your work. It runs in the browser — nothing to install.

What is Figma, and who is it for?

Figma is a vector design tool for interface and product work: app screens, websites, dashboards, and design systems. You place real, editable elements on a canvas, position them precisely, then turn them into a clickable prototype. It is not the same job as Canva or Photoshop:

Choose Figma when you need precise layout, reusable elements, or a prototype a developer can inspect. For template-first graphics, see how to use Canva. For photo retouching, see how to use Photoshop.

Getting started

1. Go to figma.com and click Get started for free.
2. Sign up with an email address or a Google account, then confirm your email.
3. On the file browser, click + New design file. You land on an infinite canvas.

What the free Starter plan actually includes

Figma’s free Starter plan covers most individuals starting out:

• Unlimited drafts (personal files only you can see).
• Up to 3 Figma Design files you can share and collaborate on with other people (max 3 pages per file; FigJam and Slides have their own 3-file limits).
• All core design tools: frames, shapes, text, components, auto layout, and prototyping.
• Starter UI kits and community templates you can duplicate.

So it is not “unlimited everything” — the limit is on shared Figma Design files, not drafts.

The interface tour

When a file opens, these four areas are all you need:

The keyboard shortcuts in the toolbar are worth memorising early: V (move), F (frame), R (rectangle), O (ellipse), T (text), H (hand tool).

Your first design, step by step

1. Create a frame. Press F, then in the right panel pick a preset such as Desktop – 1440 or iPhone 14. Click on the canvas to place it. A frame is a fixed-size canvas — think “one screen.”
2. Draw a shape. Press R and drag inside the frame to draw a rectangle. This becomes a button or a card.
3. Add text. Press T, click inside the frame, and type a heading. Drag the text box’s corner handle to resize it.
4. Move and resize. With the Move tool (V), drag an object to reposition it. Hold Shift while dragging a corner handle to resize proportionally.
5. Align objects. Select two or more objects (Shift-click each), then use the align buttons at the top of the right panel to align or distribute them evenly. Figma also shows red guides when edges line up.
6. Set colours and styles. With an object selected, click the Fill swatch in the right panel, paste a hex code (like #1A73E8), or pick from the colour wheel. Set Stroke the same way.
7. Create a colour style. Click the four-dot Styles icon next to Fill, choose +, and name it (e.g. “Brand Blue”). Reuse it anywhere so your palette stays consistent.

That loop — frame, shape, text, align, colour — is 90% of everyday Figma work.

Components: build once, reuse everywhere

A component is a reusable element. Design a button once, turn it into a component, and every copy stays linked to the original.

1. Select the object (or group), then press Ctrl + Alt + K (Windows) or Cmd + Option + K (Mac), or click the Create component icon in the toolbar.
2. The original becomes the main component (marked with a purple diamond).
3. Each copy is an instance. Edit the main component and every instance updates at once.

Change the button’s colour once and all 40 buttons change together. To customise one instance without breaking the link, use overrides (change its text or colour in the right panel).

Auto layout: elements that resize themselves

Auto layout makes a group behave like a flexible container. Instead of positioning each child manually, you set a direction (horizontal or vertical), padding, and a gap — and the container grows, shrinks, and re-flows as content changes.

1. Select a group of objects.
2. Press Shift + A, or click Add auto layout in the right panel.
3. Set the direction (row or column), gap between items, and padding around the edges.

Now if you type a longer label, the button widens instead of overflowing. Auto layout powers responsive UI and pairs naturally with components — most real buttons are a component plus auto layout.

Prototyping: make it clickable

A prototype links your frames together so you can click through them like a real app.

1. Switch to the Prototype tab in the right panel.
2. Select an element (say, a button), then drag the small + node to the frame you want it to open.
3. Choose a trigger (On click) and an animation (Instant or Smart animate).
4. Click the Present play button (top right) to preview. Click the button and it jumps to the next screen.

Sharing, collaborating, and exporting

• Share: click Share (top right), enter a teammate’s email, set Can view or Can edit, and send. Everyone edits the same live file.
• Comment: press C, click anywhere, and leave a note.
• Export assets: select a frame or object, scroll to Export in the right panel, click +, choose PNG, JPG, SVG (best for icons and logos), or PDF, pick a scale, then click Export.

Common beginner mistakes

• Designing on the canvas instead of in a frame. Objects outside a frame aren’t exported and don’t prototype.
• Resizing with the Move tool’s scale. Dragging a corner in Move mode scales and can distort text. Use the size fields in the right panel instead.
• Never using components. Copy-pasting buttons by hand means every edit is manual.
• Ignoring auto layout. Manually spaced rows break the moment text changes length.
• Deleting the main component. Instances need it; delete the master and the copies lose their link.

FAQ

Is Figma free?

Yes — the free “Starter” plan includes unlimited drafts, up to 3 Figma Design files you can share, all core design tools, and access to community templates and starter UI kits. It’s enough for most individuals.

Do I need to install Figma?

No. It runs in the browser. There’s also a desktop app if you prefer, but files are identical.

Is Figma hard for beginners?

It has a steeper learning curve than Canva because you build from a blank canvas, but frames, shapes, and text take under an hour to learn.

What is a frame in Figma?

A frame is a fixed-size canvas (like a phone screen or desktop window). Frames define your design’s boundaries and are what you export.

What’s the difference between a component and a group?

A group is just several objects moved together. A component is a reusable master element whose copies (instances) update whenever you edit the master.