skills.rest
moongci38-oss
moongci38-ossCOMMUNITY
Explore all skills by this author →
GitHub

figma-design-sync

Synchronize Figma design tokens into Claude design prompts via Figma MCP.

Updated Jun 3, 2026
Search Tags:#claude#figma#design tokens#design consistency#token mapping
One-click install
npx skills add https://github.com/moongci38-oss/forge-plugins --skill figma-design-sync-moongci38-oss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-design-sync
Source: https://github.com/moongci38-oss/forge-plugins/tree/main/forge-design/skills/figma-design-sync
Command: npx skills add https://github.com/moongci38-oss/forge-plugins --skill figma-design-sync-moongci38-oss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma-mcp, codex-critic, gemini, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill ensures design consistency by synchronizing Figma design tokens with Claude's design prompts, reducing discrepancies between Figma and Claude's outputs.

Core Features & Use Cases

  • Figma Token Fetching: Fetches design tokens, metadata, and screenshots from Figma using Figma MCP.
  • Token Mapping: Maps Figma variables to standard tokens.
  • Documentation Update: Updates CLAUDE-DESIGN-PROMPTS.md and ANALYSIS-REPORT.md for consistency.
  • Use Case: A designer can use this Skill to ensure that design tokens extracted from Figma are accurately reflected in Claude's design outputs.

Quick Start

To synchronize design tokens from a Figma file, use the command: /figma-design-sync <Figma URL> <Target Document Path>

Frequently Asked Questions about figma-design-sync

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I synchronize design tokens between Figma and Claude?▼

To synchronize design tokens between Figma and Claude, this Skill fetches tokens, metadata, and screenshots from Figma using Figma MCP and maps them to standard tokens for Claude's design prompts. It requires a Figma URL and a target document path to execute the sync.

What is Figma token mapping and how does it ensure design consistency?▼

Figma token mapping aligns Figma variables with standard tokens used in Claude's design prompts. By synchronizing these tokens, it ensures that design outputs generated by Claude accurately reflect the original Figma design specifications, reducing visual discrepancies.

Do I need Figma MCP to fetch design information for Claude prompts?▼

Yes, Figma MCP is a required dependency to fetch design information such as tokens, metadata, and screenshots. This Skill uses Figma MCP as the primary integration method to retrieve and synchronize data from Figma files.

What happens when Figma MCP hits a rate limit during token synchronization?▼

When Figma MCP hits a rate limit during token synchronization, the Skill automatically falls back to using Codex or Gemini Vision. This ensures the token fetching and mapping process continues without interruption.

Which documents are updated when synchronizing Figma design tokens?▼

Synchronizing Figma design tokens updates CLAUDE-DESIGN-PROMPTS.md and ANALYSIS-REPORT.md. These documentation updates maintain design consistency and provide detailed analysis reports for the synchronized design tokens.

Related Skills

Explore More Design & Creative Skills→
MercurykzMercurykz

figma-implement-design

Translates Figma URLs or node IDs into project-conformant code with WCAG-compliant output using Figma MCP workflow.

Community
Advanced
hoshiyar-singh8hoshiyar-singh8

figma-analysis

Parses Figma URLs and generates design-context diffs with token mappings and ASCII layouts.

Community
Intermediate
paxlabs-incpaxlabs-inc
7

popular-web-designs

Generates HTML and CSS prototypes from54 design system token templates for brands like Stripe, Linear, and Vercel.

Community
Intermediate
MichelKerkmeesterMichelKerkmeester
31

mcp-figma

Retrieve and export Figma design data via MCP tools.

Community
Advanced