Design and 3D

How to learn Figma from scratch

Figma is an interface design editor that runs in the browser and lets several people edit one file at the same time. The basics take a couple of weeks, and confident work with auto layout and components takes a month or six weeks of practice. This article is about the tool: which features to learn and in what order.

Updated
In this article

What Figma does and what it will not do for you#

Figma gives you a canvas, shapes, text, components, prototypes and collaboration. It does not decide where a button belongs on the screen or which typeface to use for a heading — that is the job of web design as a discipline. If you are learning design from zero, learn Figma alongside the basics of composition and typography, described in how to learn web design: without them the tool quickly runs into the question "what do I draw?".

The free plan and a browser are enough to start; there is also a desktop app. The interface and feature names change from time to time, so check the official help centre rather than relying only on videos from a year ago.

Step 1: the canvas, frames and layers#

The first thing to understand: a frame is not just a rectangle but a container that other elements live inside; app screens are frames. Learn to create frames of the right size from the device presets, group and rename layers, and align and distribute objects. Learn the shortcuts for frequent actions right away: frame (F), rectangle (R), text (T), move (V), scale (K). A good exercise is to recreate a screen of your favourite app exactly, comparing it by placing a screenshot on top.

Step 2: auto layout#

Auto layout turns a frame into a flexible block: the elements inside line up in a row or column with set spacing, and the size adapts to the content. This feature is what separates a design you can change from a picture. Build a button that stretches to fit its label, then a product card, then a list of cards. The check: change the button text to something twice as long — nothing falls apart.

Step 3: components, variants and properties#

A component is a master element whose copies (instances) update along with it. Make a button component, then combine its states — default, hover, disabled — into a set of variants and add properties: the label, whether there is an icon, the size. Move components to a separate page of the file — that is the start of your own small design system.

Step 4: styles and variables#

Put colours, text styles, effects and grids into styles, and repeated values — spacing, corner radii, colours for light and dark themes — into variables. The check for this stage: you switch the theme of the whole design in one action, and not a single element is left with a hard-coded colour.

Step 5: prototyping and developer handoff#

Link screens with transitions, add simple animations and overlays, and show the prototype to a friend on their phone. Then look at the design through a developer's eyes: Dev Mode shows sizes, spacing and style values. Neatly named layers and components save a team hours.

How to practise between the steps#

Each step sticks only if you use it on something real. Keep one small project running through all five steps — a habit tracker, a recipe app, a page for a local café — and rebuild it as you learn each new feature. Once a week open a file from Figma Community made by an experienced designer and take it apart: how the auto layout is nested, how the components are named, which values come from variables.

Common beginner mistakes#

  • Moving everything by hand without auto layout — such a design cannot be adjusted.
  • Copying elements instead of using components, then fixing the same thing in forty places.
  • Keeping hundreds of layers named "Rectangle 214" in the file.
  • Learning plugins before the core features.

Step-by-step plan

  1. Step 1 — frames, layers, shortcutsRecreate a screen of a well-known app exactly.
  2. Step 2 — auto layoutA button, a card and a list that survive long text.
  3. Step 3 — components and variantsA button with states and properties on a separate components page.
  4. Step 4 — styles and variablesColours, type and spacing from variables; switching the theme in one action.
  5. Step 5 — prototype and handoffA clickable prototype on a phone, tidy layer names for developers.

Start learning this in your own space

The plan goes into your repository: tick off stages, keep notes — the change history shows how far you have come.

Start the plan

Sources

Was this helpful?

More articles

Design and 3D How to learn Blender from scratch Blender is a free 3D graphics program with modelling, sculpting, materials, animation and rendering in one package. Beginners are put off by the interface and the sheer number of shortcuts, but within the first two or three weeks it becomes familiar. This article is about the program itself — how to find your way around it and in what order to work through its parts. Design and 3D How to learn 3D modelling from scratch The term 3D modelling covers very different work — from parts for 3D printing and engineering drawings to game characters and interior visualisation. Before learning a program, figure out which direction you need: it decides both the tool and the order of topics. Below is how to choose a path and how to get through the first months. Programming and IT How to learn Python from scratch Python is a good first programming language: code reads almost like text, and the standard library covers most everyday tasks. This plan takes you from installing the interpreter to your own scripts covered by tests in about four months, at roughly an hour a day. Design and 3D How to learn web design from scratch Web design is about how a person finds what they need on a page and does what they came to do. The design editor is only a pencil; what you actually learn is composition, typography, grids and working with users. Below is a six-month plan and a way to build a portfolio without clients. Programming and IT How to learn SQL from scratch SQL is the query language of relational databases. Developers, analysts, testers and managers who want to pull numbers themselves all need it. Basic queries take a few weeks to learn; working confidently with complex reports takes two or three months of practice. Below is the order of topics and ways to train on a real database. Programming and IT How to learn Linux from scratch Linux runs most servers, containers and countless devices, so developers, testers, analysts and system administrators all need the command line. The easiest way to learn it is not by reading lists of commands but by working in the terminal every day and solving small practical tasks. Below is a sequence of topics for two to three months.

More solutions

Programmer portfolio An employer looks at a portfolio for a couple of minutes. In that time they need to see what you can do, how you write code and whether you finish what you start. A few finished projects with clear READMEs and an honest history of the work show that best. Company knowledge base A company knowledge base rarely dies for lack of tools. It dies because nobody owns the pages and they quietly go out of date. Here is how to set up a base that has owners, a history and a clear way to change it. Confluence alternative Confluence keeps documentation as pages inside spaces. In Skillok documentation is a set of markdown files in a repository, and you work with it the way you work with code — edit, history, review. That is stricter and more transparent, but there is no visual page builder and no real-time co-editing.