Get an overview of the book including a brief look at what’s coming up in each chapter. Set up your Figma design workspace and learn how to access the project files. Jump in and get started right away with a quick project.

Get an introduction to key tools in Figma like shapes, frames, sizing, alignment, colors and layers and apply your learnings to design a screen from scratch.

Trace over provided screenshots for two popular apps to study their layout and identify patterns and structures used to build them.

Learn about the importance of wireframing and how to incorporate it into your design process. Create wireframes of a few screens and their components and build a scaffold of the app flow by defining the navigation between screens.

Learn to build reusable components for common UI elements like buttons, toolbars and content cards. Incorporate sample text and image data for more realism. Leverage resuable components for faster iterations and to build more flexible designs.

Learn typography basics for communicating hierarchy, order and emphasis. Use Figma's text style feature to build a typographic scale from scratch.

Learn the basics of color theory and the importance of colors in building accessible and inclusive products. Use Figma's color style feature to build reusable color styles from scratch.

Explore the prototyping tools to create a full app walkthrough. Create different transitions between screens to communicate the relationship among elements.

Explore the collaboration tools to test designs and solicit feedback about the app's goals and overall user experience.

Learn about design systems and how they help introduce structure, coherence and flexibility into your projects.

A recap of what you learned the previous chapters and suggestions about where to go from here to improve your design skills.