Cover
Title Page
Copyright and Credits
Foreword
Contributors
Table of Contents
Preface
Part 1: Introduction to Figma and FigJam
Chapter 1: Exploring Figma and Transitioning from Other Tools
What is Figma?
Why 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
Recent and Drafts
Communityย
Teams and Projects
Figma and FigJam files
Account and notifications
Summary
Chapter 2: Structuring Moodboards, Personas, and User Flows within FigJam
Exploring ideas and collaborating in FigJam
Exploring FigJam
Brainstorming with others
Moving to the next step
Creating moodboards and personas in FigJam
Research phase
Starting a moodboard
Creating user personas
Building user flow in FigJam
The golden path
Be the user
Summary
Chapter 3: Getting to Know Your Design Environment
Starting a new design project
Design files
Frames and groups
Interface overview
Exploring the toolbar
Main tools
Settings and more
Quick shortcuts
Exploring the left panel
Layers and pages
Assets
Exploring the right panel
Design
Prototype
Inspect
Help Center
Summary
Chapter 4: Wireframing a Mobile-First Experience Using Vector Shapes
Evolving the idea to a wireframe
What is a wireframe?
Why mobile-first?
Playing with shapes in Figma
Basic shapes
Combining shapes
Advanced vectors with the Pen tool
What are vector graphics?
Discovering the Pen tool
Vector networks
Developing the app structure
Flow to skeleton
Shaping the interface
What's next?
Summary
Part 2: Exploring Components, Styles, and Variants
Chapter 5: Designing Consistently Using Grids, Colors, and Typography
Getting started with grids
Grids are everywhere
Guides and layout grids
Working with typography, colors, and effects
Typography mattersย
Choosing a palette
Creating effects
Introducing styles
Preparing your file
Creating and managing grid styles
Creating and managing text styles
Creating and managing color and effect styles
Summary
Chapter 6: Creating a Responsive Mobile Interface Using Auto Layout
Introducing auto layout
What is auto layout?
Adding, removing, and rearranging elements
Nesting auto layout
Resizing and constraints
Resizing elements
Differences with constraints
Applying auto layout to our interface
Shaping a button
Completing the view
Summary
Chapter 7: Building Components and Variants in a Collaborative Workspace
Creating and organizing components
What are components?
Building a view using components
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
Managing libraries
Preserving your work with version history
Summary
Chapter 8: User Interface Design on Tablet, Desktop, and the Web
Discovering responsive design
Design to code with fluid layouts
Mobile-first
Adjusting the interface for tablets
Introducing breakpointsย
Adjusting the interface for the web and desktop
Scaling up to the web and desktop
Polishing details
Summary
Part 3: Prototyping and Sharing
Chapter 9: Prototyping with Transitions, Smart Animate, and Interactive Components
Mastering transitions and triggers
Moving between frames with transitions
Exploring triggers
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
Summary
Chapter 10: Testing and Sharing Your Prototype on Browsers and Real Devices
Viewing your interactive prototype
Running the prototype on desktop/the web
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 comments
Structuring flows
Advanced user testing
Summary
Chapter 11: Exporting Assets and Managing the Handover Process
Exporting from Figma
What formats are supported?
Single- and multiple-assets export
Exploring the Inspect tab
Styles overview
Design to code
Handing over the project for development
What's next?
Documenting, reiterating, and improving
Summary
Chapter 12: Discovering Plugins and Resources in the Figma Community
Exploring the Figma Community
Accessing and publishing to the Figma Community
Starting off with FigJam and templates
Finding useful resources
UI kits and design systems
Even more stuff
Extending Figma with plugins
Installing and managing plugins
Suggested plugins
Summary
Index
Other Books You May Enjoy