Design
Figma for Beginners to Advanced
From the first frame to components, variants, and a shared file.
Figma for Beginners to Advanced is the longer Figma course. You start with frames and layout, then move to components, variants, and a file another person could open. It suits someone who wants the tool itself, not only a single app concept.
Course syllabus
01. Start
- Files, frames, and the canvas
Where things live, and how to move without losing them.
- A file with pages that mean something
Drafts on one page, the real screens on another.
- Frames instead of loose shapes
A screen has a frame. A scribble can stay outside it.
- Zoom and find your way back
The shortcut to the frame you were just on.
- Move a frame without losing its contents
Select the frame, not a layer inside it.
- A grid you can turn off
Layout help that does not become part of the design.
- Name the first frame
The screen's job, not 'Frame 1'.
- Duplicate a frame the safe way
A copy you meant to make, placed where you can see it.
02. Layout
- Auto layout
Stacks and spacing that survive a text change.
- A vertical stack
Items in a column with the same gap.
- A horizontal stack
A row, and what happens when a label gets longer.
- Padding you choose once
Inside the frame, the same on the sides unless there is a reason.
- Space between, not space by dragging
The gap is a number you can repeat.
- Nest a stack inside a stack
A card that is itself a row, inside a column of cards.
- Hug and fill
The frame wraps the content, or the content stretches to the frame.
- Break auto layout only on purpose
An absolute item is an exception you can explain.
03. Styles
- Colour, type, and styles
Decisions stored once and used everywhere.
- A small colour style list
Background, text, a line, and one accent.
- Name colours for their job
Text-primary, not 'blue 2'.
- Two text styles to start
A heading and a body. Add a third only when you need it.
- Apply a style instead of the picker
The next screen should not invent a new grey.
- Change the style and watch the file
One edit, many frames. That is the point.
- A colour that fails contrast
Swap it before you call the screen finished.
- Styles on a cover page
A small legend so the next person sees the set.
04. Components
- Components and variants
States of a button, a field, and a card.
- Make a component from a button
The main component lives somewhere you can find.
- Instances on the screens
The screens use instances. They do not each own a private button.
- Override the label
The text can change. The padding stays.
- A field component
Label, box, and hint, built as one.
- A card component
The pieces that repeat, and the piece that is allowed to change.
- Detach only when it is no longer that thing
If you detach everything, you do not have a system.
- Find the main component
Edit it once when every button should change.
05. Variants
- A variant is a state
Default, hover, disabled. Named, not copied as a new component.
- The property is a word
State, size, or type. One idea per property.
- Default and disabled on the button
Disabled is not a grey rectangle you drew beside it.
- A field with an error state
The border and the message, as a variant.
- Do not variant a whole screen
Variants are for a component, not for every page of the app.
- Swap variants in a flow
The prototype can move from default to error.
- A variant you do not need yet
Leave it out until a screen actually uses it.
- Name the variant so a developer can say it
The same words you would use in a conversation.
06. Sharing
- A file ready for someone else
Names, pages, and a prototype they can click.
- A prototype from the first screen
The start point is set. They do not land in the middle.
- Links you have checked
Every hotspot goes where you think it goes.
- A page called Cover
The name of the work and the flow, in one frame.
- Hide the scratch page
Drafts are not part of the handoff.
- A comment that asks a question
One note on the frame that is still undecided.
- Share with view access first
They can look. They cannot rearrange your components.
- A five-minute walkthrough
You click, they watch, you do not apologise for the grey boxes.
07. A last file
- Build one small flow with the system
Three screens, using only your components.
- Change a style and see the flow update
Proof that the screens are not painted by hand.
- Write the frame names as a sentence
Reading down the layers should tell the task.
- Remove a component nothing uses
A system is smaller than your experiments.
- Export one screen for a portfolio
The picture, and one sentence about the flow.
- What you can now open a year later
A file whose names still make sense.
Lecture videos stay with the course. Playback for enrolled students will open once payments are available. Video links are not published on this page.