Figma from Zero: Design and Prototype a Real App

What's inside

1. Level 1: The Figma Interface, Files and PagesFree
   Learners find their way around Figma's interface, create and organise a design file with pages, and learn that this course is independent of Figma and not endorsed by it.
2. Level 2: Frames, Device Presets and Layout GridsFree
   Learners use frames as screens and containers, pick mobile and desktop presets, and add layout grids to structure the project's first mobile screen.
3. Level 3: Shapes, Text and Images
   Learners add rectangles, ellipses, text layers and images to the mobile frame and edit their basic properties to block out the screen's content.
4. Level 4: Layout Principles: Alignment, Spacing, Hierarchy
   Learners apply alignment, consistent spacing, visual hierarchy and contrast to turn the blocked-out mobile screen into a clear, readable layout.
5. Level 5: Colour and Type Basics
   Learners choose a small colour palette and a type scale for the project and apply them consistently to finish the first static mobile screen.
6. Level 6: Auto Layout Fundamentals
   Learners rebuild parts of the mobile screen with auto layout so elements stack, space and resize themselves automatically.
7. Level 7: Constraints and Responsive Desktop Layouts
   Learners use constraints and auto layout resizing to adapt the mobile screen into a responsive desktop version.
8. Level 8: Components and Instances
   Learners turn repeated elements such as buttons and cards into main components and reuse them as instances across both screens.
9. Level 9: Variants and Component Properties
   Learners combine related components into a component set with variants and add component properties to control states and options.
10. Level 10: Colour, Text and Effect Styles
    Learners save the project's colours, type scale and shadows as reusable styles and apply them across both screens.
11. Level 11: Variables, Modes and a Small Design System
    Learners define colour and number variables with modes, such as light and dark, and collect styles, variables and components into a small design system.
12. Level 12: Icons and Exportable Assets
    Learners add and manage vector icons as components and set up export settings so developers and other tools get correctly sized assets.
13. Level 13: Prototyping: Flows, Interactions and Transitions
    Learners connect the mobile and desktop screens into clickable flows using triggers, actions, transitions and overlays, then preview them in presentation view.
14. Level 14: Sharing, Comments, Collaboration and FigJam
    Learners share files with the right access, work through feedback using comments, use version history, and get an outline of FigJam for planning flows and ideas.
15. Level 15: Accessibility Checks for Your Screens
    Learners audit the screen set for colour contrast, text size, touch target size, focus order and readable structure, and fix the problems they find.
16. Level 16: Dev Mode and Developer Handoff
    Learners prepare the file for handoff and use Dev Mode to inspect measurements, properties, variables and assets the way a developer would.
17. Level 17: Figma AI Features, Plans and Pricing
    Learners try Figma's current AI features, such as First Draft, review their output critically, and get an outline of Figma's plans and seat types.
18. Level 18: Final Challenge: Finish the Screen Set Exam
    Learners review the whole course by completing, prototyping, checking and handing off the finished mobile and desktop screen set.

Access

The first 2 levels are free with a free account. Every level, the podcast edition and the AI tutor come with All Access at £4.99/month or any Creator plan — see pricing.

Start free →