Design Workflow
Figma to Code: A Handoff Guide
Inspect mode, design tokens, and communication practices that prevent 'it doesn't match the design'.
10 articles in this category
Design Workflow
Building Your First Design System
Start small with tokens, components, and documentation that scale with your product.
Design Workflow
From Wireframe to Interactive Prototype
Low-fi to high-fi workflow that validates ideas before writing code.
Design Workflow
Design Tokens: The Bridge Between Design and Code
Single source of truth for colors, spacing, and typography across Figma and CSS.
Design Workflow
User Research Methods for Small Teams
Interviews, surveys, and analytics — practical research without a dedicated UX team.
Design Workflow
Building a Component Library in Figma
Variants, auto-layout, and organization patterns for maintainable design files.
Design Workflow
Running Effective Design Critiques
How to give and receive feedback that improves designs without bruising egos.
Design Workflow
Designing Responsively in Figma
Constraints, auto-layout, and breakpoint frames for designs that translate to code.
Design Workflow
Design Documentation That Developers Read
Specs, redlines, and annotations that answer questions before they're asked.
Design Workflow
Design-Dev Collaboration Best Practices
Standups, shared vocabulary, and tools that keep designers and developers aligned.