Figma — Fundamentals to Mastery Handbook

How to work through this book

Read the chapter before attempting the exercise. Treat unfamiliar words as instructions to investigate, not as words you must already know. For code, enter the source exactly; confirm the output; make one change and predict how the result will change. When you see a result labeled Expected output, it must be run inside the corresponding installed framework or design tool—it is not evidence that the static HTML page executed that code.

Each course’s 145 lesson pages remain in the archive. This new handbook adds curated progression and worked code checkpoints, but it does not replace a detailed line-by-line rewrite of every existing draft chapter.

Level 1 — Absolute Beginner

Chapters 1–24. Your goal is to move from recognizing features to independently producing reliable work.

What you must actually be able to do

1. Files and pages
2. Frames
3. Layers
4. Shapes and text
5. Colors and styles
6. Alignment
7. Constraints
8. Exporting images
9. Commenting

Build a project, not just notes

Level project: A simple mobile profile screen. Start with a minimum working feature, add realistic test data, record a visible result, and correct at least one failure. Keep source files and a short explanation of decisions.

Worked code example: A clear design handoff specimen

Read the source first; then inspect the output immediately underneath.

<!doctype html><html lang="en"><meta charset="utf-8"><style>
body{font-family:system-ui;padding:1rem}.card{border:1px solid #8badd9;border-radius:12px;padding:16px;max-width:320px}
button{background:#1355ae;color:white;border:0;border-radius:8px;padding:12px 16px}
</style><div class="card"><h2>Study Planner</h2><p>Three tasks due this week.</p><button>View tasks</button></div></html>

Download this source example

Live browser output (executed from the source above)

Prove you understand this level

1. Explain in your own words what input the project receives, how the feature processes it, and what the user sees.
2. Change one requirement without copying the solution. Explain what you changed and why.
3. Test empty, invalid and unexpected inputs. For UI work, test keyboard use and small screens.
4. Save a screenshot or console/test result proving what the real application did.

Chapter-by-chapter reading order

Level 2 — Beginner

Chapters 25–48. Your goal is to move from recognizing features to independently producing reliable work.

What you must actually be able to do

1. Auto layout
2. Hug and fill
3. Components
4. Variants
5. Interactive components
6. Design tokens
7. Variables
8. Prototyping
9. Handoff basics

Build a project, not just notes

Level project: A responsive app landing screen. Start with a minimum working feature, add realistic test data, record a visible result, and correct at least one failure. Keep source files and a short explanation of decisions.

Prove you understand this level

1. Explain in your own words what input the project receives, how the feature processes it, and what the user sees.
2. Change one requirement without copying the solution. Explain what you changed and why.
3. Test empty, invalid and unexpected inputs. For UI work, test keyboard use and small screens.
4. Save a screenshot or console/test result proving what the real application did.

Chapter-by-chapter reading order

Level 3 — Intermediate

Chapters 49–72. Your goal is to move from recognizing features to independently producing reliable work.

What you must actually be able to do

1. Nested component systems
2. Component properties
3. Variable collections
4. Modes
5. Prototype flows
6. Developer handoff
7. Accessible colors
8. Responsive systems
9. Design QA

Build a project, not just notes

Level project: A working mobile checkout prototype. Start with a minimum working feature, add realistic test data, record a visible result, and correct at least one failure. Keep source files and a short explanation of decisions.

Worked code example: Stretch content with Auto Layout

Read the source first; then inspect the output immediately underneath.

<!doctype html><html lang="en"><meta charset="utf-8"><style>
.list{display:flex;flex-wrap:wrap;gap:10px;border:1px solid #aac;padding:14px}
.tag{padding:6px 12px;border-radius:8px;background:#dbeafe;font:14px system-ui}
</style><div class="list"><span class="tag">Wireframe</span><span class="tag">Prototype in progress</span><span class="tag">Testing</span></div></html>

Download this source example

Live browser output (executed from the source above)

Prove you understand this level

1. Explain in your own words what input the project receives, how the feature processes it, and what the user sees.
2. Change one requirement without copying the solution. Explain what you changed and why.
3. Test empty, invalid and unexpected inputs. For UI work, test keyboard use and small screens.
4. Save a screenshot or console/test result proving what the real application did.

Chapter-by-chapter reading order

Level 4 — Advanced

Chapters 73–96. Your goal is to move from recognizing features to independently producing reliable work.

What you must actually be able to do

1. Multi-step prototypes
2. Interaction flows
3. Advanced auto layout
4. Team libraries
5. Version history
6. Design critique
7. Localization
8. RTL
9. Usability testing

Build a project, not just notes

Level project: A multilingual product dashboard prototype. Start with a minimum working feature, add realistic test data, record a visible result, and correct at least one failure. Keep source files and a short explanation of decisions.

Prove you understand this level

1. Explain in your own words what input the project receives, how the feature processes it, and what the user sees.
2. Change one requirement without copying the solution. Explain what you changed and why.
3. Test empty, invalid and unexpected inputs. For UI work, test keyboard use and small screens.
4. Save a screenshot or console/test result proving what the real application did.

Chapter-by-chapter reading order

Level 5 — Professional

Chapters 97–120. Your goal is to move from recognizing features to independently producing reliable work.

What you must actually be able to do

1. Enterprise component libraries
2. Governance
3. Design-to-code parity
4. Research integration
5. Complex states
6. Documentation
7. Handoff QA
8. Variables automation
9. Stakeholder review

Build a project, not just notes

Level project: A shared company design system. Start with a minimum working feature, add realistic test data, record a visible result, and correct at least one failure. Keep source files and a short explanation of decisions.

Prove you understand this level

1. Explain in your own words what input the project receives, how the feature processes it, and what the user sees.
2. Change one requirement without copying the solution. Explain what you changed and why.
3. Test empty, invalid and unexpected inputs. For UI work, test keyboard use and small screens.
4. Save a screenshot or console/test result proving what the real application did.

Chapter-by-chapter reading order

Level 6 — Expert / Mastery

Chapters 121–145. Your goal is to move from recognizing features to independently producing reliable work.

What you must actually be able to do

1. Design operations
2. Complex systems
3. Audit methodology
4. Accessible visual systems
5. Global collaboration
6. Migration strategy
7. Product metrics
8. Research synthesis
9. Portfolio

Build a project, not just notes

Level project: A production product-design audit and handoff. Start with a minimum working feature, add realistic test data, record a visible result, and correct at least one failure. Keep source files and a short explanation of decisions.

Worked code example: Accessible design tokens

Read the source first; then inspect the output immediately underneath.

<!doctype html><html lang="en"><meta charset="utf-8"><style>
:root{--brand:#144fa3;--on-brand:#fff;--space:16px}
button{background:var(--brand);color:var(--on-brand);border:0;border-radius:8px;padding:var(--space);font:1rem system-ui}
button:focus-visible{outline:3px solid #ec9500;outline-offset:3px}
</style><button>Save changes</button></html>

Download this source example

Live browser output (executed from the source above)

Prove you understand this level

1. Explain in your own words what input the project receives, how the feature processes it, and what the user sees.
2. Change one requirement without copying the solution. Explain what you changed and why.
3. Test empty, invalid and unexpected inputs. For UI work, test keyboard use and small screens.
4. Save a screenshot or console/test result proving what the real application did.

Chapter-by-chapter reading order

Finish line: evidence for mastery

A list of topics is not proof of expertise. Complete the six level projects, write a short design decision for each, demonstrate accessibility and error handling, measure performance when appropriate, and run the code in the actual framework. Invite someone else to use the result without your help, record what failed, and improve it.

References: For version-sensitive features, consult the official documentation. This handbook teaches original examples and does not copy third-party manuals.