Figma Workflows to Bridge Design and Development

Why Figma Workflows Matter for Dev Velocity

Design files are only valuable if they translate to production without guesswork. The workflows below standardize tokens, components, specs, and exports—so your code mirrors the system, not screenshots.

• Consistency: Token-driven designs compile directly into CSS variables and utility classes.
• Speed: Dev Mode cuts inspection time; auto layout maps cleanly to flex/grid.
• Quality: Shared libraries prevent drift; redlines + variants remove ambiguity.

A Simple System Map (Design → Code)

Tokenize First: Colors, Spacing, Type

Drive every decision through tokens so changes cascade predictably. Keep semantic tokens (primary/secondary/surface) separate from raw scales.

/* tokens.css (generated) */
:root{
  /* color */
  --color-primary: #284B63;
  --color-accent:  #d4a856;
  --color-bg:      #ffffff;
  --color-text:    #263f4e;

  /* spacing scale */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem;  --space-10: 2.5rem;

  /* type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --text-sm: .875rem/1.5; --text-base: 1rem/1.6; --text-lg: 1.125rem/1.6;
  --text-xl: 1.25rem/1.4; --text-2xl: 1.5rem/1.3;
}

Tip: Keep raw tokens locked; only remap semantic tokens during redesigns to limit churn.

Components & Variants: Map Props, Not Pixels

Build Figma variants that mirror the props you’ll use in code. Prefer boolean (disabled, loading) and enumerations (size: sm|md|lg, intent: primary|secondary|danger).

• Use Variant Properties with plain names that match code.
• Document interaction states (hover/focus/active) as separate properties or state layers.
• Attach component specs (padding, gap, grid) in the description for Dev Mode.

Auto Layout → Flex/Grid Without Translation Errors

Auto layout maps cleanly to CSS flex/grid. Align properties up front and you avoid “mystery margins.”

Use Dev Mode for Real Specs (Not Eyeballing)

• Pin the spec page per feature with a share link in the PR description.
• Enable measurements, export tokens, and copy-ready CSS variables.
• Use annotations for behavior—what changes on hover, focus, disabled, and error.

Pro: name frames by route/component (e.g., routes/settings/profile) so code search finds them.

Variables & Themes: Light/Dark Without Duplication

Use Figma variable collections for color, elevation, and radius; create themes (light/dark) with the same semantic keys.

/* theme switch (CSS) */
:root { --surface: #ffffff; --text: #263f4e; --border: #e5e7eb; }
:root.dark { --surface: #0f172a; --text: #e5e7eb; --border: #1f2937; }

One set of component styles, multiple themes via variables. Figma mirrors this with theme modes.

Asset Exports: Crisp Icons, Lean Images

• Prefer SVG for icons; outline strokes; merge shapes; remove fills when relying on currentColor.
• Raster assets: export @1x only; generate responsive .webp in your build pipeline.
• Provide alt text and intended dimensions next to each export for accessibility + CLS control.

Handoff Ritual: From Frame to PR With Zero Guessing

1. Design ready: Tokens resolved, variants named, auto layout valid, assets marked exportable.
2. Spec link: Share Dev Mode URL + notes (“on hover: bg/ border changes”).
3. Task: JIRA/GH issue links to the exact frame(s), acceptance criteria listed.
4. Code: Map variant props 1:1; use tokens; write tests for focus/disabled/error states.
5. Review: Attach screenshot diffs; QA against Figma with the same theme/zoom.

Accessibility: Bake It Into the Components

• Check color pairs in Figma for WCAG AA contrast; annotate any exceptions.
• Specify focus outlines in the design; don’t rely on browser defaults.
• Define names/roles/states in component notes (e.g., button[aria-pressed], dialog with focus trap).

Common Pitfalls (and How to Avoid Them)

• Pixel values everywhere: Use tokens and constraints; avoid magic numbers.
• Variant sprawl: Too many permutations; keep to real product states.
• Nesting for layout only: Overwrapped frames → verbose DOM; fix with simpler auto layout.
• Icon inconsistencies: Mixed strokes and fills; normalize to a single visual style.
• Theme mismatches: Hard-coded colors instead of semantic variables.

Quick Checklists

Design “Ready for Dev”

• Tokens applied (no raw hex/px sprinkled).
• Auto layout valid; constraints documented.
• Variants reflect real props; states included.
• Assets marked exportable; alt text + dims noted.
• Annotations for interactions and keyboard paths.

Dev “Ready for Review”

• Tokens wired to CSS variables/Tailwind theme.
• Flex/grid matches auto layout gaps and alignment.
• Focus/hover/disabled states implemented.
• Snapshots vs. Figma frame attached; a11y checks pass.

Key Takeaways

• Start with tokens and semantic themes—everything else plugs into them.
• Design variants should mirror component props 1:1.
• Auto layout → flex/grid is a direct mapping if you document constraints.
• Dev Mode, redlines, and annotated states eliminate “what did you mean?”