Flink Hub App · 2026 · Senior Product Designer
Closing the gap between design and code
A pipeline that keeps Figma, Storybook, and production in sync, and makes AI-assisted design more reliable
Outcome & Impact
For the first time, a designer on the team could open a Pull Request directly
Figma, Storybook, and the production codebase were aligned for the first time in the product’s history
AI-assisted prototyping became more reliable because components in Figma matched production 1:1
The PM and design lead noted a clear acceleration in the ideation process
One designer, 150+ warehouses
Flink operates 150+ warehouses across Germany and the Netherlands. Warehouse workers use the internal Hub App every day, on Android Zebra devices, to manage inventory, order picking, inbound, and fleet operations.
I was the only designer on the product, responsible for new features and for the component library behind them.
A design system in name only
When I joined, the component library had around 50 components in a single Figma file. It was a flat list with duplicated items, inconsistent naming, and components built with outdated Figma practices.
The deeper problem sat in the gap between design and code.
Handoff was simple. The designer attached a Figma Dev Tools link to the Jira ticket, and the frontend developer implemented from there. There was no shared vocabulary and no sync process, and nobody could tell whether what got built matched what was designed.
The two sides drifted apart without anyone deciding it. When a component didn’t exactly match something that already existed, a new one was created without a conversation. The codebase filled up with partly duplicated components, each slightly different from its Figma counterpart. Figma, Storybook, and the production codebase ended up so far apart that neither side trusted the other.
A pipeline problem
The problem was the pipeline between design and engineering.
There was no shared source of truth and no process for keeping the three systems in sync, and neither side had a reason to invest in alignment. Fixing the library alone wouldn’t have solved anything. The gap itself had to be closed.
A second reason came from my own workflow. I had started using Claude Code to generate early prototypes and screens directly in Figma, and the better the library was, the more accurate those outputs got. A synchronized component system would improve code quality and also give AI-assisted design a more faithful base.
Phase 1 - Restructuring the library
~2–3 weeks, alongside daily work
Before tackling the gap between design and code, I rebuilt the Figma library from scratch. I separated components into atoms and molecules, removed duplicates, modernized the component architecture, and set consistent naming conventions.
That gave us a clean foundation and a shared vocabulary for the audit that followed.
Phase 2 - The audit
~1 week, alongside daily work
A new frontend developer joined the team, and we saw a chance to reset the relationship between design and code. The initiative came from both sides, since each of us had noticed missing and inconsistent components. Together we designed the plan, with Storybook as the source of truth and a pipeline to keep everything in sync.
We started with a triple audit that compared every component across Figma, Storybook, and the production codebase.
What we found:
Only in Figma: Bottom sheets, fully designed, never implemented
Only in Code: Legacy product cards, removed from Figma but still living in the codebase
In both, but diverged: Primary button, different variants on each side, with no single correct definition
The audit gave us a precise map of where the gaps were and what the pipeline needed to close them.
Phase 3 - Building the pipeline
~3 months, alongside daily work
We made Storybook the single source of truth, the only place where a component counted as “done.” Then we built a workflow where staying aligned was the easiest option. Each component went through the same loop.
I used Claude Code with the Figma MCP to recreate missing components and all their variants directly inside Figma, referencing the real production code.
I reviewed and adjusted each component manually for craft and accuracy.
Once a component was ready, I opened a Pull Request directly with the Figma-to-Code MCP, with no handoff and no waiting.
The frontend developer reviewed, updated the real component, and published it to Storybook.
We closed each loop with a quick QA round in the live app.
Because the components in Figma now matched the codebase 1:1, Claude Code could generate screens that used real production components accurately. The synchronized library reduced drift and also made AI-assisted prototyping much more reliable.
One loop per component
We built and validated the full pipeline end to end in a bit over 4 months, while still delivering features and day-to-day product work.
The PM and the design lead both said the optimized library had sped up ideation. Storybook now showed what Figma showed. The gap had been growing quietly for years, and the pipeline gave us a way to close it. It also made every later feature faster to explore.