From hardcoded to connected: building a design-to-code system
Creating a shared token architecture between Figma and Swift for a live iOS app
Design Engineering
Design Systems
Design Tokens
Figma to Code
Overview
Length
2 weeks
Role
Designer & Developer
Scope
Design system architecture, token migration, Figma-to-code pipeline
Team
Solo
When a product moves from prototype to production, the system underneath has to grow with it.
The Problem
I built Rexx fast. Speed meant hardcoded values everywhere: colors typed as hex codes, spacing as magic numbers, corner radius inconsistent across screens.
It worked, but it was fragile.
Changing one color meant hunting through 30 files. And the Figma file and codebase had drifted apart.
The Approach
I created a two-layer token system in Figma: primitives (raw values like grayscale and spacing scales) and aliases (semantic tokens like colorBgBase and radiusLarge that reference primitives and support light and dark modes).
Then I mirrored the same architecture in Swift. Using the Figma MCP server, I connected the two so design decisions and code stay in sync.
Definition of Done
A component wasn't considered token-connected until three things were true: the Figma layer referenced an alias variable (not a raw hex), the corresponding Swift enum value existed in RexxStyles.swift, and the component rendered correctly in both light and dark mode.
The goal wasn't a 200-component library. It was a foundation where every design decision has one source of truth - and that source compiles.
Impact
Source of truth
Figma and Swift share the same token architecture
Files migrated
Every screen updated in a single release
Design tokens
Semantic aliases covering color, spacing, radius, and typography
Reflection
Building fast is the right call when you're validating a product. But there's a moment where speed becomes debt. Recognizing that moment and investing in the foundation, without slowing down what users see, is the design engineering skill that doesn't show up in a mockup.
Interested?
Let’s connect.
I’m open to roles where design is a true partner in shaping product direction. If you’re building something with purpose, I’d love to chat.