What is Chadcn Figma Mcp

chadcn-figma-mcp is a project that integrates Figma designs with shadcn/ui components using the Model Context Protocol (MCP). It serves as a bridge between AI agents and the Figma API to facilitate accurate design implementations.

Use cases

Use cases for chadcn-figma-mcp include automating the conversion of Figma designs into code, enhancing collaboration between designers and developers, and streamlining the design implementation process.

How to use

To use chadcn-figma-mcp, first ensure you have a valid Figma Personal Access Token. Configure the MCP server in your settings file, then restart your AI client. You can retrieve design data using the get_figma_data tool and download images with the download_figma_images tool.

Key features

Key features of chadcn-figma-mcp include seamless integration with Figma, the ability to retrieve design data and images, and the use of shadcn/ui components for accurate design representation.

Where to use

chadcn-figma-mcp can be used in UI/UX design projects, web development, and any application where Figma designs need to be translated into functional UI components.

chadcn-figma-mcp

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.