mcp-server-guide

🥈Silver

The Figma MCP server guide enables operations teams to integrate Figma design files into their workflows. It provides AI agents with design context to generate accurate code. Connects to Claude agents and supports Starter, View, and Collab seats.

1,184150Updated 1w ago

Intermediate30min to implementautomation

Saves ~30 min per use

Quick InstallView Source

git clone https://github.com/figma/mcp-server-guide.git

Works with:

Claude

Overview

About This Skill

How to Use

[{"step":"Set up the Figma MCP server. Install the Figma MCP server in your environment using `npm install @modelcontextprotocol/figma-mcp` or follow the setup guide for your specific platform (e.g., VS Code, Cursor).","tip":"Ensure you have a Figma personal access token with `file_read` permissions. Generate one at `https://www.figma.com/developers/api#access-tokens`."},{"step":"Connect the MCP server to your AI agent. In your AI tool (e.g., Claude, Cursor), configure the MCP server by providing the Figma file URL and your access token. For example, in Cursor, add the MCP server details to your `mcp.json` file.","tip":"Test the connection by asking the AI to list the components in the Figma file. Use: 'List all components in the Figma file [FIGMA_FILE_URL].'"},{"step":"Extract design specifications. Use the MCP server to pull design tokens (colors, typography, spacing) and component properties. Ask the AI: 'Extract the design tokens for the [COMPONENT_NAME] component in the Figma file [FIGMA_FILE_URL].'"},{"step":"Generate code from the design. Provide the extracted design context to the AI and ask it to generate the corresponding code. Use the prompt template provided above, filling in the placeholders with your specific details.","tip":"For complex components, ask the AI to generate a Storybook story or unit tests alongside the component code to ensure accuracy."},{"step":"Review and iterate. Paste the generated code into your project and compare it with the Figma design. Use tools like `storybook` or `chromatic` to visually verify the implementation. Provide feedback to the AI for refinements.","tip":"If the AI misses a design detail, ask it to regenerate the code with specific instructions, e.g., 'Update the button to use the exact hex color #3B82F6 instead of the Tailwind blue-500.'"}]

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/figma/mcp-server-guide

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Use the Figma MCP server to extract design specifications from the Figma file [FIGMA_FILE_URL] for the component [COMPONENT_NAME]. Generate a React component implementation that matches the design tokens (colors, typography, spacing) and includes interactive states (hover, active). Ensure the output follows [DESIGN_SYSTEM_FRAMEWORK] conventions and includes TypeScript types. Share the code in a ready-to-paste format.

Example Output

Based on the Figma file `https://www.figma.com/file/abc123/Primary-Button?node-id=123:456` and the component `PrimaryButton`, here’s a React implementation that matches the design system:

```tsx
import React from 'react';

type ButtonProps = {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
};

const PrimaryButton: React.FC<ButtonProps> = ({
  label,
  onClick,
  variant = 'primary',
  size = 'md',
  disabled = false,
}) => {
  const baseClasses = 'rounded-lg font-semibold transition-all duration-200';
  const variantClasses = {
    primary: 'bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700',
    secondary: 'bg-gray-100 text-gray-800 hover:bg-gray-200 active:bg-gray-300',
  };
  const sizeClasses = {
    sm: 'px-3 py-1 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  };

  return (
    <button
      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
      onClick={onClick}
      disabled={disabled}
    >
      {label}
    </button>
  );
};

export default PrimaryButton;
```

Design tokens used:
- Colors: Blue-500 (#3B82F6), Gray-100 (#F3F4F6)
- Typography: Inter (font-family), 16px (base size)
- Spacing: 1rem (padding), 0.5rem (gap)
- Interactive states: Hover (darker shade), Active (darkest shade)

This implementation aligns with the design system’s `Button` component specifications and includes TypeScript types for better developer experience.