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

Tool Version Features

Figma 2025 Real-time collaboration, AI improvements

FigJam Latest Whiteboarding, collaborative design

Design Tokens 2.0 Token standardization

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

• Design components in Figma with proper naming

• Export design tokens via Figma MCP plugin

• Sync tokens to code repository (JSON → CSS/SCSS/JS)

• Generate component boilerplate from Figma specs

• 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)

Tool Version Purpose

Figma 2025 Design tool

Design Tokens 2.0 Token standard

FigJam Latest Collaboration

Penpot Latest Open source alternative

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