Design to Code Pipeline
In this project case study, I will be sharing my experience contributing to the development of a design-to-code pipeline at LexisNexis Risk Solutions.
The goal was to build a scalable Figma system that connects directly to Storybook tokens—ensuring accessible, consistent UI and improving alignment between design and engineering.
Client
LexisNexis Risk Solutions
Type
Product Design
Year
2025
Process
Building the Color Token Library
I created a Figma library with over 180 colors and semantic aliases to support our design-to-code workflow. Each swatch was WCAG-tested for accessibility and clearly labeled to match usage in the UI. This made it easy for designers to find the right token and reduced visual inconsistencies across screens.
Aligning Figma with Storybook
I collaborated with a UX engineer to define the token schema and test the JSON export from Figma. By reviewing structure and names early, we prevented future mismatches and made sure the variables rendered correctly in Storybook. This connection helped bridge the gap between design and dev environments.
Streamlining the Handoff Process
Previously, updating the color palette required 1 designer and 2 UX engineers and could take over a full day. With our new token-based workflow, a single designer can now complete the update in under 30 seconds. I helped implement a smart naming convention that made tokens easy to find and apply, reducing confusion and speeding up adoption across the team.
Outcome
The finalized design-to-code pipeline included a structured Figma token library, an export-ready JSON schema, and a functional Storybook integration.
This system reduced design-engineering handoff time, improved UI consistency, and is now used as the foundation for the 2025 design system rollout.
