The Designer’s Guide to Figma: Master Prototyping, Collaboration, Handoff, and Workflow

Length: 177 pages
Edition: 1
Language: English
Publisher: SitePoint
Publication Date: 2023-03-27
ISBN-10: B0C2J6P2XT
Sales Rank: #0 (See Top 100 Books)

Figma is the most complete tool for designing apps, websites, and other types of user interfaces (UIs). Unsurprisingly, it’s also the most-used UI design tool according to the 2022 Design Tools Survey.

Figma can take product design teams all the way from ideation to high-fidelity prototyping—covering all the design processes in between. It can also facilitate diagramming, collaboration, and research. Figma’s design handoff and design system management features can help bridge the gap between design and development. It’s available for Windows, macOS, and as a browser app.

In this book, we’ll immerse ourselves in everything Figma has to offer as we design a simple web page.

Get acquainted with Figma. Learn where everything is, while using some of Figma’s biggest and most exciting features.
Learn how to collaborate with stakeholders
Discover how to create and use Styles and Components, and how to create Design System Libraries to hold them.
Cean up your design, check its accessibility, export its assets, and make sure that it’s ready to be “handed off” to developers.
Take a deep dive into some advanced Figma workflows.

The Designer’s Guide to Figma: Master Prototyping, Collaboration, Handoff, and Workflow
Notice of Rights
Notice of Liability
Trademark Notice
About SitePoint
About the Author
Preface
    Who Should Read This Book?
    Conventions Used
        Code Samples
        Tips, Notes, and Warnings
    Supplementary Materials
Chapter 1: Low-fidelity Prototyping
    Designer, Meet Figma
    Step 1: Creating a Frame (Artboard)
    Step 2: Setting Up Auto Layout
    Step 4: Creating a Text Layer
    Step 5: Creating a Nested Frame
    Step 6: Renaming “Frame 1”
    Step 7: Setting Up a Layout Grid
    Step 8: Creating the Component
    Step 9: Creating a Rectangle Shape
    Step 10: Styling the Rectangle
    Step 9: Creating the Second Rectangle Shape
    Step 10: Grouping the Rectangles
    Step 11: Applying Auto Layout to the Navigation
    Step 12: Creating the Menu
    Step 13: Creating the “Closed” Variant
    Step 14: Creating the Interactions
    Step 15: Utilizing Instances
    Step 16: Sourcing Content with Figma Plugins
    Summary
Chapter 2: Collaboration
    Step 1: Creating a Mobile Version
    Step 2: Setting Up Some Flows
    Step 3: Performing a Quick Test
    Step 4: Renaming the Document
    Step 5: Inviting Others to Collaborate
    Step 6: Making a Comment
    Step 7: Creating a Branch
    Step 8: Starting an Audio Conversion
    Step 9: Reviewing (and Merging?) the Changes
    Summary
Chapter 3: High-fidelity Prototyping
    Step 1: Creating a Color Style
    Step 2: Creating a Text Style
    Step 3: Creating more Text Styles
    Step 4: Reuse the Color Style
    Step 5: Taking a Closer Look at Components
    Step 6: Exploring Documentation
    Step 7: Publishing the Library
    Step 8: Enabling and Using the Library
    Step 9: Updating the Library
    Step 10: Taking a Closer Look at Interactions
    Step 11: Taking a Closer Look at Images
    Summary
Chapter 4: Handoff
    Step 1: Cleaning Up the Design
    Step 2: Checking the Accessibility
    Step 3: Specifying the Export Settings
    Step 4: Seeing How Inspect Works
    Summary
Chapter 5: Advanced Workflows
    Requesting Data from an API
    Creating a Variable-font Logomark
    Creating a Button Icon
    Adding Icons to the Button Component
    Organizing the Design System Library
    Tidying Up
    Summary
    Plugins to Check Out