🎨
Figma
デザインからコードへ 開発ツールインストールコマンド
npx clawhub@latest install figma
インストール手順
1
環境確認
Node.js 22以上とOpenClawがインストール済みであることを確認してください。ターミナルでopenclaw --versionを実行して確認できます。
2
インストール実行
上記のインストールコマンドをターミナルで実行します。ClawHubが自動的にFigmaを~/.openclaw/skills/ディレクトリにダウンロード・インストールします。
3
インストール確認
openclaw skills listを実行してインストール済みスキル一覧を確認し、Figmaが表示されていることを確かめてください。
4
パラメータ設定（任意）
下記の紹介にある設定手順に従い、~/.config/openclaw/openclaw.json5にスキルの設定項目を追加してください。
手動インストール方法：Skillフォルダを
~/.openclaw/skills/またはプロジェクトのskills/ディレクトリにコピーしてください。フォルダ内にSKILL.mdファイルが必要です。
Figmaデザインファイルとコンポーネント情報の読み取り
スタイル変数とデザインTokenの抽出
デザインカンプを利用可能なコード構造に変換
詳細紹介
Figma MCPサーバーはAIがFigmaデザインファイルを直接読み取って理解できるようにし、デザイン情報をコード実装の基盤にシームレスに変換します。
コア機能
- デザインファイル読み取り：Figmaファイル内のページ、アートボード、レイヤー構造に直接アクセスし、完全なデザイン階層情報を取得します
- コンポーネントとスタイル抽出：デザインシステム内のコンポーネント定義、カラー変数、フォントスタイル、スペーシングTokenを読み取り、コードとデザインの一貫性を確保します
- レイアウト情報解析：Auto Layout、制約、レスポンシブレイアウト設定を解析し、AIが正確なCSS/スタイルコードを生成するのを支援します
設定方法
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp"],
"env": {
"FIGMA_API_KEY": "Figma個人アクセストークン"
}
}
}
}
活用シーン
- Figmaデザインカンプからフロントエンドコンポーネントコードを自動生成します
- デザインTokenを抽出してコードリポジトリのスタイルシステムに同期します
- AIにデザイン意図を理解させ、コーディング時にビジュアルの一貫性を保ちます
- デザインレビュー時にデザイン仕様データを素早く取得します