Syndigo: Design System and Design-to-Code

Design process

The audit told me what needed to change and in what order.

1. Audit: I inventoried every component across the products, mapped Figma against production, and flagged every duplicate and inconsistency.
2. Consolidation: I reduced each set of duplicates to one canonical component and documented its anatomy, variants, and version history. Each design frame also showed if the work was in ideation, in progress, or complete, and had the relevant ticket attached.
3. Code Connect and Storybook: I wrote the Code Connect and component files for more than 70 components. In Storybook, you could see the design and the coded component side by side.
4. Repository work: Engineering gave me access to the codebase, where I maintained the component and Code Connect files directly.
5. Coded prototypes: I introduced Figma MCP to turn designs into clickable prototypes before development. I also configured Lovable and Claude Design to use the approved components, so anything they generated stayed within the system.
6. Accessibility: I built semantic structure, labels, and implementation guidance into the components, so the accessibility requirements could still be reviewed during design and delivery.

Accessibility

The components used semantic structure, ARIA roles, and clear labels. They came with representative screen-reader checks and written guidance for teams extending the system, and information didn’t rely on colour alone. This case study does not claim a universal conformance level.

Impact metrics

I consolidated 70+ components into a single code-connected source of truth.

Syndigo got its first design-to-engineering pipeline, and coded prototypes let us test designs before development.

Product and design teams adopted component-based prototyping through Lovable and Claude Design.

Because the components were connected to code, designers and frontend engineers repeated less work.

Context and problem statement

The design system didn’t have a clear structure, and there was very little governance. The same component often existed in several inconsistent versions across products, and nothing connected design to shipped code. There wasn’t a Storybook, the components weren’t connected to code, and UX had no presence in GitHub.

Designers, engineers, and product managers each read the system differently. Delivery slowed down because engineers kept rebuilding interface patterns from inconsistent specifications.

Stakeholder analysis

1. Frontend engineers: They needed components that matched the approved design and could go into production without another round of interpretation.
2. Product designers: They needed one governed component kit, so they could spend their time on product problems instead of recreating common interface elements.
3. Product managers: They needed to test ideas quickly with prototypes that still matched the real product.

System audit

I started by looking at how teams were actually using the existing system, in Figma and in production.

1. Component inventory: I catalogued the components in use and identified duplicates.
2. Figma-to-production mapping: I compared the design libraries with the shipped interfaces to find where the two had drifted apart.
3. Team interviews: I spoke with designers and engineers about where the system helped and where they had to work around it.
4. UI Relay Figma plugin: I built a Figma plugin that maps components to code, tracks coverage and code health, generates and syncs component code, manages tokens and templates, and flags gaps. With it, keeping the system maintained became part of the team’s normal workflow.

Challenges and solutions

Design and code weren’t connected. I got access to the repository and maintained the Code Connect and component files myself, so approved design decisions could reach production without anyone having to interpret them again.

The library was also fragmented. I consolidated the duplicate patterns and built the UI Relay plugin to catch drift whenever new work came into the system.

To get teams to adopt it, I connected the system to coded prototypes, Lovable, and Claude Design. That way, teams could keep using the tools they preferred and still work with the approved components.