chadcn-figma-mcp

April 5, 2025 ยท View on GitHub

A project that integrates Figma designs with shadcn/ui components using the Model Context Protocol (MCP).

Overview

This project demonstrates how to use the Figma MCP server to retrieve design data from Figma and use it to generate shadcn/ui components. The MCP server acts as a bridge between the AI agent and the Figma API, allowing for more accurate implementation of designs.

Setup

  1. Ensure you have a valid Figma Personal Access Token. You can create one in your Figma account settings.

  2. Configure the Figma MCP server in your MCP settings file:

    • For Cline: /Users/username/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
    • For Claude Desktop: /Users/username/Library/Application Support/Claude/claude_desktop_config.json
    {
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_FIGMA_API_KEY", "--stdio"]
    }
  }
}

  3. Restart your AI client to load the MCP server.

Usage

Retrieving Figma Data

Use the get_figma_data tool to retrieve data from a Figma file:

<use_mcp_tool>
<server_name>Framelink Figma MCP</server_name>
<tool_name>get_figma_data</tool_name>
<arguments>
{
  "fileKey": "YOUR_FIGMA_FILE_KEY"
}
</arguments>
</use_mcp_tool>

The fileKey can be found in the Figma file URL: https://www.figma.com/file/YOUR_FIGMA_FILE_KEY/...

Downloading Figma Images

Use the download_figma_images tool to download images from a Figma file:

<use_mcp_tool>
<server_name>Framelink Figma MCP</server_name>
<tool_name>download_figma_images</tool_name>
<arguments>
{
  "fileKey": "YOUR_FIGMA_FILE_KEY",
  "nodes": [
    {
      "nodeId": "NODE_ID",
      "fileName": "image-name.svg"
    }
  ],
  "localPath": "/absolute/path/to/save/images"
}
</arguments>
</use_mcp_tool>

The nodeId can be found in the Figma data returned by the get_figma_data tool.

Example: Creating a Button Component from Figma

This project includes an example of creating a shadcn/ui-style Button component based on Figma data:

  1. Retrieve the Figma data using the get_figma_data tool.
  2. Extract the relevant style information (colors, typography, etc.).
  3. Create a shadcn/ui-style component using the extracted information.

See the example implementation in:

  • src/libs/ui/components/button/button.tsx
  • src/app/button-example/page.tsx

Project Structure

  • src/libs/ui/components/: shadcn/ui-style components based on Figma data
  • src/app/: Next.js application pages
  • public/figma-images/: Downloaded Figma images

Next Steps

  1. Resolve TypeScript errors in the Button component implementation.
  2. Create more examples of using the Figma data to generate shadcn/ui components.
  3. Set up proper TypeScript configuration for the project.