Designing and Prototyping Interfaces with Figma: Learn essential UX/UI design principles by creating interactive prototypes for mobile, tablet, and desktop

Description

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