Omkar Sabade

From Figma Node to Production Code: How we Taught Agents to build UI in PhonePe

Submitted Jun 17, 2026

Every design system has the same expensive seam: the handoff from Figma to code. A designer ships a pixel-perfect screen, and an engineer spends hours inspecting layout, colors, spacing, and variants, then hand-writing it into the codebase over and over, across every platform the design system targets. At PhonePe we built FigGen, an agentic pipeline that turns a selected Figma node into production-ready code for Mint - our 150+ component design system. It generates the individual components and then composes them into full screens. But the interesting part isn’t “LLM writes UI code.” It’s everything we had to build around the model to make the output trustworthy: a deterministic component classifier, a five-layer architecture contract enforced by a code-review agent, a compile-time token validator, and an MCP layer that bridges Figma and our component catalog.

This talk walks through the real architecture and the engineering decisions that made it reliable. We will show how a conductor agent orchestrates a four-stage pipeline: design analysis, implementation, code review, finalize - and how the same backbone scales up from a single component to a whole screen by mapping Figma layers onto catalog components. Why we deliberately split analysis and implementation into separate agents to clear accumulated Figma API context before any code is generated. We’ll dig into the parts that actually move accuracy - a decision tree that classifies every design into one of four component tiers (each mapping to a specific code pattern), per-variant token resolution tables, a token validator that we compile against the real design-system library to catch invalid tokens before generation, and BLOCKER gates that stop the pipeline when generated code hardcodes a color or skips an enum variant. Every run is isolated, versioned, and instrumented so the agent’s work is inspectable and auditable.

Takeaways:

  • A reusable blueprint for verifiable code-generation agents: deterministic classification, an enforced architecture contract, and compile-time validation as a feedback loop - patterns that apply to any structured output agent, not just UI code.
  • Why context engineering (splitting agents to clear context, clean handoff packets) and “fail-closed” gates matter more than prompt cleverness when you need an agent to produce code your team will actually merge.

Bio:

Lalchand Rathore is an Architect and Member of Technical Staff at PhonePe. He specializes in driving cross-platform application stability and performance at scale. Currently, Lalchand is focused on building AI-driven solutions that enhance both platform development workflows and end-user experiences.

Omkar Sabade is a Software Engineer and Member of Technical Staff at PhonePe. Working with the payment app core team, he specializes in iOS application stability and performance at scale. Omkar also focuses on integrating AI capabilities that enhance platform development experiences.

Who should attend:

Engineers and platform teams building production agents that generate code or other structured artifacts, design-system and frontend-infrastructure owners, and anyone wiring up MCP servers and multi-agent workflows who needs the output to be reliable enough to ship.

Draft slides (PDF/PPT, comments access):
TODO

2-min elevator pitch video:
TODO

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Jumpstart better data engineering and AI futures