What runtime does Figma MCP Server require?
Node.js 16 or higher.
Figma MCP Server
@MCP-Mirror
基本情報
Figma MCP Server について
Mirror of
Figma MCP Server の設定
Figma MCP Server のツール
7Get basic information about a Figma file
Get specific nodes from a Figma file
Get component information from a Figma file
Get style information from a Figma file
Get comments from a Figma file
Search for elements in a Figma file by type, name, etc.
Extract all text elements from a Figma file
概要
What is Figma MCP Server?
A Model Context Protocol (MCP) server that connects to Figma’s API, enabling AI tools and LLMs to access and work with your Figma designs. It is designed for designers and developers who want to integrate design data with AI assistants.
How to use Figma MCP Server?
Ensure Node.js 16+ and a Figma Personal Access Token. Clone the repository, install dependencies, create a .env file with FIGMA_API_TOKEN, API_KEY, and TRANSPORT_TYPE (default stdio). Build the server with npm run build and start with npm start. Then configure an MCP client such as Claude for Desktop or Cursor using the provided JSON configuration snippets.
Key features of Figma MCP Server
- Extract components, styles, and text from Figma designs
- Analyze design system consistency and patterns
- Extract and organize all UI copy from designs
- Generate comprehensive development handoff documentation
- Seamless integration with AI tools like Claude and Cursor
Use cases of Figma MCP Server
- Analyze a design system for consistency in colors and typography
- Extract all UI text copy from a Figma file for content management
- Generate development handoff documentation for developers
- Get file information, components, styles, or comments from a Figma file
- Search for specific elements within a Figma file by type or name
よくある質問
What transport types are supported?
The server supports `stdio` for local connections and `sse` for remote connections. The default transport is `stdio`.
How do I obtain a Figma Personal Access Token?
You can generate a Personal Access Token in your Figma account settings under the “Personal Access Tokens” section.
What environment variables are required?
`FIGMA_API_TOKEN` and `API_KEY` are required. `TRANSPORT_TYPE` defaults to `stdio`, and `PORT` (used for SSE transport) defaults to 3000
「メディアとデザイン」の他のコンテンツ
UGCfy AI
UGCfy AIBreak down any TikTok or Instagram Reels ad and rewrite it for your product, right inside Claude, Cursor, or ChatGPT. Hooks, UGC scripts, and CPM. Free, no API key.
Sleek
SleekDesign your mobile app UI with AI, then have your coding agent build the real app from it.
EmbedSocial
Connect Claude, ChatGPT, and other AI assistants to your social media content, reviews, and UGC aggregated via EmbedSocial.
Blaze
BlazePlan, create and schedule social media content from your AI assistant. Blaze makes on-brand posts, carousels and short videos, writes blog posts and newsletters, and schedules them to Instagram, TikTok, YouTube, LinkedIn
Riddle Quiz Maker
Riddle.comCreates and manages quizzes, polls, surveys, personality tests, forms, predictors, minigames and leaderboards on Riddle.com – with branching logic, custom design, live stats and embed code.
コメント