Figma for Non-Designers

The interface, files and the handful of tools and shortcuts you will use every day.

1. The interface in fifteen minutesCanvas, layers, properties panel and the toolbar, with the eight shortcuts worth memorising on day one.15 min · free preview · worked example · exercise
2. Frames, shapes and textThe building blocks of every design, and how frames differ from groups in ways that matter later.14 min · worked example
3. Sharing, comments and version historyHow to get feedback without exporting screenshots, and how to recover from mistakes.10 min · worked example · exercise
4. Module quiz4 questions with explanations

Constraints and auto layout, the two features that turn static pictures into designs that adapt.

1. Constraints and resizingHow to make elements stay put, stretch or pin when a frame changes size.12 min · worked example
2. Auto layout from zeroBuild stacks, rows and cards that reflow automatically when content changes.20 min · worked example · exercise
3. Designing one screen for desktop and mobileCombine constraints, auto layout and wrapping to make a layout that works at two widths.16 min · worked example
4. Module quiz4 questions with explanations

Use the design system your team already has, build small components of your own, and avoid breaking either.

1. Working inside an existing design systemFind, insert and customise library components and styles without detaching them.15 min · worked example · exercise
2. Building your own components and variantsTurn repeated elements into components with variants and properties so edits happen once.18 min · worked example
3. On-brand social graphics and slidesSet up templates for the recurring graphics you produce, and export them correctly for each channel.14 min · worked example · exercise
4. Module quiz4 questions with explanations

Make designs clickable, run a quick usability check, and hand work to engineers in a form they can use.

1. Your first clickable prototypeConnect frames with interactions, choose transitions, and share a prototype link people can tap through.16 min · worked example
2. A five-person usability checkPut the prototype in front of five people and learn what is confusing before anyone writes code.13 min · worked example · exercise
3. Handing off to engineersWhat developers need from a Figma file, and how to prepare a design so it can be built without ten questions.12 min · worked example
4. Module quiz4 questions with explanations