The designer's guide to figma master prototyping, collaboration, handoff, and workflow

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--c...

Descripción completa

Detalles Bibliográficos
Otros Autores: Schwarz, Daniel, 1966- author (author)
Formato: Libro electrónico
Idioma:Inglés
Publicado: Richmond, VIC : SitePoint Pty. Ltd [2023]
Edición:[First edition]
Materias:
Ver en Biblioteca Universitat Ramon Llull:https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009730937506719
Tabla de Contenidos:
  • 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.