SitePoint
  • Premium
  • Library
  • Community
  • Jobs
  • Blog
LoginStart Free Trial
The Designer’s Guide to Figma
The Designer’s Guide to Figma: Master Prototyping, Collaboration, Handoff, and Workflow
Notice of Rights
Notice of Liability
Trademark Notice
Preface
About the Author
About SitePoint
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
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
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
Step 1: Cleaning Up the Design
Step 2: Checking the Accessibility
Step 3: Specifying the Export Settings
Step 4: Seeing How Inspect Works
Summary
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

Community Questions