moai-domain-figma

Design-to-code automation uses MCP-enabled tooling to extract design context, tokens, and assets from Figma, then generates code scaffolding and component libraries. This Skill orchestrates that pipeline for enterprise design systems using Figma as the single source of truth, supporting sequential and parallel execution patterns across multi-project ecosystems.

Design token extraction outputs tokens as CSS variables and JSON definitions. This Skill retrieves variable definitions from your Figma design system via MCP tool invocations, then exports them in formats ready for integration into your codebase.

Automated component library generation retrieves design context and asset definitions from Figma using MCP calls, then scaffolds library code that reflects your design system structure. This approach keeps generated components in sync with Figma as your source of truth.

Yes. This Skill supports multi-project ecosystems where Figma serves as the centralized design system. It handles design token extraction, asset export, and code generation across sequential, parallel, and conditional execution patterns for large-scale design-to-code pipelines.

MCP tool invocations include get_design_context to retrieve design metadata, get_variable_defs to extract token definitions, and get_screenshot to export visual assets. These enable programmatic access to Figma designs for automated export and code generation workflows.

Yes. The Skill supports sequential, parallel, and conditional execution patterns, allowing you to orchestrate multiple design extraction and code generation tasks in a single workflow or route them based on conditions.