Principles of UX / UI (Product Design): Design Handoff (Specs, Assets, Zeplin, Figma Dev Mode)

Design Handoff (Specs, Assets, Zeplin, Figma Dev Mode)

Design Handoff Study Guide: Specs, Assets & Dev Mode

A portfolio-ready breakdown for aspiring product designers, UX bootcampers, and graphic designers transitioning to UX.

What This Is

Design handoff is the process of translating your final designs into developer-ready assets, specs, and documentation. It’s the bridge between design and code—ensuring pixel-perfect implementation, consistent interactions, and a seamless user experience. Without it, even the most thoughtful designs can turn into buggy, misaligned interfaces.

Example: Imagine redesigning a hospital’s patient portal to reduce appointment no-shows. Your final design includes a step-by-step booking flow with clear error states, micro-interactions for confirmation, and a dark-mode toggle. A sloppy handoff might result in: - Buttons misaligned on mobile (breaking Fitts’s Law).
- Missing hover states (violating Jakob’s Law—users expect consistency).
- Hardcoded colors (ignoring accessibility, failing WCAG 2.1 AA contrast ratios).

A polished handoff ensures developers build exactly what you designed—saving time, reducing rework, and keeping users happy.

Key Terms & Principles

• Design Specs (Specs): Detailed documentation of spacing, typography, colors, states (hover, active, disabled), and animations. Example: A Figma frame labeled “Button Specs” showing padding (16px top/bottom, 24px left/right), font (Inter SemiBold 16px), and hex codes for default/hover/disabled states.

• Assets: Exportable files (SVGs, PNGs, PDFs) for icons, logos, and illustrations. Example: A “Download Assets” section in Figma with 1x/2x/3x PNGs for a custom “Add to Cart” icon, plus an SVG for scalability.

• Zeplin / Figma Dev Mode: Tools that auto-generate specs, assets, and code snippets (CSS, Swift, Android XML) for developers. Example: In Figma Dev Mode, a developer clicks a button to see its box-shadow: 0 2px 4px rgba(0,0,0,0.1) and border-radius: 8px.

• Component States: Variations of a UI element (e.g., a button’s default, hover, pressed, disabled, and loading states). Example: A toggle switch with specs for each state’s color, animation duration (300ms), and easing curve (cubic-bezier(0.4, 0, 0.2, 1)).

• Redlines: Annotated screens showing exact measurements (e.g., “16px gap between card and CTA”). Example: A Figma frame with red lines and labels like “40px margin from edge” or “8px gutter between grid items.”

• Design Tokens: Variables for design properties (e.g., --color-primary: #3B82F6) to ensure consistency across platforms. Example: A “Tokens” page in Figma listing all colors, spacing, and typography rules, synced to a developer’s codebase via tools like Style Dictionary.

• Responsive Breakpoints: Screen widths where layouts adapt (e.g., mobile: 375px, tablet: 768px, desktop: 1440px). Example: A Figma auto-layout frame that collapses a 3-column grid into 1 column at 768px, with specs for padding changes.

• Micro-interactions: Small animations or feedback (e.g., a heart icon that scales up when liked). Example: A “Like” button with specs for a 200ms scale animation (transform: scale(1.2)) and a bounce easing curve.

• Accessibility Annotations: Notes for developers on ARIA labels, keyboard navigation, and focus states. Example: A modal with a sticky note: “aria-label="Close modal" on the X button; trap focus inside modal.”

• Version Control for Designs: Using Figma’s version history or tools like Abstract to track changes. Example: Reverting to a previous version after a stakeholder requests a “simpler” checkout flow.

• Hick’s Law: The time it takes to make a decision increases with the number of choices. Example: A dropdown menu with 20 options should be replaced with a searchable combobox or grouped categories to speed up selection.

• Progressive Disclosure: Showing only essential information upfront to reduce cognitive load. Example: A settings panel that hides advanced options under a “Show more” accordion.

Step-by-Step Process Flow

1. Audit Your Design for Handoff Readiness

Action: Open your Figma file and ask: - Are all components detached from instances (no overrides)? - Are auto-layouts used for responsive elements (e.g., cards, navbars)? - Are states (hover, disabled, error) documented for interactive elements? - Are assets exported at 1x/2x/3x and named logically (e.g., icon-cart-24px.svg)?

Pro Tip: Use Figma’s “Inspect” panel to check for missing specs (e.g., undefined colors, unstyled text).

2. Organize Your Figma File for Developers

Action:
- Create a “Handoff” page with: - Specs Frame: A dedicated frame with redlines, spacing guides, and typography scales (e.g., “H1: 32px/40px, H2: 24px/32px”).
- Component Library: A section with all buttons, inputs, and cards, labeled with states (e.g., “Primary Button – Default/Hover/Disabled”).
- Flows: User journeys (e.g., “Checkout Flow”) with arrows showing transitions between screens.
- Assets Frame: A grid of exportable icons, logos, and illustrations (use Figma’s “Export” panel to batch-export).

Example:

? Handoff Page
├── ?️ Specs (Redlines)
├── ? Components (Buttons, Inputs, Cards)
├── ? Flows (User Journeys)
└── ? Assets (Icons, Logos)

3. Add Developer-Friendly Annotations

Action:
- Use Figma’s sticky notes or text layers to explain: - Interactions: “This dropdown opens on click with a 200ms fade-in.” - Edge Cases: “If no items are in cart, show empty state with ‘Shop Now’ CTA.” - Accessibility: “tabindex="0" for keyboard focus; aria-live="polite" for dynamic content.” - Label layers clearly (e.g., rename “Rectangle 123” to “Modal Overlay”).

Pro Tip: Use Figma’s “Dev Mode” (beta) to auto-generate specs. Toggle it on and click any element to see: - CSS/Swift/Android code snippets.
- Spacing, colors, and typography.
- Interactive component states.

4. Export Assets & Generate Specs

Action:
- Batch-export assets:
- Select all icons → Right-click → “Export” → Choose formats (SVG for icons, PNG for illustrations).
- Use 2x/3x for retina displays (e.g., [email protected]).
- Generate specs:
- Use Figma’s “Inspect” panel or Zeplin to auto-generate:
- Spacing (margins, padding).
- Colors (hex, RGB, HSL).
- Typography (font family, weight, line height).
- For animations, use Lottie files or GIFs with timing notes (e.g., “300ms ease-in-out”).

Example Export Naming Convention:

icon-search-24px.svg
illustration-empty-state-800px.png
[email protected]

5. Sync with Developers & QA

Action:
- Host a handoff meeting (30–60 mins) to walk through: - Key flows (e.g., “Here’s how the onboarding steps work”).
- Edge cases (e.g., “What happens if the API fails?”).
- Accessibility requirements (e.g., “All interactive elements must have focus states”).
- Use a tool like Zeplin or Avocode to share specs if developers aren’t in Figma.
- Create a shared doc (Notion, Google Docs) with: - Links to Figma/Zeplin.
- Open questions (e.g., “Should the ‘Back’ button use the browser’s back or a custom route?”).
- A changelog (e.g., “v1.2: Updated button padding from 12px to 16px”).

Pro Tip: Record a Loom video walking through the handoff to save time on repetitive questions.

6. Iterate Based on Feedback

Action:
- Check the build in staging/production: - Use BrowserStack or Responsively to test across devices.
- Verify pixel-perfect alignment (e.g., “Is the 16px gap between cards consistent?”).
- Test interactions (e.g., “Does the dropdown close when clicking outside?”).
- File bugs in Jira/Linear with: - Screenshots of the issue.
- Expected vs. actual behavior.
- Links to the Figma spec.
- Update the Figma file if changes are made (e.g., “Updated button color to #2563EB per brand guidelines”).

Common Mistakes

Mistake 1: Assuming Developers “Just Know” Your Intent

Correction:
- Annotate everything, even “obvious” things. Example: Label a toggle switch with “Default: Off (gray), Active: On (blue), Disabled: 50% opacity.” - Use Figma’s “Comments” to tag developers with questions (e.g., “@dev-team, should this animation be CSS or JS?”).

Why? Developers aren’t mind-readers. A missing hover state or animation spec can lead to inconsistent implementations.

Mistake 2: Not Organizing Assets for Easy Access

Correction:
- Group assets by type (icons, logos, illustrations) and name them logically (e.g., icon-arrow-right-24px.svg).
- Use Figma’s “Export” panel to batch-export assets instead of manually saving each one.

Why? A developer wasting 10 minutes searching for an icon is 10 minutes not spent building.

Mistake 3: Ignoring Responsive Breakpoints

Correction:
- Design for 3+ breakpoints (mobile, tablet, desktop) and specify how layouts adapt (e.g., “At 768px, the sidebar collapses into a hamburger menu”).
- Use Figma’s auto-layout to show responsive behavior (e.g., a card that stacks vertically on mobile).

Why? A design that works on desktop but breaks on mobile = a broken user experience.

Mistake 4: Forgetting Accessibility Annotations

Correction:
- Add notes for:
- Keyboard navigation (e.g., “tabindex="0" for custom dropdowns”).
- Screen reader labels (e.g., “aria-label="Close modal"”).
- Focus states (e.g., “Outline: 2px solid #3B82F6 on focus”).
- Test contrast ratios (use WebAIM Contrast Checker) and annotate them (e.g., “Text: #1F2937 on #FFFFFF (AAA compliant)”).

Why? 1 in 4 adults in the U.S. has a disability. Missing accessibility = excluding users.

Mistake 5: Not Updating Specs After Changes

Correction:
- Treat the Figma file as the single source of truth. If a button’s color changes from blue to green, update the spec immediately.
- Use Figma’s version history to track changes (e.g., “v1.3: Updated primary button color to #10B981”).

Why? Outdated specs lead to miscommunication and rework.

Design Interview / Portfolio Tips

1. Show Your Handoff Process in Case Studies

What Interviewers Look For:
- Before/after examples: “Here’s how I improved handoff efficiency by 30% by standardizing specs.” - Problem-solving: “I noticed developers were misaligning buttons, so I added redlines for padding.” - Collaboration: “I hosted a handoff meeting to clarify edge cases, reducing QA bugs by 50%.”

Portfolio Tip: Include a “Handoff” section in your case study with: - A screenshot of your Figma handoff page.
- A Loom video walking through your specs.
- A quote from a developer: “The annotations saved us 10 hours of back-and-forth.”

2. Explain How You Advocate for Users in Handoff

Tricky Distinction: Design System vs. Style Guide - Style Guide: Static rules (colors, fonts, logos).
- Design System: Living documentation with components, specs, and code snippets (e.g., Google’s Material Design).

Example Answer:

“I pushed for a design system to ensure consistency across our app. For example, our ‘Primary Button’ had 5 different shades of blue in production. I created a shared Figma library with tokens (e.g., --color-primary: #3B82F6) and specs for all states, which reduced dev time and improved accessibility.”

3. Demonstrate Technical Awareness

What to Know:
- How developers use your specs: They copy CSS/Swift/Android XML from Figma Dev Mode or Zeplin.
- Common dev constraints: “This animation might be too complex for CSS—let’s simplify it.” - Tools: Figma Dev Mode, Zeplin, Storybook, Lottie (for animations).

Interview Question: “How do you ensure your designs are feasible for developers?” Answer:

“I collaborate early with devs to understand technical constraints. For example, I learned that our team’s CSS pipeline didn’t support clip-path, so I avoided complex shapes in favor of simpler SVGs. I also use Figma’s auto-layout to mimic flexbox behavior, making it easier for devs to translate my designs into code.”

Quick Check Questions

1. A developer asks, “What’s the exact padding for this card?” You realize you forgot to spec it. What do you do?

Answer:
- Immediately add redlines in Figma (e.g., “16px padding on all sides”).
- Use Figma’s “Inspect” panel to confirm the measurement.
- Update the handoff doc and notify the developer.
- Key Principle: Always treat specs as a living document—missing details cause delays.

2. Your team is using a mix of Zeplin and Figma for handoff. How do you decide which tool to use?

Answer:
- Use Figma Dev Mode if: - Your team is already in Figma.
- You need auto-generated code snippets (CSS/Swift/Android).
- You want to keep specs in sync with design updates.
- Use Zeplin if: - Developers prefer a dedicated handoff tool.
- You need advanced features like user flows or design system sync.
- Key Principle: Choose the tool that reduces friction for your team—consistency matters more than the tool itself.

3. A stakeholder wants to add a new feature to the checkout flow, but it’ll require a custom animation that might slow down the page. How do you respond?

Answer:
- Ask: “What’s the user goal behind this feature?” (e.g., “We want to reduce cart abandonment”).
- Propose alternatives using progressive disclosure (e.g., “Instead of a complex animation, we could show a static tooltip with the same info”).
- Reference performance data: “Our analytics show that 30% of users drop off on slow-loading pages. Let’s test a simpler version first.” - Key Principle: Use Hick’s Law (fewer choices = faster decisions) and performance metrics to advocate for simplicity.

Last-Minute Cram Sheet

1. Figma Dev Mode = Auto-generated specs, code snippets, and component states. Toggle with Shift + D.
2. Zeplin = Handoff tool for specs, assets, and user flows. Syncs with Figma/Sketch.
3. Design Tokens = Variables for colors, spacing, typography (e.g., --color-primary: #3B82F6).
4. WCAG 2.1 AA Contrast Ratio = 4.5:1 for text, 3:1 for large text.
5. Fitts’s Law = Bigger + closer targets = faster interactions (e.g., mobile “Buy” button at thumb zone).
6. Hick’s Law = More choices = slower decisions (simplify menus, forms).
7. Progressive Disclosure = Hide complexity until needed (e.g., “Show more” accordions).
8. Component States = Default, hover, active, disabled, loading (spec all 5!).
9. ⚠️ Assets ≠ Specs: Assets = exportable files (SVGs, PNGs); Specs = measurements, colors, interactions.
10. ⚠️ Handoff ≠ One-and-Done: Update specs after changes, QA the build, and iterate.