Designing and Prototyping Interfaces with Figma : Build a Modern UI/UX with Auto Layout, Prototyping, and Scalable Components.

Format:

Book

Author/Creator:

Staiano, Fabio.

Language:

English

Subjects (All):

Figma (Electronic resource).

User interfaces (Computer systems)--Design.

User interfaces (Computer systems).

Computer graphics.

Computer drawing.

Application software--Development--Computer programs.

Application software.

Internet--Computer programs.

Internet.

Physical Description:

1 online resource (452 pages)

Edition:

1st ed.

Place of Publication:

Birmingham : Packt Publishing, Limited, 2026.

Summary:

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.

Contents:

Cover

Title Page

Copyright and credit page

Dedication

Contributors

Table of Contents

Preface

Free Benefits with Your Book

Part 1: Introduction to Figma and FigJam

Chapter 1: Exploring Figma and Transitioning from Other Tools

Getting to know Figma

Creating an account

Choosing the right plan

Desktop app versus web app

Setting up Font installer

Transitioning to Figma from Sketch and Adobe XD

Coming from Sketch

Coming from Adobe XD

A quick final thought

Exploring the welcome screen

Recents

Community

Drafts

Teams and projects

Design, FigJam, Slides, Buzz, Make, and Sites

Search, notifications, and account

Summary

Chapter 2: Structuring Moodboards, Personas, and User Flows within FigJam

Exploring ideas and collaborating in FigJam

Exploring FigJam

A - Select and Hand tools

B - Marker

C - Sticky Note

D - Shapes and Connectors

E - Text

F - Section

G - Table

H - Stamps and Reactions

I - Comment

J - Actions

K - Widgets, Stickers, Templates, and more

Brainstorming with others

Real-time collaboration

Moving on to the next step

Creating moodboards and personas in FigJam

Research phase

Conducting competitive analysis

Starting a moodboard

Creating user personas

Building a user flow in FigJam

The golden path

Expanding the flow

Be the user

Chapter 3: Getting to Know Your Design Environment

Starting a new design project

Design files

Frames and groups

Interface overview

Getting used to the toolbar

Main tools and modes

Move, Hand tool, and Scale

Frame, Section, and Slice

Shapes, and Image/video

Pen and Pencil

Text

Comment, Annotation, and Measurement

Actions

Figma Draw, Design, and Dev Mode

Settings and more

Main menu.

File title

Collaboration, sharing, and view controls

Quick shortcuts

Exploring the left panel

Layers and pages

Assets

Exploring the right panel

Design

Prototype

Help Center

Chapter 4: Wireframing a Mobile-First Experience Using Vector Shapes

Evolving the idea into a wireframe

Understanding wireframes

Choosing a mobile-first approach

Shapes and vectors in Figma

Creating basic shapes

Combining simple shapes

Advanced vectors with the Pen tool

Understanding vector graphics

Switching to Figma Draw

Working with curves and points

Building complex shapes with the Shape Builder tool

Vector networks

Developing the app structure

Turning flow into a skeleton

Shaping the interface

What's next?

Part 2: Designing Interfaces with Figma

Chapter 5: Designing Consistently Using Grids, Clors, and Typography

Getting started with grids

Grids are everywhere

Guides and layout grids

Working with typography, colors, and effects

Typography matters

Exploring the Text tool

Variable fonts

Choosing a palette

A - Color modes

B - Blend modes and accessibility checker

C - Color palette

G - Eyedropper tool

H - Color models

I - Color styles

Creating effects

Introducing styles

Preparing your file

Creating and managing grid styles

Creating and managing text styles

Creating and managing color and effect styles

Chapter 6: Creating a Responsive Mobile Interface Using Auto Layout

Introducing Auto layout

What is Auto layout?

Direction

Gap

Padding

Alignment

Adding, removing, and rearranging elements

Nesting Auto layout

Going responsive with resizing and constraints

Hug, fill, and fixed

Setting constraints

Applying Auto layout to our interface

Shaping a button.

Completing the view

Chapter 7: Building Components and Variants in a Collaborative Workspace

Creating and organizing components

What are components?

Building a view using components

A - Top navigation bar

B - Hero carousel

C - Content cards

D - Repeated rows

Extending components with variants

Why use variants?

Setting up our Content Detail view

Implementing variants

Multiplayer mode, libraries, and version control

Working with multiplayer features

Publishing libraries

Organizing your component library effectively

Pages and frames as hierarchies

Atomic components and unpublished utilities

One library or multiple libraries?

Linking libraries together

Structuring styles

Preserving your work with version history

Chapter 8: User Interface Design on Tablet, Desktop, and the Web

Discovering responsive design

Designing to code with fluid layouts

Mobile first

Adjusting the interface for tablets

Introducing breakpoints

Login and Sign Up views

Home view

Detail Page view

Adjusting the interface for web and desktop

Scaling up to web and desktop

Polishing details

Part 3: Prototyping, Testing, and Sharing Interfaces

Chapter 9: Prototyping with Transitions, Smart Animate, and Interactive Components

Mastering transitions and triggers

Moving between frames with transitions

Exploring triggers

On click/On tap

On drag

While hovering

While pressing

Key/Gamepad

Mouse enter/Mouse leave

Mouse down/Mouse up

After delay

Animating with Smart Animate

What is Smart Animate?

Getting advanced with Smart Animate

Structuring interactive components

What are interactive components?

Creating interactive components

Creating interactive overflows and overlays.

Making our view scrollable with overflows

Creating interface overlays

Chapter 10: Testing and Sharing Your Prototype in Browsers and Real Devices

Viewing your interactive prototype

Running prototypes on desktop/web

Using the inline preview

Running the prototype on a smartphone/tablet

Sharing your prototype with others

Linking the prototype and managing permissions

Embedding the prototype

Working with feedback and reviews

Viewers and design comments

Commenting on prototypes

Structuring flows

Advanced user testing

Chapter 11: Exporting Assets and Managing the Handover Process

Exporting from Figma

What formats are supported?

Single- and multiple-asset export

Exploring Dev Mode

Switching to Dev Mode

From design to code

Extending Dev Mode

Handing over the project for development

Documenting, reiterating, and improving

Chapter 12: Expanding Your Workflow with Resources, Plugins, Widgets, and AI Tools

Exploring the Figma Community

Accessing and publishing to the Figma Community

Starting off with templates

UI kits and design systems

More design resources

Extending Figma with plugins

Running and managing plugins

Suggested plugins

Iconify

Content Reel

Clay Mockups 3D

Contrast

LottieFiles

Design Lint

Using widgets in Figma and FigJam

Understanding the difference between widgets and plugins

Suggested widgets

Checklist (Figma/FigJam)

Jira/Asana (Figma/FigJam)

Giphy Stickers (Figma/FigJam)

Jambot (FigJam)

Speeding up your flow with AI

Using AI in the creative discovery phase

Exploring concepts with Figma Make

AI features in Figma Design

Create, edit, and enhance images

Remove background

Improve and rewrite text

Translate text

Add relevant content.

First Draft: AI-generated templates

Rename Layers

Suggest Auto Layout

AI prototyping: automatic links and transitions

Visual search

Practical AI tools for a smoother handoff

Other useful applications of AI in your workflow

Chapter 13: Going Advanced with Variables and Conditional Prototyping

Understanding variables

When to use variables

Variables, collections, and modes

Starting with color variables

Setting up modes for color schemes

Exploring number variables

Switching with Boolean variables

Elevating with string variables

Pushing further with conditional prototyping

The logic behind conditional prototyping

Advanced prototyping with variables and conditionals

Chapter 14: Unlock Your Exclusive Benefits

Unlock this Book's Free Benefits in 3 Easy Steps

Other Books You May Enjoy

Index.

Notes:

Description based upon print version of record.

Choosing a palette

Description based on publisher supplied metadata and other sources.

ISBN:

1-80580-588-6

9781805805885

OCLC:

1569915692