Which integrations are available for this server?

Extract design tokens, generate components, and synchronize with your Figma design system. Auto-generate Storybook stories with all component variants.

How do I use ds-mcp-sync?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@ds-mcp-sync Sync design tokens from Figma" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

ds-mcp-sync

by blumaa

Overview Schema Related Servers Score Discussions

TypeScript

Local

DS MCP Sync Server

An MCP (Model Context Protocol) server that enables seamless synchronization between your Figma design system and your Design System codebase.

Features

🎨 Design Token Sync - Extract colors, typography, spacing, and shadows from Figma styles
🧩 Component Generation - Automatically generate React components from Figma components
📚 Storybook Integration - Auto-generate Storybook stories with all component variants
⚛️ Atomic Design - Maps Figma components to atoms, molecules, and organisms
🔄 Incremental Updates - Only sync what has changed
🔍 Smart Analysis - Learns from existing component patterns

Related MCP server: Figma to React MCP

Installation

Clone and install dependencies:

git clone <repository-url>
cd ds-mcp-sync
npm install
npm run build

Configure your credentials:

Create a config/mcp-config.json file or set environment variables:

{
  "figma": {
    "fileId": "your-figma-file-id",
    "accessToken": "your-figma-personal-access-token",
    "componentPrefix": "DS"
  },
  "mds": {
    "rootPath": "../design-system",
    "componentPath": "component-lib/components",
    "tokenPath": "component-lib/tokens",
    "storybookPath": "component-lib/.storybook"
  }
}

Environment Variables (alternative):

export FIGMA_ACCESS_TOKEN="your-token-here"
export FIGMA_FILE_ID="your-file-id"
export DS_ROOT_PATH="../design-system"

Getting Figma Credentials

1. Get Figma Personal Access Token

Go to Figma Account Settings
Scroll to "Personal Access Tokens"
Click "Create a new personal access token"
Give it a name (e.g., "DS Sync") and create
Copy the token and add it to your config

2. Get Figma File ID

From your Figma design system URL:

https://www.figma.com/file/ABC123DEF456/Design-System
                        ^^^^^^^^^^^^
                        This is your file ID

MCP Integration with Claude Code

Add this server to your Claude Code MCP configuration:

macOS/Linux: ~/.claude_mcp.json Windows: %APPDATA%\Claude\claude_mcp.json

{
  "mcpServers": {
    "ds-mcp-sync": {
      "command": "node",
      "args": ["/path/to/ds-mcp-sync/dist/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-token",
        "FIGMA_FILE_ID": "your-file-id"
      }
    }
  }
}

Usage with Claude Code

Once configured, you can use these commands in Claude Code:

Check for Updates

claude "Check if there are any new components in Figma"

Sync Design Tokens

claude "Sync design tokens from Figma to DS"

Generate Specific Component

claude "Generate the Button component from Figma"

Full Synchronization

claude "Sync all new components from Figma to DS"

Validate Setup

claude "Validate the MCP server setup"

Available MCP Tools

Tool	Description
`check_figma_updates`	Compare Figma with current DS and report differences
`sync_tokens`	Extract and update design tokens from Figma styles
`generate_component`	Create a specific component with TypeScript and stories
`sync_all`	Perform complete synchronization (with optional dry-run)
`validate_setup`	Test Figma connection and validate configuration

How It Works

1. Design Token Extraction

Fetches color, typography, and effect styles from Figma
Converts to DS token format (colors.primary.500)
Updates component-lib/tokens/tokens.ts

2. Component Analysis

Scans Figma components and their variants
Determines atomic level (atoms/molecules/organisms) based on name and structure
Extracts component properties and maps to TypeScript props

3. Code Generation

Generates React components following DS patterns
Creates TypeScript interfaces with proper typing
Adds theme provider integration
Generates comprehensive Storybook stories

4. File Organization

component-lib/
├── components/
│   ├── atoms/
│   │   └── Button/
│   │       ├── Button.tsx
│   │       ├── Button.stories.tsx
│   │       └── index.ts
│   ├── molecules/
│   └── organisms/
└── tokens/
    └── tokens.ts

Component Mapping Rules

Figma Component	Atomic Level	Reason
Button, Input, Icon	Atoms	Basic UI elements
Card, Modal, Dropdown	Molecules	Groups of atoms
Header, Table, Navigation	Organisms	Complex layouts

Configuration Options

{
  "figma": {
    "fileId": "string",           // Required: Figma file ID
    "accessToken": "string",      // Required: Personal access token
    "componentPrefix": "string"   // Optional: Filter components by prefix
  },
  "mds": {
    "rootPath": "string",         // Path to MDS root directory
    "componentPath": "string",    // Relative path to components
    "tokenPath": "string",        // Relative path to tokens
    "storybookPath": "string"     // Relative path to Storybook config
  },
  "dryRun": false,               // Run without making file changes
  "verbose": true                // Enable detailed logging
}

Troubleshooting

Common Issues

"Figma API connection failed"

Verify your personal access token
Check that the token has access to the file
Ensure the file ID is correct

"DS paths not accessible"

Verify the rootPath points to your DS directory
Check that component directories exist
Ensure write permissions

"Component generation failed"

Check that the Figma component has proper naming
Verify component properties are set up correctly
Look for TypeScript compilation errors

Debug Mode

Set verbose: true in config or VERBOSE=true environment variable for detailed logging.

Development

# Development mode with hot reload
npm run dev

# Build for production
npm run build

# Run linting
npm run lint

# Type checking
npm run typecheck

Contributing

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

License

MIT License - see LICENSE file for details.

Need help? Check the troubleshooting section or create an issue on GitHub.# ds-mcp-sync

Available Tools

5 tools

check_figma_updatesB

Check for new or updated components in Figma design system

ParametersJSON Schema

Name	Required	Description	Default
No parameters

TDQS

B3.4/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so description carries full burden. It does not disclose behavioral traits like whether the check is read-only or what side effects occur.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Single, front-loaded sentence with no wasted words; every part earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Does not describe return value or how the agent should use the result, which is a significant gap given no output schema.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Input schema is empty, so baseline is 4. The description adds context about what is being checked ('new or updated components in Figma design system'), which adds value.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb ('check') and resource ('Figma design system components'), clearly distinguishing it from sibling tools like 'generate_component' or 'sync_all'.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No explicit guidance on when to use this tool vs alternatives; the context is only implied by the purpose.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

generate_componentC

Generate a specific component from Figma

ParametersJSON Schema

Name	Required	Description	Default
`componentName`	Yes	Name of the component to generate

TDQS

C2.8/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, and the description fails to disclose behavioral traits such as side effects (e.g., file creation, API calls), required permissions, or rate limits. 'Generate' is vague and leaves the agent unaware of potential impacts.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness3/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single short sentence, which is concise but lacks structure. It is not verbose, but it could be restructured to include more useful details without losing conciseness.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Considering the tool has no output schema, no annotations, and a simple parameter, the description is incomplete. It fails to explain what the generation process does or what the agent should expect as a result.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% with one parameter fully described. The description adds no extra meaning beyond the schema, so a baseline of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'Generate' and the resource 'specific component from Figma', distinguishing it from sibling tools like check_figma_updates or sync_all. However, it lacks specificity on what generation entails (e.g., code, design tokens) slightly reducing clarity.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance on when to use this tool versus alternatives. The description does not mention prerequisites, limitations, or contexts where other sibling tools would be more appropriate.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sync_allC

Perform full synchronization between Figma and DS

ParametersJSON Schema

Name	Required	Description	Default
`dryRun`	No	Run in dry-run mode without making changes

TDQS

C2.9/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, and the description does not disclose behavioral traits like whether changes are applied, what occurs during synchronization, or if it requires downtime. 'Full synchronization' implies potential writes but is vague.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single concise sentence with no extraneous words. It is front-loaded with the core action, though it could benefit from additional details.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the lack of annotations and output schema, the description is insufficient. It does not explain the synchronization process, side effects, or how the dryRun parameter modifies behavior, leaving significant gaps.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema already provides a description for the single parameter. The tool description adds no additional semantic value beyond 'perform full synchronization', so it does not improve understanding of parameters.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states the action ('perform full synchronization') and the resources ('between Figma and DS'), clearly indicating what the tool does. It distinguishes from siblings like sync_tokens by implying a broader scope.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance on when to use this tool versus alternatives such as sync_tokens or check_figma_updates. There is no mention of prerequisites, impact, or context, leaving the agent without direction.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

sync_tokensA

Sync design tokens from Figma to DS

ParametersJSON Schema

Name	Required	Description	Default
No parameters

TDQS

A3.5/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description fails to disclose behavioral traits such as whether the sync is destructive, incremental, or requires preconditions. Only states the action without any safety or side effect information.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that conveys the core purpose without any wasted words. It is appropriately sized for a tool with no parameters.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with no parameters, no output schema, and no annotations, the description is minimally adequate. It lacks context about what happens during/after sync, but given low complexity, it is not severely incomplete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Zero parameters exist, so the schema fully covers parameter details. The description adds no extra parameter information, but none is needed. Baseline is 4 for no parameters.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb (Sync), the resource (design tokens), and the direction (from Figma to DS). It effectively distinguishes itself from sibling tools like check_figma_updates and sync_all by specifying tokens specifically.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance on when to use this tool versus alternatives like sync_all. The description does not mention prerequisites, typical use cases, or exclusions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

validate_setupC

Validate MCP server configuration and connections

ParametersJSON Schema

Name	Required	Description	Default
No parameters

TDQS

C2.9/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, and the description only says 'validate' without disclosing any behavioral traits such as side effects, required permissions, or error handling. The agent cannot infer whether this is read-only or what happens on failure.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness3/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is extremely short (5 words) but lacks important context. It is not wastefully verbose, but the minimalism may hinder usability. A balanced description would include slightly more detail.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the simplicity (0 params, no output schema), the description is still incomplete. It does not specify what 'validation' entails (e.g., config file path, connection endpoints) or what the result indicates. More context is needed for an agent to invoke it correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

No parameters are defined, so the description does not need to add parameter details. The baseline score of 4 is appropriate as there is no burden to compensate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the purpose is to validate MCP server configuration and connections, using a specific verb and resource. It distinguishes from sibling tools that focus on syncing, checking, or generating.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No explicit guidance on when to use this tool versus alternatives, nor any exclusions or prerequisites. The usage is implied but not articulated.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

5 tool updatesv1.0.0Jul 6, 2026
- First observedcheck_figma_updates
- First observedgenerate_component
- First observedsync_all
- First observedsync_tokens
- First observedvalidate_setup

Install Server

RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A3.6/5.0

Disambiguation5/5

Each tool has a distinct purpose: checking updates, generating a component, syncing all, syncing tokens, and validating setup. No overlap in functionality.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern in snake_case (e.g., check_figma_updates, generate_component).

Tool Count5/5

5 tools is well-scoped for a Figma-DS sync server, covering key operations without being too few or excessive.

Completeness5/5

The tools cover the full sync workflow: checking updates, generating components, syncing tokens, performing full sync, and validating setup. No major gaps apparent.

Maintenance

ActivityInactive

ResponsivenessNo issues

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

design-system
app.zaklad
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
Design Tools Developer Tools
2
SupernovaOAuth
io.supernova
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Design Tools Documentation Access Developer Tools
1
standby-design-mcp A
io.github.KarstenKreh
Generate design systems: OKLCH color palettes, fluid type scales, spacing, shape and icon tokens.
Design Tools Developer Tools
821
marmo-ui A
io.github.mahmoudilyan
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Design Tools Developer Tools
142

Related MCP Servers

MCP Design System Bridge
Developer Tools App Automation Content Management Systems
brunonepomuceno
F
license
Not graded
quality
D
maintenance
Enables bidirectional synchronization between IDEs and Figma for Design System management, allowing developers to generate React components and synchronize design tokens, icons, and components across platforms.
Updated a year ago (2025-06-22 22:08 UTC)
1
-
Figma to React MCP
Developer Tools App Automation Testing & QA Tools
surisagar900
A
license
B
quality
C
maintenance
Automates the conversion of Figma designs into TypeScript React components and integrates with GitHub to create pull requests for the generated code. It includes visual regression testing with Playwright and accessibility validation to ensure implementations match the original designs.
Updated a year ago (2025-09-13 18:45 UTC)
5
25
MIT
@manansiingh/figma-react-mcp
Design Tools Developer Tools
MananSingh2001
A
license
A
quality
D
maintenance
Converts Figma designs into production-ready React components with design token extraction, widget registry integration, and micro-frontend module generation.
Updated 6 months ago (2026-03-18 07:39 UTC)
3
93
1
MIT
Component MCP Server
Design Tools Developer Tools AI & Machine Learning
Mirabelle-Workspace
A
license
Not graded
quality
D
maintenance
Connects Figma designs to React components using your actual component library, enabling AI tools to generate production-ready code with proper imports.
Updated 5 months ago (2026-04-20 03:59 UTC)
1
MIT

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/blumaa/ds-mcp-sync'

If you have feedback or need assistance with the MCP directory API, please join our Discord server