DEVOURED
Learning Agentic Design Systems
An experiment with Google's Antigravity IDE and Figma Console MCP enabled a two-way workflow — generating Figma components from code and React code from Figma designs — keeping design tokens in sync throughout.
What: A hands-on exploration of building an "agentic design system" workspace that uses AI to bidirectionally generate both React components from Figma designs and Figma components from code. The setup leverages Figma Console MCP (a Model Context Protocol server) within Antigravity IDE to maintain synchronization between design tokens, code, and Figma variables, while also generating metadata files that provide AI agents with structured rules for consistent component usage.
Why it matters: This points to a fundamental shift in design systems work: teams must move from writing human-readable documentation to encoding governance through machine-readable metadata and agentic workflows. Designers will need to learn to instruct AI agents rather than create static mockups, while design system maintainers must structure rules and context so AI can generate consistent, on-brand outputs. The traditional workflow of designers creating Figma files and handing them to engineers is becoming obsolete in favor of spec-driven, AI-mediated collaboration.
Takeaway: Experiment with Figma Console MCP in Antigravity or similar agentic IDEs to set up bidirectional design-code workflows, and explore generating component metadata that encodes design system rules for AI consumption rather than just human documentation.
Deep dive
- The author set up a two-way workflow where AI agents can generate Figma components from React code and React code from Figma designs, using Google's Antigravity IDE with the Figma Console MCP server
- Code-to-design workflow: imported shadcn components, generated design tokens as Figma variables, then used AI to create matching Figma components that got "60-90% there" depending on complexity
- Design-to-code workflow: brainstormed a card component design using Pencil (integrated in Antigravity), converted it to Figma with proper variables via MCP, then generated React code and metadata
- Designers reviewing AI-generated Figma components need proficiency in auto layouts, variables, props, slots, and understanding of how components are built in code
- Generated two types of metadata: human-readable documentation from Figma components, and machine-readable metadata (using Cristian Morales' skills) that guides AI on when, where, and how to use components correctly
- The codebase-index skill prevents AI from inventing raw HTML or inline styles by giving it exact locations of design tokens and components
- Design parity reports automatically check alignment between Figma and code, generating HTML dashboards that track drift and enable AI-assisted corrections
- The shift from "vibe coding" to "specs design" is necessary for automated UI generation — AI needs precise, structured, machine-readable context to produce quality outputs
- Design system teams must learn to encode governance through structured data rather than writing website documentation for humans
- Skills in the workspace are created once and reused, allowing designers to create pull requests and commit changes after modifying Figma, bringing them closer to actual code
- This represents a role transformation: designers move from "drawing pretty pictures" to instructing agents on building design and code that follows system rules
- Context generation, pattern understanding, and rule encoding become critical skills for designers in AI-integrated organizations
Decoder
- MCP (Model Context Protocol): A protocol that allows AI agents to connect to external systems and tools with read/write access, like Figma Console MCP which lets AI manipulate Figma files programmatically
- Antigravity IDE: Google's agentic IDE (a fork of VS Code) that orchestrates multiple AI agents simultaneously across different workspaces
- Design tokens: Atomic design values (colors, spacing, typography) stored as variables that can be referenced across design and code
- shadcn: A popular collection of reusable React components built with Radix UI and Tailwind CSS
- Skills: Reusable AI capabilities or workflows that can be embedded in an agentic workspace and invoked during future tasks
- Design parity: The degree of alignment between design specifications (in Figma) and actual implemented code
- Vibe coding: Informal, prompt-driven UI generation without strict design system constraints
- Specs design: Structured, specification-driven design that provides precise context for AI-powered generation
Original article
An experiment with Google's Antigravity IDE and Figma Console MCP enabled a two-way workflow — generating Figma components from code and React code from Figma designs — keeping design tokens in sync throughout. Metadata files were also generated to give AI agents structured rules and context for consistent, on-brand component usage. The experience points to a broader shift: design system teams must move from writing human-readable guidelines to encoding governance through machine-readable metadata and agentic workflows.
Explore all 66 articles in today's digest
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi