At every company I've worked at — SparkSoft, WT Migremo, Proudcloud, and Karmabunny — the design-to-development handoff has been the single biggest source of friction. Designers create beautiful mockups in Figma. Developers interpret them. The result looks "close enough" but never quite right. After five years of navigating this gap, I've developed a workflow that actually works.
The Problem Isn't the Tools — It's the Language
Designers think in visual hierarchy, whitespace, and rhythm. Developers think in components, state, and responsive breakpoints. Neither is wrong, but the translation between these mental models is where pixel-perfection dies. The solution isn't better export tools or AI-generated code — it's a shared design system that both sides understand and maintain.
Building a Shared Token System
The single most impactful thing I've done for design-dev alignment is establishing a shared token system. In Figma, the designer defines variables for colors, spacing, typography, and border radius. In code, I map those exact same tokens to CSS custom properties or Tailwind theme values. When a designer says "use spacing-4," I know exactly what that means in code: 16px, or 1rem, or whatever the token maps to.
/* Design tokens that mirror Figma variables exactly */
@theme inline {
/* Spacing — matches Figma's spacing scale */
--spacing-1: 0.25rem; /* 4px */
--spacing-2: 0.5rem; /* 8px */
--spacing-3: 0.75rem; /* 12px */
--spacing-4: 1rem; /* 16px */
--spacing-6: 1.5rem; /* 24px */
--spacing-8: 2rem; /* 32px */
/* Typography — matches Figma's text styles */
--font-display: 'Sentient', serif;
--font-body: 'Geist', sans-serif;
--font-code: 'Geist Mono', monospace;
}The Inspect Workflow That Actually Works
Here's my actual process when implementing a new design. First, I don't look at pixel values at all. I look at the component structure — what are the logical groupings, what repeats, what's a variant of something that already exists? Then I map each group to a React component. Only after the component architecture is clear do I start matching the visual details.
- Start with the component tree, not the pixels. Identify which parts are reusable components vs. one-off layouts.
- Use Figma's Dev Mode to inspect spacing relationships between elements, not absolute positions.
- Build mobile-first, then add breakpoints. Most Figma designs show desktop first, but implementing mobile-first results in cleaner CSS.
- Establish a "close enough" threshold with your designer upfront. Sub-pixel differences don't matter. Spacing inconsistencies do.
- Review implementations on a real device, not just browser DevTools. Mobile Safari will humble you.
Component-Driven Development
The Figma-to-code pipeline works best when your codebase mirrors your Figma component library. If the designer has a "Button" component with variants (primary, secondary, ghost, sizes), your code should have the exact same component with the exact same variants. When I built the component library for this portfolio, I started by cataloging every unique component in the design and creating a 1:1 mapping.
When to Use Webflow or Framer Instead
Hot take: not every project needs custom code from a Figma design. For marketing sites, landing pages, and content-heavy sites with minimal interactivity, tools like Webflow and Framer are genuinely faster and produce good-enough results. At Karmabunny, we delivered several client sites on Webflow and Craft CMS where custom code would have been overkill. Save the custom React implementation for projects that need complex interactivity, real-time features, or custom animations.
The goal isn't pixel-perfect implementation. The goal is an experience that feels right to the user. Sometimes a 2px difference doesn't matter. Sometimes it's the only thing that matters. Knowing which is which is the real skill.
The design-to-code gap will never fully close, and that's okay. Designers and developers bring different perspectives, and the tension between them produces better products. What we can do is reduce the unnecessary friction — the miscommunications, the guesswork, the rework — by establishing shared systems and clear workflows.