figma-sync-design-system
Sync Design System Components
Name
figma:figma-sync-design-system - Sync design system components between Figma and code
Synopsis
Synchronize design system components between Figma and codebase using Code Connect mappings. Identifies gaps, generates missing components, updates existing ones, and creates bidirectional links between design and code.
Description
You are tasked with synchronizing a design system between Figma and the codebase using the Figma MCP server and Code Connect. This command analyzes both Figma components and code components to identify discrepancies and facilitate keeping design and code in sync.
Implementation
Inventories all Figma components via MCP server and scans codebase for component library. Compares component sets to identify missing, outdated, or unmapped components. Generates Code Connect configuration files to establish bidirectional mapping between Figma designs and code implementations.
Your Task
More from thebushidocollective/han
android-jetpack-compose
Use when building Android UIs with Jetpack Compose, managing state with remember/mutableStateOf, or implementing declarative UI patterns.
1.1Kfastapi-async-patterns
Use when FastAPI async patterns for building high-performance APIs. Use when handling concurrent requests and async operations.
785storybook-story-writing
Use when creating or modifying Storybook stories for components. Ensures stories follow CSF3 format, properly showcase component variations, and build successfully.
487atomic-design-fundamentals
Use when applying Atomic Design methodology to organize UI components into quarks, atoms, molecules, organisms, templates, and pages. Core principles and hierarchy.
367solid-principles
Use during implementation when designing modules, functions, and components requiring SOLID principles for maintainable, flexible architecture.
250angular-rxjs-patterns
Use when handling async operations in Angular applications with observables, operators, and subjects.
216