-
security-
license-
qualityConverts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
Last updated -
19
5
Figma MCP サーバー
FigmaのデザインとReactの実装を繋ぐModel Context Protocol（MCP）サーバーです。このサーバーは、Figmaのファイルデータを処理してReactに適した形式で提供することで、FigmaのデザインをピクセルパーフェクトにReactアプリケーションに変換します。
🚀 機能
Figma API 統合: デザインファイルにアクセスするための Figma の API への直接接続
React対応出力:FigmaデータをReact互換フォーマットに変換します
スタイル処理: Figma スタイルを CSS/styled-components に変換します
アセット管理: 画像アセットとSVGコンポーネントを処理します
レイアウト処理：Figmaの自動レイアウトをFlexboxに変換します
型安全性:信頼性の高い型チェックのためにTypeScriptで構築されています
🛠️ 提供されるツール
get_file_content:Figmaファイルのコンテンツを取得して処理します
レイアウト、スタイル、コンポーネントを変換します
React対応のコンポーネント構造GXP1を返します
get_node_images:Figmaから画像アセットを取得します
複数の形式をサポート（PNG、JPG、SVG）
設定可能なスケーリングオプション GXP2
📦 インストール
リポジトリをクローンします。
git clone https://github.com/yourusername/figma-mcp.git cd figma-mcp依存関係をインストールします:
npm installFigma アクセス トークンを設定します。
cp .env.example .env # Add your Figma access token to .env
🎯 カーソル IDE のセットアップ
プロジェクト ルートに
.cursor/mcp.jsonファイルを作成します。mkdir -p .cursor touch .cursor/mcp.jsonStdio ベースのサーバー構成の場合:
{ "mcpServers": { "figma": { "command": "node", "args": ["d:/<folder>>/figma-mcp/build/index.js"], "env": { "FIGMA_ACCESS_TOKEN": "your figma token" }, "disabled": false, "alwaysAllow": [], "protocol": "stdio" } }
}
## 💻 Usage
1. Build the server:
```bash
npm run build
```
2. Configure MCP settings based on your IDE:
- For VS Code (global settings):
```json
// In settings.json
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["path/to/figma-mcp/build/index.js"],
"env": {
"FIGMA_ACCESS_TOKEN": "your-token-here"
}
}
}
}
```
- For Cursor IDE:
Use the `.cursor/mcp.json` configuration as described in the "Cursor IDE Setup" section above.
This configuration will take precedence over VS Code settings when using Cursor IDE.
3. Use the MCP tools in your application:
```typescript
// Example: Fetch processed Figma content
const result = await useMcpTool("figma", "get_file_content", {
fileKey: "your-figma-file-key"
});
🧩 サンプルプロジェクト
この MCP サーバーを使用して、Figma デザインのピクセルパーフェクトな React 実装を作成する完全な例についてはraccoon-gameディレクトリを参照してください。
🔄 処理パイプライン
入力: 公式API経由のFigmaファイルデータ
処理：
スタイル変換（色、タイポグラフィ、効果）
レイアウト変換（Flexboxへの絶対変換）
コンポーネント階層マッピング
資産最適化
出力: React対応コンポーネントデータ
📝 ライセンス
MITライセンス
🤝 貢献する
貢献を歓迎します！貢献ガイドラインをお読みください。
🙏 謝辞
包括的なAPIを提供するFigma APIチーム
MCP仕様のモデルコンテキストプロトコル
[あなたの名前] が ❤️ を込めて作りました
remote-capable server
The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.
Figma デザインと React 実装を繋ぐブリッジであり、Figma ファイル データを React 対応の形式に変換することで、Figma デザインをピクセル単位で React アプリケーションに変換できます。
Related MCP Servers
- -security-license-qualityExtracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
- -security-license-qualityConverts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.Last updated -52MIT License
- -security-license-qualityEnables bidirectional synchronization between IDEs and Figma for Design System management, allowing developers to generate React components and synchronize design tokens, icons, and components across platforms.Last updated -