Design systems in Figma: bridging design and code

23 July 2026 — Martin Risseeuw, freelance Nuxt/Vue developer, Haarlem NL

As a freelance developer at DPG Media I work on marketing portals for selling newspaper subscriptions, and as a designer I build design systems in Figma. The most valuable lesson from combining both roles: a design system only works when the Figma library and the code components mirror each other exactly.

Why marketing portals need a design system

Subscription portals are conversion machines: pricing tables, offer cards, checkout steps and campaign pages that change constantly. Without a shared system every new campaign page becomes a small redesign, and inconsistencies creep in exactly where trust matters most — around the buy button.

How I structure the Figma library

I start with design tokens as Figma variables: color, typography and spacing scales defined once and referenced everywhere. On top of that come components with variants that map to real component states — not just visual variations. If a button has primary, secondary and disabled states in code, the Figma component has exactly those variants with the same names.

Mirroring Figma in Vue

The rule I hold both sides to: one Figma component equals one Vue component, and variant names equal prop values. When a designer hands over a screen, the developer reads it as a component tree instead of a picture. Handoff discussions shrink from pixel measurements to which variant goes where.

What this changes day to day

Designers stop redrawing the same card for the fifth time, developers stop guessing spacing, and reviews focus on the actual flow. New campaign pages come together in hours instead of days because both the Figma file and the codebase are assembled from the same parts.

Need a design system that developers actually use?

This design-developer overlap is where I do my best work. I'm available for freelance design system, Nuxt and Vue projects from Haarlem, the Netherlands — get in touch via the contact section.