Claude Code × Figma – when code and design speak the same language, you get results faster

Design and code in different worlds

How many meetings does it take for a developer to build exactly what the designer intended? In most teams, the answer is: too many.

This isn’t due to carelessness or lack of skill. In most organizations, design and code simply live in different places: the design team in Figma, the development team in a code editor and between them flows a constant stream of meetings, comments, and tickets. Slow, and often unfortunately inefficient for both sides.

A pilot at a large Finnish company

We ran an AI pilot for a large Finnish company whose situation was a familiar one: design lived in Figma and implementation in code, with no smooth connection between the two. Iterations were made slowly, mediated by people, from one meeting to the next.

We set out to test one concrete question: could Claude Code and Figma together shorten this distance?

In practice, this meant the following: we took an existing view from the code into Figma and, on that basis, designed a new view that hadn’t yet been coded. Using Figma’s MCP Server, Claude Code generated a working React implementation from it. We validated the solution together with the client by going through the code, the time the implementation took, and the benefits it brought.

Beyond the obvious things – increased speed and a shortened design-to-development cycle – the resulting outcome matched the design perfectly, without the typical changes that creep in during coding. The distance between design and code shrank, and the end result genuinely matched the design that had been intended.

How does the workflow work in practice?

The process can start from either code or design. Typically from code: Claude Code builds the view as a React implementation, roughly but functionally. Through Figma’s integrations, it’s brought into Figma, where the designer sees the actual view rather than a separate mockup.

In Figma, the layout, typography, and colors are edited without anyone needing to touch the code. The changes flow back to Claude Code, which updates the implementation. The developer isn’t left guessing what the designer meant – they see it directly.

A springboard, not a revolution

While the workflow is admittedly genuinely impressive, it still won’t change everything. Designers’ and developers’ jobs remain secure going forward, even though faster collaboration will surely save time and make work more efficient.

This process is, however, a step toward a situation where design and code aren’t separate, disconnected files. A common language is found without anyone having to learn a new tool or give up an old one.

I’d especially like to challenge those teams where the line between design and code has always been clear and firmly in place. Try out what happens when a designer and a developer can look at and talk about the same thing, with no gap between them.

Where does this work best?

At Identio, we’ve noticed that the workflow between Claude and Figma works best in situations where design and development teams are used to operating separately. Building a design system or component library is also a natural starting point – though, when doing so, a clear understanding of who owns the design system needs to be front of mind.

And the workflow also works when the designer happens to be the person responsible for both design and implementation – a role that technically proficient designers will increasingly fill in the future.

Caveats

The code Claude Code generates needs to be reviewed. It doesn’t always know when it’s wrong, and it can be wrong very convincingly. Synchronization between Figma and code doesn’t work seamlessly in every situation, and in places that require accessibility or other precision, manual work may still be needed.

This doesn’t change what the AI pilot also demonstrated, though: the barrier to getting started is lower than ever, and that’s an excellent foundation for adopting new AI-assisted workflows.

Let’s try it together

We have experience with this workflow from both client projects and our own pilots. If you’d like to find out how it would fit your situation, get in touch and let’s think it through together!