
Riccardo Erra
Riccardo Erra is a developer advocate at Figma. He joined Figma as their first developer advocate in EMEA. Before joining Figma he worked as a software engineer for 15 years with the last few years spent as a design system engineer. At Figma he's empowering engineers to make the most out of the various Figma's tools tailored to developers.
Beyond Design-to-Code: Building Interfaces in 2027
AI Coding Summit NYC
Upcoming
Beyond Design-to-Code: Building Interfaces in 2027

Design-to-code used to be a one-way handoff: designers supplied intent and developers translated it into production. AI coding agents are changing that relationship. Developers can now give agents structured context from Figma, turn it into working interfaces, and bring code-generated results back to an editable canvas for review and iteration. In this demo-led talk, Riccardo Erra explores how the Figma MCP server connects these steps, where human judgment still matters, and the practical patterns teams can use as design and code move closer together in 2027.
Fast Track Design to Code With Figma MCP
JSNation US 2025
23 min
Fast Track Design to Code With Figma MCP

Design-to-code moves faster when your agent has the right context at each step. I’ll show how the Model Context Protocol (MCP) lets you stitch together servers so the agent can pull structured design signals from Figma – variables, components, design notes, and Code Connect mappings – and pair them with your editor/project rules to make grounded implementation choices. From there, adding a few more servers for documentation, runtime checks in a real browser, and version control gives the agent richer, verifiable inputs instead of guesswork. The payoff: fewer “rogue” detours because decisions are anchored to real sources and less context-switching since developers stay in the IDE while the agent gathers what it needs. It’s a practical path from design intent to production-ready changes – powered by composable context rather than one-off integrations.