[Daniel Schwarz] The Designer’s Guide to Figma_ Master Prototyping, Collaboration, Handoff, and Workflow [2023]
About the Author
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.
Who Should Read This Book?
This book is for anyone who wants to better understand Figma,
the design and collaboration app. No prior experience of Figma
is required, but it's assumed you have some design experience.
The Designer’s Guide to Figma | Daniel Schwarz
Master Prototyping, Collaboration, Handoff, and Workflow
Details
Master the most complete tool for designing apps, websites, and user interfaces.
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.
Sales page: https://www.sitepoint.com/premium/books/the-designer-s-guide-to-figma/
Author(s): Daniel Schwarz
Publisher: SitePoint Pty. Ltd.
Year: 2023
Language: English
Pages: 336
Tags: designing; Figma
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
