mcpField
F
figma-design-system-sync

figma-design-system-sync

github.com/sergekostenchukDesign & UI3255 installsUpdated 18w ago
Repository

About figma-design-system-sync

figma-design-system-sync is a skill for aligning Figma design-system artifacts with local code conventions. It maps tokens and components, plans changes, and applies governance and safety checks to synchronization work.

Key features

  1. 01Audits Figma artifacts against local code conventions
  2. 02Maps variables, tokens, components, and variants
  3. 03Plans style and component updates
  4. 04Defines governance, naming, versioning, and rollout rules
  5. 05Requires migration maps and rollback paths for renames

Use cases

  1. 01Comparing Figma variables with local tokens
  2. 02Mapping Figma components to code components
  3. 03Planning design-system updates
  4. 04Establishing rules for design-system changes

MCP support

The skill reads Figma context and can invoke `figma:figma-code-connect` when available. For mutations, it routes work to `figma-canvas-editor` or `figma-apply-effects` with explicit scope.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-design-system-sync

After installing, type/figma-design-system-syncin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
assets/
design-system-sync-report.md
evals/
evals.json

Details

From the project README

Figma Design System Sync

Use this skill when Figma work touches reusable system contracts: variables, styles, components, variants, effects, assets, Code Connect, and local code tokens.

Modes

  • audit: compare Figma system artifacts to local code conventions.
  • sync-plan: plan variable/style/component updates.
  • token-map: map Figma variables to local tokens.
  • component-map: map components and variants to code components.
  • code-connect: create or review Code Connect files through the installed Figma skill.
  • governance: propose naming, versioning, and rollout rules.

Workflow

  1. Read Figma context with figma-context-reader unless a current context brief exists.
  2. Inspect the local code tokens/components before recommending sync actions.
  3. If Code Connect is requested, invoke figma:figma-code-connect when present.
  4. Build a diff: Figma source, code target, status, risk, and proposed change.
  5. For mutations, route to figma-canvas-editor or figma-apply-effects with explicit scope.
  6. Validate JSON/token outputs locally before treating them as evidence.

Guardrails

  • Do not rename or delete variables/components/styles without a migration map.
  • Do not treat generated code or generated variables as source of truth until reviewed.
  • Record which direction is authoritative for each artifact: Figma to code, code to Figma, or reconcile manually.
  • Keep variable binding promises compatible with current Figma Plugin API support.

Safety And Privacy

  • Treat unpublished tokens, library names, component inventories, and source component code as sensitive.
  • Do not push variable/component renames without an explicit migration map and rollback path.
  • Do not upload private token exports or component snapshots to external services without approval.

Output Shape

Use assets/design-system-sync-report.md.

Resources

  • Read $CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md for current capability checks.

Comments

Markdown supported