Figma and design tools

About this stage

Before this stage Stage 1: Visual design fundamentals

Learning outcomes

• Organise a Figma file with pages, frames, naming and sections that others can navigate.
• Build responsive layouts with auto layout and constraints.
• Create components with properties and variants, and use variables for tokens.
• Prototype a realistic flow and hand off a design with clear annotations.

Lessons

The lessons in this stage are being written. Lessons marked “In writing” are listed so you can see the full scope; they are never counted towards your progress. The resource library and glossary cover these topics in the meantime.

1. 1

   Figma interface and file organisation In writing

   Pages, frames, layers and a file structure teammates can understand.

   In writing 30 min
2. 2

   Frames, shapes, text, images and constraints In writing

   The basic objects and how constraints control resizing.

   In writing 35 min
3. 3

   Auto layout In writing

   Building layouts that resize with their content.

   In writing 45 min
4. 4

   Components and component properties In writing

   Reusable elements and the properties that configure them.

   In writing 40 min
5. 5

   Variants and reusable patterns In writing

   Grouping component states and sizes.

   In writing 35 min
6. 6

   Variables and design tokens In writing

   Storing colours, spacing and modes as reusable values.

   In writing 40 min
7. 7

   Colour and typography styles In writing

   Shared styles for text, colour and effects.

   In writing 25 min
8. 8

   Responsive and adaptive layouts In writing

   Designing layouts across breakpoints in a tool.

   In writing 35 min
9. 9

   Prototyping and interactions In writing

   Linking screens and adding realistic interactions.

   In writing 40 min
10. 10

    Interactive states In writing

    Hover, focus, pressed and disabled states in prototypes.

    In writing 30 min
11. 11

    Libraries and team collaboration In writing

    Sharing components, branching and commenting.

    In writing 30 min
12. 12

    Handoff, annotations and developer communication In writing

    What developers need and how to give it to them.

    In writing 35 min
13. 13

    Design system organisation In writing

    Structuring a library file.

    In writing 30 min
14. 14

    Efficient naming and file hygiene In writing

    Naming conventions that scale.

    In writing 20 min

Practise with a project