Github: https://github.com/sherizan/mcp-genui-figma

Overview

MCP-GenUI is a Model Context Protocol (MCP) server that integrates with Figma to provide seamless access to design files and components. It enables AI assistants to:

1. Browse and access Figma design files
2. List components, frames, and design elements
3. Generate code in multiple formats (React, Swift, Web Components, etc.)
4. Extract design tokens and styles
5. Provide design descriptions and improvement suggestions

Setup

Prerequisites

• Node.js v16+
• Figma account with API access
• Figma API key

Installation

1. Clone this repository
2. Install dependencies:

   npm install
   

3. Create a .env file with your Figma API key:

   FIGMA_API_KEY=your_figma_api_key_here
   FIGMA_DEFAULT_FILE=optional_default_file_key
   

4. Build the server:

   npm run build
   

5. Make the run script executable:

   chmod +x run-mcp.sh
   

Integration with Cursor

Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json:

{
  "mcpServers": {
    "mcp-genui": {
      "command": "/path/to/mcp-genui/run-mcp.sh"
    }
  }
}

Features

Resources

The server exposes Figma designs as resources with:

• figma://file/{fileKey} URIs for Figma files
• figma://node/{fileKey}/{nodeId} URIs for components and frames
• JSON representation of design data

Tools

Set Active Figma File

Claude, please set the active Figma file to 0RCoKeI0gB5jpaOjdHt7aE

This tool sets the current working file for subsequent operations.

List Components

Claude, please list the components in my Figma file

Lists all components, frames, and component sets in the active Figma file, organized by type with their node IDs and URIs.

Generate Component

Claude, please generate a React component for node figma://node/0RCoKeI0gB5jpaOjdHt7aE/123:456

Generates code for a component in various formats:

• React
• Swift
• Web Components
• Vue
• Angular
• Svelte

You can also use a simplified format with just the node ID when working with the active file:

Claude, please generate a Swift component for node 123:456 named NavigationBar

Extract Design Tokens

Claude, please extract design tokens from my Figma file in CSS format

Extracts design tokens (colors, typography, spacing) in various formats:

• JSON
• CSS
• SCSS
• Swift

Prompts

The server provides prompts for:

• Describing designs in detail
• Suggesting design improvements

Architecture

The server is built using:

• MCP SDK for server implementation
• Figma API for accessing design data
• Node.js for runtime environment

Key components:

• Resource handlers for browsing designs
• Tool handlers for generating code
• Prompt handlers for design analysis
• Caching system to reduce API calls

Debugging

The server includes debug logging to help troubleshoot issues:

• Logs are written to mcp-debug.log in the project directory
• Debug mode can be toggled in the code

Usage Examples

Complete Workflow

1. Set the active Figma file:

   Claude, please set the active Figma file to 0RCoKeI0gB5jpaOjdHt7aE
   

2. List available components:

   Claude, please list the components in my Figma file
   

3. Generate a component:

   Claude, please generate a React component for node 123:456
   

4. Extract design tokens:

   Claude, please extract design tokens in Swift format
   

Advanced Usage

• Filter components by type:

  Claude, please list only COMPONENT_SET type components
  

• Generate a component with a custom name:

  Claude, please generate a web component for node 123:456 named NavigationBar
  

• Access a specific file directly:

  Claude, please list components in Figma file 0RCoKeI0gB5jpaOjdHt7aE
  

Troubleshooting

Common Issues

1. ”File with key not found”: Ensure the file key is correct and you have access to the file.

2. Invalid node URI: Use the correct format figma://node/{fileKey}/{nodeId} or just the node ID when using the active file.

3. No active Figma file: Set an active file before performing operations that require one.

4. API access issues: Verify your Figma API key has the necessary permissions.

Debugging Steps

1. Check the mcp-debug.log file for detailed error information.

2. Verify your Figma API key is correctly set in the .env file.

3. Ensure you have access to the Figma files you’re trying to use.

4. Try setting a default file in the .env file with FIGMA_DEFAULT_FILE=your_file_key.

Future Enhancements

• Support for more output formats
• Better visualization of design components
• Integration with design systems
• Support for collaborative design workflows
• Enhanced design token extraction

Example 1: Generating a React Component from a Figma Design

Scenario

You have a Figma design for a navigation bar component and want to generate a React implementation.

Steps

1. In Cursor, start a conversation with Claude
2. Ask: “Generate a React component for the navigation bar in my Figma design”
3. Claude will use the MCP server to:
   • List available Figma files and components
   • Access the navigation bar component
   • Generate React code based on the design

Example Conversation

You: Generate a React component for the navigation bar in my Figma design

Claude: I’ll help you generate a React component for the navigation bar in your Figma design. Let me check your available Figma files and components.

I found the following navigation bar component in your Figma design: “Website - Navigation Bar”

Based on this design, here’s a React component implementation:

import React, { useState } from 'react';
import './NavigationBar.css';

export const NavigationBar = ({ logo, menuItems }) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  
  return (
    <nav className="navigation-bar">
      <div className="nav-container">
        <div className="logo">
          {logo || <img src="/logo.svg" alt="Company Logo" />}
        </div>
        
        <div className="menu-toggle" onClick={() => setIsMenuOpen(!isMenuOpen)}>
          <span></span>
          <span></span>
          <span></span>
        </div>
        
        <ul className={`menu-items ${isMenuOpen ? 'open' : ''}`}>
          {menuItems?.map((item, index) => (
            <li key={index}>
              <a href={item.url}>{item.label}</a>
            </li>
          )) || (
            <>
              <li><a href="/">Home</a></li>
              <li><a href="/about">About</a></li>
              <li><a href="/services">Services</a></li>
              <li><a href="/contact">Contact</a></li>
            </>
          )}
        </ul>
      </div>
    </nav>
  );
};

export default NavigationBar;

And here’s the accompanying CSS:

.navigation-bar {
  width: 100%;
  height: 70px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

This component is responsive and includes:

• A logo section
• Navigation links
• Mobile menu toggle
• Responsive design with a hamburger menu on smaller screens

You can use it like this:

import NavigationBar from './NavigationBar';

function App() {
  const menuItems = [
    { label: 'Home', url: '/' },
    { label: 'About', url: '/about' },
    { label: 'Services', url: '/services' },
    { label: 'Contact', url: '/contact' }
  ];

  return (
    <div className="app">
      <NavigationBar menuItems={menuItems} />
      {/* Rest of your app */}
    </div>
  );
}

Example 2: Extracting Design Tokens

Scenario

You want to extract design tokens (colors, typography, spacing) from your Figma design system.

Steps

1. In Cursor, start a conversation with Claude
2. Ask: “Extract design tokens from my Figma design system”
3. Claude will use the MCP server to:
   • Access your Figma design system file
   • Extract design tokens
   • Format them as requested (JSON, CSS, or SCSS)

Example Conversation

You: Extract design tokens from my Figma design system as SCSS variables

Claude: I’ll extract the design tokens from your Figma design system and format them as SCSS variables. Let me check your Figma files.

I found your design system file: “Design System - Components”

Here are the extracted design tokens as SCSS variables:

// Colors
$color-primary: #0066FF;
$color-secondary: #FF6600;
$color-background: #FFFFFF;
$color-text: #333333;

// Typography
$font-family: Inter, sans-serif;
$font-size-heading: 24px;
$font-weight-heading: 600;
$font-size-body: 16px;
$font-weight-body: 400;

// Spacing
$spacing-small: 8px;
$spacing-medium: 16px;
$spacing-large: 24px;

You can use these variables in your SCSS files by importing this file:

@import 'design-tokens';

.button {
  background-color: $color-primary;
  padding: $spacing-small $spacing-medium;
  font-family: $font-family;
  font-size: $font-size-body;
}

Example 3: Getting Design Feedback

Scenario

You want to get feedback and improvement suggestions for a specific component in your Figma design.

Steps

1. In Cursor, start a conversation with Claude
2. Ask: “Suggest improvements for the login form in my Figma design”
3. Claude will use the MCP server to:
   • Access the login form component
   • Analyze the design
   • Provide feedback and suggestions

Example Conversation

You: Suggest improvements for the login form in my Figma design

Claude: I’ll analyze your login form design and suggest improvements. Let me check your Figma files.

I found the login form component in your design: “Website - Login Form”

Here are my suggestions for improving the login form:

1. Accessibility Improvements:

   • Increase the color contrast between the input text and background to meet WCAG AA standards
   • Add visible labels above each input field instead of just using placeholders
   • Include error states with clear error messages
   • Add focus states for keyboard navigation

2. Usability Enhancements:

   • Add a “Forgot Password” link near the password field
   • Consider adding social login options (Google, Apple, etc.)
   • Add a “Remember Me” checkbox option
   • Make the submit button full-width for better mobile usability

3. Visual Design Refinements:

   • Add subtle shadows or borders to input fields for better visual hierarchy
   • Consider using a slightly larger font size for better readability
   • Add micro-interactions (subtle animations) for form submission
   • Ensure consistent spacing between all elements

4. Modern Design Practices:

   • Add a password visibility toggle
   • Consider using a multi-step form for complex registrations
   • Add loading states for the submit button
   • Implement autofill support with proper styling