MCP Design System Bridge

A Model Context Protocol (MCP) for bidirectional synchronization between IDE and Figma for Design System management.

Features

1. React Component Generation

Generate React components with TypeScript
Support for variants using class-variance-authority
Interactive states (hover, focus, disabled, loading)
Forwarded refs for composition
Styled with Tailwind CSS + CSS Modules
Complete JSDoc documentation
Automatic Storybook stories
React Testing Library tests
Barrel exports

2. Figma Component Generation

Create component frames
Apply design tokens
Generate variants automatically
Create responsive auto-layout
Integrated documentation

3. Figma → IDE Extraction

Design tokens (colors, typography, shadows, spacing, borders)
Icons (optimized SVG, multiple formats)
Images (PNG, JPG, WebP with optimization)
Components (structure, props, variants)

4. IDE → Figma Synchronization

React component analysis
Props and variants extraction
Tailwind/CSS style analysis
Interactive state detection
Design token mapping

5. Bidirectional Synchronization

Automatic change detection
Confirmation prompts
Visual diff
Sync history
Rollback capability

Installation

npm install mcp-design-system-bridge

Configuration

Create a .mcp-config.json file in your project root:

{
  "figma": {
    "accessToken": "your-figma-access-token",
    "fileId": "your-figma-file-id"
  },
  "paths": {
    "components": "src/components",
    "tokens": "src/tokens",
    "icons": "src/icons",
    "assets": "src/assets"
  },
  "generation": {
    "useTailwind": true,
    "useCSSModules": true,
    "useStorybook": true,
    "useTests": true
  }
}

Usage

Generate React Component

import { MCP } from 'mcp-design-system-bridge';

const mcp = new MCP({
  figmaAccessToken: 'your-token',
  figmaFileId: 'your-file-id'
});

const component = await mcp.generateReactComponent({
  name: 'Button',
  description: 'A button component',
  props: [
    {
      name: 'variant',
      type: "'primary' | 'secondary' | 'tertiary'",
      required: true
    },
    {
      name: 'size',
      type: "'sm' | 'md' | 'lg'",
      required: true
    }
  ],
  variants: [
    {
      name: 'primary',
      props: {
        backgroundColor: 'var(--color-primary-500)',
        color: 'var(--color-white)'
      }
    }
  ]
});

Extract from Figma

const assets = await mcp.extractFromFigma('node-id');
console.log(assets.tokens);
console.log(assets.components);
console.log(assets.icons);
console.log(assets.images);

Sync to Figma

const result = await mcp.syncToFigma({
  components: [/* React components */],
  tokens: {/* Design tokens */}
});

Sync from Figma

const result = await mcp.syncFromFigma({
  added: [/* New components */],
  modified: [/* Modified components */],
  deleted: [/* Deleted components */],
  conflicts: [/* Conflicts */]
});

Project Structure

design-system/
├── tokens/
│   ├── colors.json
│   ├── typography.json
│   ├── spacing.json
│   └── shadows.json
├── components/
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.types.ts
│   │   ├── Button.stories.tsx
│   │   ├── Button.test.tsx
│   │   └── index.ts
│   ├── Input/
│   │   ├── Input.tsx
│   │   ├── Input.types.ts
│   │   ├── Input.hooks.ts
│   │   ├── Input.stories.tsx
│   │   ├── Input.test.tsx
│   │   └── index.ts
│   └── Card/
├── hooks/
│   ├── useDesignSystem.ts
│   └── useTheme.ts
├── icons/
├── assets/
├── docs/
└── .mcp-config.json

Development

Prerequisites

Node.js 18+
npm 8+
Figma account with access token
React 18+ project

Setup

Clone the repository
Install dependencies:
npm install
Create .mcp-config.json with your Figma credentials
Start development:
npm run dev

Testing

npm test

Building

npm run build

Contributing

Fork the repository
Create your feature branch
Commit your changes
Push to the branch
Create a Pull Request

License

MIT

Support

For support, please open an issue in the GitHub repository.

This server cannot be installed

security - not tested

license - not found

quality - not tested

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

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.

Related MCP Servers

Figma MCP Server
TimHolden
A
security
F
license
A
quality
Enables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.
Last updated -
2
106
TypeScript
Figma to React Native MCP
kailashAppDev
-
security
F
license
-
quality
Converts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
Last updated -
111
1
TypeScript
Figma MCP Server
sanjeev23oct
-
security
F
license
-
quality
A bridge between Figma designs and React implementations that enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data into React-friendly format.
Last updated -
1,284
1
TypeScript
Figma MCP Server
1yhy
-
security
A
license
-
quality
A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
Last updated -
124
6
TypeScript
MIT License

View all related MCP servers

MCP Design System Bridge