From Figma to Code — My Design-to-Development Workflow
How I design in Figma and seamlessly translate it into code: design systems, handoff process, developer workflow and tools for pixel-perfect implementation.
As a Product Designer, I’m both designer and developer. That means my design-to-code workflow isn’t a handoff between two people — it’s a seamless process within my own work. Still, I’ve developed a clear structure over the years that ensures no pixel gets lost.
In this post, I’ll show you how I go from a blank Figma canvas to a live website.
Phase 1: Strategy (before Figma opens)
Before I draw a single line in Figma, I clarify three things:
- What’s the goal of the page? — Sell, inform, generate leads?
- Who’s the target audience? — What expectations do they bring?
- What’s the core content? — What information must be visible?
Only when these questions are answered do I open Figma. This saves countless iterations later.
Phase 2: Wireframes in Figma
I start with low-fidelity wireframes — black and white, no images, no font choices. Just boxes, lines, and placeholders.
Why wireframes? Because they focus on structure, not appearance. In this phase I decide:
- What information goes on which page
- In what order it appears
- How users navigate the page
A wireframe is done when the information architecture is right. Design comes later.
Phase 3: The Design System
Before actual design work, I define the building blocks:
Colors:
- Primary, secondary, accent
- Text colors (primary, secondary)
- Background colors (primary, secondary)
- Status colors (success, error, warning)
Typography:
- Font family for headings, body, monospace
- Font sizes (h1–h6, body, small, meta)
- Line heights and letter spacing
Spacing:
- A grid system (e.g., 8-point grid)
- Section spacing, component spacing
Components:
- Buttons (primary, secondary, outline, ghost)
- Cards, form elements, navigation
Everything is created as a Component Library in Figma. Later, this exact system is translated into Tailwind CSS.
Phase 4: High-Fidelity Design
Now comes the actual design process. I design page by page within the defined grid. I follow these principles:
- Mobile first — I design mobile first, then tablet, then desktop
- Real content — No Lorem Ipsum. I use actual text (or as close as possible)
- States — Every component is designed in all states (hover, active, disabled, error, empty)
Auto Layout is my most important Figma tool. Every frame uses Auto Layout with defined spacing and padding. This ensures responsive design with consistent spacing.
Phase 5: The Handoff (to myself)
Since I also develop, there’s no classic “handoff error.” But I still document everything:
- Design is frozen — no changes during development
- Design tokens are exported — colors, spacing, type definitions
- Assets are optimized — images cropped and compressed to correct sizes
- CSS values are noted — border-radius, box-shadow, transitions
Phase 6: Development
Implementation follows a clear pattern:
1. Tailwind configuration — maps design tokens to CSS utilities 2. Component scaffolding in Astro — mirrors the Figma structure 3. Bottom-up development — small components first (Button, Card, Badge), then composite (Section, Grid), then pages 4. Responsive adjustments — mobile first, breakpoints upward with Tailwind’s responsive prefixes
Phase 7: Review and Polish
After development, I compare the result pixel-by-pixel with the Figma design:
- Perfect Pixel Check — overlay the Figma design over the developed page
- Spacing measurement — do margins and paddings match?
- Typography check — are font sizes, line heights, and letter spacing correct?
- State testing — hover, focus, active — all as designed?
Tools I Use
| Tool | Purpose |
|---|---|
| Figma | Design, wireframes, prototyping |
| Tailwind CSS | Design system in code |
| Astro | Component architecture |
| Perfect Pixel | Browser extension for pixel checks |
| Squoosh | Image optimization |
| SVGOMG | SVG optimization |
Why This Process?
Because it prevents the most common mistakes:
- No unnecessary iterations — wireframes and design system save time
- No surprises — the client sees the design before code is written
- No pixel drift — the end result matches the design
- Clean codebase — Tailwind configuration is based on the design system
The best side effect: when I pick up a project months later, I’m immediately oriented. The design system, documentation, and clean component structure make any resumption effortless.
Have a design and need first-class implementation? I’ll translate your Figma design into a pixel-perfect website. Email me at arnaut@miran.at.