How Decagon Uses AI For Design System Saturation | Figma Blog (opens in new tab)

Decagon built its Deco design system to maintain quality and consistency as its AI-powered customer service platform scaled. By connecting Figma, Storybook, coding agents, and Figma MCP, the company reduced design-to-code friction and enabled agents to produce higher-fidelity implementations. The result is a shared design language and a continuous loop between design and engineering.

Building a Design System for Quality at Scale

• Decagon initially had no formal design system, while its product and team were expanding rapidly.
• Inconsistencies across the platform weakened the polish expected by enterprise customers.
• Designers and engineers created Deco together, addressing implementation details early, including:
  • Focus-mode behavior
  • Disabled, read-only, error, and warning states
  • Placeholder decisions
  • Existing code patterns and edge cases
• Deco grew into an organization-wide Figma library with hundreds of components, styles, and variables.
• Library analytics recorded tens of thousands of component insertions in 30 days, indicating broad adoption.
• The system provides:
  • A single source of truth for design and implementation
  • A shared vocabulary between designers and engineers
  • Faster screen assembly from reusable components
  • Greater consistency across teams and product areas

Connecting Design and Code with Figma MCP

• Before MCP, designers exported specifications, developers interpreted them, and discrepancies were discovered during review, creating repeated back-and-forth.
• Decagon moved its design-system components into Storybook so engineers and coding agents could work from precise, documented implementations.
• The team created coding-agent skills that:
  • Require agents to use approved design-system components
  • Help designers add new components while keeping Figma and code aligned
• With Figma MCP enabled, agents can access design specifications, code context, and the Figma canvas within the same workflow.
• Designers can provide a Figma link to a coding agent, which uses design context and maps the requested interface to Deco components.
• This produces high-fidelity starting points and speeds up iteration while reducing divergence between the intended design and the final code.

Decagon’s experience suggests that design systems become significantly more valuable when they are connected directly to development tools and AI agents. Maintaining synchronized component libraries across Figma and code can help fast-moving teams scale without sacrificing consistency or implementation quality.