Journal / Design
Your design system has a new user: the coding agent
AI can reproduce a screen. The harder job is getting it to use the components you already maintain.
A concrete signal
On 2 September 2026, Figma published Coinbase’s evaluation of Code Connect in an agent-assisted workflow. Across three controlled runs, the team reported lower token use, implementation time, and cost when component mappings were available. It is a small, specific experiment, not a universal productivity forecast. The useful finding is that explicit connections between design components and their code equivalents reduced guesswork.
What to connect first
Start with the components an agent is most likely to rebuild incorrectly: form fields, navigation, buttons with multiple states, and composed patterns such as steppers. A useful mapping points to the real implementation and shows its supported properties. A screenshot alone cannot explain which component is deprecated, how validation works, or when a variant should be used.
Our take
Treat these mappings as part of maintaining the design system. When a component changes, update its examples and connection to the design file in the same change. For a practical evaluation, choose one representative screen, hold the model and brief constant, and compare component reuse, accessibility, visual accuracy, and review effort. Faster output matters only if the team can keep it.
Put it into practice.
Map five frequently used components, then review one agent-built screen against your existing implementation. Count unnecessary custom components, not just elapsed minutes.
Sources & further reading
Editorial analysis by BEMATE. Sources reviewed 6 September 2026.