Designing and Prototyping Interfaces with Figma: Build modern UI/UX with auto layout, prototyping, and scalable components

by Fabio Staiano

Overview

A fully updated guide to Figma's most powerful features, built around a new project and refreshed interface, giving you everything you need to design adaptive UIs, prototype realistic flows, and streamline handoff with Dev Mode

Key Features

• Third edition of the bestselling book, updated with a new project, refreshed interface, and the latest design trends
• Build adaptive, production-ready UIs with variables, modes, components, variants, AI, and Auto Layout
• Prototype branched flows with conditional interactions and interactive components

Book Description

Figma has evolved, and so should your workflow. In this fully updated third edition of Designing and Prototyping Interfaces with Figma, you will explore the platform’s most powerful additions, including Variables, Conditional Prototyping, and a redesigned interface that reshapes how you work. This edition is built around a new, real-world project that takes you from brief to handoff and anchors every concept in practical, day-to-day design tasks. Across the project, you will create responsive layouts with Auto Layout, components, and variants; build scalable design systems; and prototype realistic, branched flows with conditional interactions. You will test on devices, collect feedback, and iterate with confidence, applying patterns and checklists that translate directly to team workflows and real product constraints. Collaboration gets equal focus. You will learn how Dev Mode bridges designers and developers for a smoother, more structured handoff with clear specs and variable-aware inspection. The book closes with a pragmatic look at emerging AI-powered tools, helping you evaluate where they might add value without replacing your creative judgment. Whether you are new to UI/UX or sharpening your practice, you will come away with a proven workflow to ship adaptive, production-ready designs.

What you will learn

• Wireframe mobile-first with vectors, using shape tools, the Pen, and vector networks before pixels
• Use Variables and Modes to manage content, states, and themes at scale
• Prototype realistic flows with transitions, Smart Animate, overlays, and interactive components
• Make layouts truly responsive with Auto Layout, nesting, resizing, and constraints
• Build, document, and maintain scalable design systems with Components, Styles, and Dev Mode for handoff
• Explore AI plugins as an optional aid to support, not replace, your design workflow

Who this book is for

This book is for aspiring UX/UI designers who want to get started with Figma as well as established designers who want to migrate to Figma from other design tools. This guide will provide you with a walkthrough of the entire process of creating a full-fledged prototype for a responsive interface using all the tools and features that Figma has to offer. As a result, this book is suitable for both UX and UI designers, product and graphic designers, as well as anyone who wants to explore the complete design process from scratch.

Product Details

ISBN-13:	9781805805892
Publisher:	Packt Publishing
Publication date:	02/25/2026
Product dimensions:	75.00(w) x 92.50(h) x (d)

About the Author

Fabio Staiano is an experienced interface designer and Figma Community Advocate from Italy. After having been part of the creative agency Geko for several years, he later became a partner, creating digital products for well-known brands and running local events for the creative community. He then began his career in education in 2016, at The Guru Lab, teaching students about user interface and web design. In 2019, he decided to face new challenges by deepening his development skills at the Apple Developer Academy, where he specializes in frontend development and publishes various apps and boilerplate. Currently, he works as a consultant for IT projects and teaches at private design schools.

Table of Contents

Table of Contents

1. Exploring Figma and Transitioning from Other Tools
2. Structuring Moodboards, Personas, and User Flows within FigJam
3. Getting to Know Your Design Environment
4. Wireframing a Mobile-First Experience Using Vector Shapes
5. Designing Consistently Using Grids, Colors, and Typography
6. Creating a Responsive Mobile Interface Using Auto Layout
7. Building Components and Variants in a Collaborative Workspace
8. User Interface Design on Tablet, Desktop, and the Web
9. Prototyping with Transitions, Smart Animate, and Interactive Components
10. Testing and Sharing Your Prototype in Browsers and Real Devices
11. Exporting Assets and Managing the Handover Process
12. Discovering Resources, Plugins, and Widgets in the Figma Community
13. Going Advanced with Variables and Conditional Prototyping