In this chapter, you will explore the book structure with an outline for each chapter. Set up the design workspace in Figma, including how to access the project files, in order to get started right away.

Get an introduction of key tools such the shapes, frames, sizing, alignment, colors, and layers. Trace over provided screenshots to study layout and to identify other visual elements.

Create wireframes of a few screens and the components that make up the screens. Create a scaffold of the app flow by defining the navigation between different screens.

Learn to create and use reusable components for things like buttons and toolbars. Incorporate sample text and image data for more realism.

Learn typography basics for communicating hierarchy, order, and emphasis. Gain an overview of color basics with common practices and creating palettes. Create visual styles for consistency throughout the app.

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

Explore the collaboration tools to test designs and solicit feedback considering the app goals and overall user experience. Test across multiple devices.

Overview the design systems and visual language, including highlights from Apple’s Human Interface Guidelines, and Google’s Material design. Learn best practices for creating good “native” app experience in each ecosystem. Cover creating your own design system for larger projects or distributed teams.

Hone the fit and finish by iterating and exploring advanced techniques. Export assets, and code and prep for implementation.

Review the lessons learned and how to apply them when starting from scratch. Sources for inspiration and useful resources. Suggestions for continued learning and mastering design skills.