Figma — Study Path Agent

Figma

130 topics across 6 chapters

Chapter 1

Fundamentals & Workspace

Getting started & file organization

3 subtopics

Teams, projects & files (starter setup)

Pages, sections & naming conventions

Import/export basics (PDF, PNG, SVG, .fig)

Navigation, selection & layers

3 subtopics

Pan/zoom, shortcuts & quick actions

Align/distribute & smart selection

Groups vs frames + layer organization

Vector drawing basics

3 subtopics

Shapes & boolean operations

Pen tool & vector editing (nodes/handles)

Strokes, joins, outlines & vector networks mental model

Text tools & basic typography

3 subtopics

Text properties & auto-size behaviors

Creating & applying text styles

Working with fonts (Google, local, variable fonts)

Responsive resizing with constraints

3 subtopics

Constraints (left/right/top/bottom/center/scale)

Resizing frames & the hug/fill/fixed mental model

Using layout grids for responsive structure

Chapter 2

UI Layout & Visual Design

Layout grids & spacing systems

4 subtopics

Create & tune layout grids (columns/rows/gutters)

Define a spacing scale (e.g., 4/8pt) and apply consistently

Align components to grids (baseline & optical alignment)

↗ Using layout grids for responsive structure (see Chapter 1)

Color, effects & imagery

3 subtopics

Build color palettes with contrast in mind

Effects (shadows, blur) and elevation systems

Images: fills, crop, masks and overlays

UI typography & hierarchy

3 subtopics

Define a UI type scale (headings/body/labels)

Line height, letter spacing, truncation & readability

Text styles across breakpoints and contexts

Iconography & illustration workflow

3 subtopics

Build an icon set (grid, stroke rules, corner radius)

SVG export settings & optimization for UI icons

Illustrations with vectors, blends and clipping

Accessibility basics for UI

3 subtopics

Contrast checking workflow (AA/AAA thinking)

Design accessible states (hover/focus/disabled)

Design for color blindness and general readability

↗ Responsive resizing with constraints (see Chapter 1)

Chapter 3

Components & Design Systems

Components & instances

3 subtopics

Create components, instances & overrides

Detach vs reset overrides (and common pitfalls)

Organize components with frames/sections and naming

Variants & component properties

3 subtopics

Variants and component sets (states, sizes, intents)

Component properties (text/boolean/instance swap)

Naming variant properties for scalability

Auto Layout essentials

3 subtopics

Build responsive buttons/cards with Auto Layout

Padding, spacing, alignment & gaps

Nesting, wrapping and common Auto Layout patterns

Styles, variables & tokens

3 subtopics

Color/text/effect styles (when to use styles vs variables)

Variables & modes (light/dark) basics

Using variables in prototypes (inputs, swaps, modes)

Libraries & publishing

3 subtopics

Publish a library and consume it across files

Versioning, updates and breaking changes

Permissions and library hygiene

Documentation & governance

3 subtopics

Component documentation pages (usage, do/don't)

Contribution workflow & review checklist

Audit and deprecate components safely

Chapter 4

Prototyping & Interaction

Prototype fundamentals

3 subtopics

Connect frames, flows and starting points

Prototype device settings, scrolling & overflow

Use sections to present user flows

Interactive components

3 subtopics

Interactive component states (hover/pressed/toggled)

↗ Using variables in prototypes (inputs, swaps, modes) (see Chapter 3)

Overlays and modal patterns (open/close, click outside)

Transitions & animation

3 subtopics

Smart Animate basics (matching layers, constraints)

Easing, durations and motion principles

Micro-interactions (hover, press, toggles) patterns

Testing, sharing & iteration

3 subtopics

Share prototype links + manage feedback loops

Run usability tests with prototypes (practical setup)

Track changes and iterate versions (design→test→revise)

Chapter 5

Collaboration & Handoff

Real-time collaboration

3 subtopics

Multiplayer editing etiquette and conflict avoidance

Permissions (view/edit) and link sharing strategy

Team structure and access control basics

Comments, reviews & approvals

3 subtopics

Commenting, mentions, and resolving threads

Review checkpoints and sign-off workflows

Presentations and stakeholder demos

Version history & branching

3 subtopics

Version history: naming, checkpoints, and restore

Branching/merging workflow for parallel work

Changelogs and release notes for design updates

Developer handoff (Inspect/Dev Mode)

3 subtopics

Inspect panel basics (CSS/iOS/Android values)

Dev Mode annotations & measurements workflow

Handoff checklist for engineers (assets, behaviors, states)

Export & asset delivery

3 subtopics

Export settings (formats, scales, naming)

Slices vs exportable layers/components (when to use which)

Asset naming conventions for build pipelines

100

FigJam collaboration

3 subtopics

101

Workshops: stickies, voting, timers, facilitation basics

102

Journey maps and user story mapping templates

103

Diagramming architecture and product flows

Chapter 6

Advanced & Productivity

104

Plugins & widgets

3 subtopics

105

Discover, install and manage plugins

106

Use plugins for content, icons, and accessibility checks

107

Build simple widgets (what they are and when to use them)

108

File performance & hygiene

3 subtopics

109

Reduce file size and page sprawl

110

Maintain layer naming & cleanup practices

111

Troubleshoot slow files and heavy components

112

Advanced design system operations

3 subtopics

113

Token strategy and variable governance

114

Theming with modes (multi-brand / light-dark)

115

Migrating and refactoring large libraries

116

Advanced prototyping patterns

3 subtopics

117

Complex flows (auth, onboarding, multi-step forms)

118

Simulate data states (loading/empty/error/success)

119

Motion system patterns across screens

120

Automation & API integrations

3 subtopics

121

Figma REST API basics (tokens, auth, rate limits concepts)

122

Automate exports and reports (assets, inventories, audits)

123

Connect design work to Jira/Slack/CI workflows (integration patterns)