How Coinbase built an AI Agent that converts Figma designs into production-ready code
And how you can build your own Agent that does the same thing. Plus: other examples of AI Design Agents in action from Monday.com, Uber and more
🔒DoP Deep goes deeper into the concepts and ideas that are covered in the Weekly Briefing to help you learn lessons from the experiences of top tech companies. If you’d like to upgrade to receive these in-depth pieces of analysis you can upgrade below. New reports are added every month.
The hand off process between design and engineering has historically been one of the most time consuming; a designer finesses a bunch of screens in tools like Figma and hands it over to an engineer who takes the design and rebuilds it in production code.
According to Coinbase, this step was eating up a massive 80% of the delivery time for its product teams. And so they decided to do something about it by building an AI Agent that converts Figma designs into production-ready code. The result of this was that the development of a new feature that would typically take around 16 days was reduced to just 4:
AI agents are transforming the product design to development handoff process and in this Deep Dive, we’re going to take a closer look at what exactly Coinbase built with a step by step breakdown of how it works in more detail. Then, we’ll extract some of the core principles from this set up and explore how you can build your own version of the same thing.
Coinbase isn’t the only company doing this, of course, and so we’ll finish with some other examples of similar design to coding internal Agents and features from other leading companies that you can use as inspiration for your own processes.
Coming up:
A deeper look at what Coinbase built with their Figma to Code Agent
How to build your own version of this with prompts and templates you can use
Examples of similar agents from other companies including Monday, Uber and more
What Coinbase built and why
Coinbase built an AI agent that converts Figma designs into production-ready code. According to their Senior PM Marvin Mathew, this process of translating a design file into working software was eating roughly 80% of delivery time on their internal tooling platform. A typical backend domain with 8-12 endpoints took one to two weeks. The frontend was another one to two weeks on top of that.
The agent they built cut that down dramatically. And their first pilot shipped a feature in four days that would normally take two to four weeks. Here’s a snapshot of what it is and how it works:
The Coinbase PM and engineer who worked on it were thoughtful in their selection of this use case as a potential opportunity for AI agents vs other internal use cases.
Translating a Figma design into code is largely mechanical: you map components, match layouts, wire up data fetching, write tests, and check everything against the team’s bar before it can ship. This takes time and attention, but it doesn’t really need an engineer’s judgment, making it a solid use case for offloading onto an AI Agent.
How it works - and how you can build your own version of this Agent
The system has a foundation with three core parts: a reference implementation, a rules document, and prompt templates - and they work together in a specific sequence.