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

1. Clone the repository
2. Install dependencies:

   npm install
   

3. Create .mcp-config.json with your Figma credentials
4. Start development:

   npm run dev
   

Testing

npm test

Building

npm run build

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

MIT

Support

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