The Designer's Guide to Figma
Master Prototyping, Collaboration, Handoff, and Workflow
Published on 27. March 2023
158 pages
978-1-925836-55-4 (ISBN)
Description
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.
More details
Person
Previously, design blog editor at Toptal and SitePoint. Now Daniel advocates for better UX design alongside industry leaders such as Adobe, InVision, Marvel, Wix, Net Magazine, LogRocket, CSS-Tricks, and more.
Content
- 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
