Skip to content
Design Academy My progress

Stage 5 · Core · Beginner

Figma and design tools

Learn the concepts behind professional design tools, taught through Figma.

  • 14 lessons
  • about 7 h 50 min of reading and practice
  • all written
Start this course

Progress is saved in this browser.

About this stage

Tools change every year; the concepts behind them change slowly. This stage teaches frames, constraints, auto layout, components, variables and prototyping as ideas first, then shows how they work in Figma.

Figma updates its interface often, so lessons describe what features do and link to Figma's official help centre for the current menu locations instead of relying on screenshots that go out of date.

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

  1. Figma interface and file organisation

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

    Reading 30 min

  2. Frames, shapes, text, images and constraints

    The basic objects and how constraints control resizing.

    Reading 35 min

  3. Auto layout

    Building layouts that resize with their content.

    Reading 45 min

  4. Components and component properties

    Reusable elements and the properties that configure them.

    Reading 40 min

  5. Variants and reusable patterns

    Grouping component states and sizes.

    Reading 35 min

  6. Variables and design tokens

    Storing colours, spacing and modes as reusable values.

    Reading 40 min

  7. Colour and typography styles

    Shared styles for text, colour and effects.

    Reading 25 min

  8. Responsive and adaptive layouts

    Designing layouts across breakpoints in a tool.

    Reading 35 min

  9. Prototyping and interactions

    Linking screens and adding realistic interactions.

    Reading 40 min

  10. Interactive states

    Hover, focus, pressed and disabled states in prototypes.

    Reading 30 min

  11. Libraries and team collaboration

    Sharing components, branching and commenting.

    Reading 30 min

  12. Handoff, annotations and developer communication

    What developers need and how to give it to them.

    Reading 35 min

  13. Design system organisation

    Structuring a library file.

    Reading 30 min

  14. Efficient naming and file hygiene

    Naming conventions that scale.

    Reading 20 min

Practise with a project

Project 1Beginner

Improve a local service business website

Redesign the website of a small home-services business so local customers can understand the services, trust the business and request a booking.

  • 3 to 4 weeks part-time
  • 7 milestones
  • 8 deliverables

Progress is saved in this browser.