Learn Figma in 5 minutes.
Figma is the shared canvas where teams design interfaces, and its AI features now draft layouts, rename layers, and prototype from a prompt. Your five minutes go to reading a design file well and using AI to get to a first draft faster.
Atlas is taking you through this one. Your docent for this room. Free, and it runs right here.
Lesson not loading? Open it in a new tab. It is the same free lesson either way.
Frames, components, and the prompt
A Figma file is a set of frames built from reusable components. AI features sit on top: they generate, rearrange, and clean up, but the output is still frames and components you can edit by hand.
One screen, one frame
Every screen or artboard is a frame. Auto layout inside a frame makes elements flow like a web page instead of sitting at fixed pixels.
Design it once
A button defined as a component updates everywhere it is used. Design systems are just libraries of components with variants.
From prompt to editable draft
Figma's AI can generate a first pass of a screen or a working prototype from a description. Treat it as a draft to edit, and check it against your components.
What you will do in the lesson
You answer and try things. Nobody demonstrates at you for five minutes.
- Read a design file. You open a real file, find the frames, and tell which elements are components and which are one-offs.
- Generate a first draft. You describe a settings screen and see what the AI produces, then list what you would change.
- Fix it with auto layout. You take a draft with fixed positions and make it reflow when the text gets longer.
- Swap in your components. You replace generated buttons with the library ones so the draft matches the system.
- Prototype one flow. You end by wiring two screens together and clicking through as a user would.
Before you start
Is Figma free?
There is a free plan for individuals with limits on files and some AI features. Teams pay per editor.
Do I need to be a designer?
No. The lesson is about reading and adjusting designs, which product managers, engineers, and founders do daily.
What is Figma Weave?
Figma's newer AI work on generating and editing designs from prompts and references. The lesson uses the generate-and-edit loop that applies regardless of the feature name.
Can I export to code?
Figma exposes styles and layout to developers and to code-generating tools. The design is the source of truth; the export is a starting point.
Other tools people learn next
Same format, same five minutes, still free.
Learners from these organizations are already learning on 
