Skip to main content
Glama

MCP Design System Bridge

by brunonepomuceno
GitHub
TypeScript
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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.

This server cannot be installed

-
security - not tested
F
license - not found
-
quality - not tested

How are these scores calculated?

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.

  1. Features
    1. 1. React Component Generation
    2. 2. Figma Component Generation
    3. 3. Figma → IDE Extraction
    4. 4. IDE → Figma Synchronization
    5. 5. Bidirectional Synchronization
  2. Installation
    1. Configuration
      1. Usage
        1. Generate React Component
        2. Extract from Figma
        3. Sync to Figma
        4. Sync from Figma
      2. Project Structure
        1. Development
          1. Prerequisites
          2. Setup
          3. Testing
          4. Building
        2. Contributing
          1. License
            1. Support

              Related MCP Servers

              • 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 -
                42
                5

              • Figma MCP Server

                sanjeev23oct
                A
                security
                F
                license
                A
                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 -
                5
                725
                2

              • MCP Figma to React Converter

                StudentOfJS
                -
                security
                A
                license
                -
                quality
                Converts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.
                Last updated -
                51
                MIT License

              • Figma MCP Server

                rlagudals95
                -
                security
                A
                license
                -
                quality
                Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
                Last updated -
                34,023
                MIT License

              View all related MCP servers

              Appeared in Searches

              New MCP Servers

              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/brunonepomuceno/mcp-design-system-bridge-cursor'

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