TL;DR
- Figma’s four core tools: Frame (F), Rectangle (R), Text (T), Move/Select (V).
- Auto Layout (Shift+A) is the single most important feature to learn early — it makes frames resize and reflow automatically.
- Components (Cmd/Ctrl+Alt+K) and Styles keep designs consistent and make global edits a one-click fix.
Figma’s free Starter plan is enough to learn everything below — you don’t need a paid plan to work through this. Here’s the order that actually makes sense when you’re starting from zero.
1. Create a file and understand the canvas
Figma opens to an infinite canvas. Frames (not “artboards”) are the containers everything lives in — press F and drag to create one, or pick a preset size (like 1440×1024 for desktop) from the right panel.
2. Learn the four tools you’ll use constantly
Frame (F), Rectangle (R), Text (T), and the Move/Select tool (V). Everything else in Figma is a variation or combination of these four.
3. Understand layers and grouping
Every object you draw appears in the Layers panel on the left. Group related objects (Cmd/Ctrl+G) to move and style them together — this becomes essential once a design has more than a handful of elements.
4. Build your first component
Select any object or group and press Cmd/Ctrl+Alt+K to turn it into a component. Components are reusable, and editing the original (the one with the diamond icon) updates every copy (instance) at once.
5. Use Auto Layout for anything that needs to resize
Select a frame and press Shift+A to apply Auto Layout. It turns a static frame into a flexible container that reflows automatically when content changes — the single most useful Figma feature for building real interfaces.
6. Style with local styles, not one-off values
Save colors, text styles, and effects as reusable Styles (in the right panel) instead of manually re-entering hex codes. This is what makes global changes — like a brand color update — a one-click fix instead of hunting through every layer.
What to practice next
Once these six are comfortable, the next useful skill is building a small design system — a shared set of components and styles for one project. See our design systems 101 guide for that next step.
FAQ
Is Figma free to learn on?
Yes, the free Starter plan supports up to 3 files and includes every feature covered in this guide, including Auto Layout and components.
What’s the difference between a frame and a group in Figma?
A frame is a container that can clip content and use Auto Layout; a group is just a loose collection of objects moved together with no layout behavior. Use frames for anything that needs structure.
Do I need to learn Auto Layout as a beginner?
Yes — it’s the feature that separates static mockups from designs that actually behave like real interfaces, and it’s used constantly in professional Figma files.