Quick Reference (30 seconds)

Enterprise Figma & Design Systems

Primary Focus: Design systems, component libraries, design tokens, documentation Best For: UI/UX design, design system creation, component documentation, design handoff Key Tools: Figma 2025, FigJam, design tokens, component variants Auto-triggers: Figma files, design system discussions, component documentation

Implementation Guide (5 minutes)

Features

• Design system architecture with W3C DTCG 2.0 token standards
• Component library management with variants and states
• Design-to-code workflow automation via Figma MCP
• Accessibility compliance auditing (WCAG 2.2)
• Real-time collaboration and version control
• Asset export and developer handoff

When to Use

• Creating or refactoring design systems for multi-platform projects
• Building accessible component libraries with proper documentation
• Automating design token synchronization between design and code
• Setting up design-to-development workflows with version control
• Implementing design system governance and maintenance processes

Core Patterns

Pattern 1: Design Token Architecture

// Design tokens following DTCG 2.0
{
  "color": {
    "brand": {
      "primary": { "$value": "#0066CC", "$type": "color" },
      "secondary": { "$value": "#6C757D", "$type": "color" }
    }
  },
  "spacing": {
    "base": { "$value": "8px", "$type": "dimension" }
  }
}

Pattern 2: Component Variant System

• Create main components with logical variant properties (size, state, theme)
• Use auto-layout for responsive behavior
• Document usage guidelines in component descriptions
• Maintain consistent naming: Component/Variant/State

Pattern 3: Design-to-Code Workflow

1. Design components in Figma with proper naming
2. Export design tokens via Figma MCP plugin
3. Sync tokens to code repository (JSON → CSS/SCSS/JS)
4. Generate component boilerplate from Figma specs
5. Validate design compliance with automated tests

What It Does

Enterprise-grade design system and UI kit development with Figma. Component documentation, design tokens, accessibility, and seamless developer handoff.

Key capabilities:

• ✅ Design system architecture and governance
• ✅ Component libraries with variants
• ✅ Design tokens and design-to-dev workflow
• ✅ Accessibility auditing in Figma
• ✅ Documentation and design specs
• ✅ Asset management and versioning
• ✅ Developer handoff and code generation

When to Use

Automatic triggers:

• Design system creation
• Component library management
• UI kit development
• Design documentation

Manual invocation:

• Design system audit
• Component strategy review
• Token management
• Design-to-dev workflow optimization

Three-Level Learning Path

Level 1: Fundamentals (See examples.md)

Core design system concepts:

• Figma Basics: Pages, frames, components, variants
• Component System: Primary vs secondary components
• Design Tokens: Colors, typography, spacing
• Documentation: Specs, guidelines, patterns
• Accessibility: Color contrast, labels, states

Level 2: Advanced Patterns (See modules/component-strategy.md)

Production design systems:

• Variant Management: States, sizes, variations
• Token Architecture: Design tokens for dev/design
• Component Governance: Naming, updates, versioning
• Design Documentation: Specifications, usage
• Figma Plugins: Automation, token sync

Level 3: Developer Handoff (See modules/dev-workflow.md)

Design-to-development workflow:

• Code Generation: Components from Figma
• Specs & Assets: Automated export
• Design Tokens: Sync to code repositories
• CI/CD Integration: Design system versioning
• Quality Assurance: Design compliance testing

Best Practices

✅ DO:

• Use main components for reusability
• Maintain consistent naming conventions
• Document all design tokens
• Version design system regularly
• Conduct accessibility audits
• Review component variants
• Keep documentation updated

❌ DON'T:

• Create duplicate components
• Skip accessibility checks
• Ignore design token standardization
• Over-complicate component structure
• Use inconsistent naming
• Forget to document changes
• Ignore developer feedback

Tool Versions (2025-11-22)

Works Well With

• moai-domain-frontend (React component mapping)
• moai-lang-html-css (HTML/CSS semantic markup)
• moai-system-universal (UX/UI design principles)

Learn More

• Examples: See examples.md for design system patterns
• Component Strategy: See modules/component-strategy.md for component systems
• Dev Workflow: See modules/dev-workflow.md for design-to-dev handoff
• Figma Docs: https://help.figma.com/
• Design Tokens: https://designtokens.org/

Changelog

• v4.0.0 (2025-11-22): Modularized with strategy and workflow modules
• v3.0.0 (2025-11-13): Figma 2025 features, design tokens 2.0
• v2.0.0 (2025-10-01): Component variants, design systems
• v1.0.0 (2025-03-01): Initial release

Skills: Skill("moai-lang-unified"), Skill("moai-lang-html-css"), Skill("moai-system-universal") Auto-loads: Design system files, Figma projects