figma-automation

Rube MCP を使った Figma の自動化

Rube MCP を介して、Composio の Figma ツールキットを使用し、Figma の操作を自動化します。

ツールキットのドキュメント：composio.dev/toolkits/figma

前提条件

• Rube MCP が接続されていること（RUBE_SEARCH_TOOLS が利用可能）
• ツールキット figma を指定した RUBE_MANAGE_CONNECTIONS で、Figma への接続がアクティブになっていること
• 最新のツールスキーマを取得するため、必ず最初に RUBE_SEARCH_TOOLS を呼び出してください

セットアップ

Rube MCP の取得：クライアント設定で https://rube.app/mcp を MCP サーバーとして追加します。API キーは不要です。エンドポイントを追加するだけで動作します。

1. RUBE_SEARCH_TOOLS が応答することを確認し、Rube MCP が利用可能であることを検証します
2. ツールキット figma を指定して RUBE_MANAGE_CONNECTIONS を呼び出します
3. 接続が ACTIVE でない場合は、返された認証リンクから Figma の認証を完了します
4. ワークフローを実行する前に、接続ステータスが ACTIVE であることを確認します

主なワークフロー

1. ファイルデータとコンポーネントの取得

使用する場面：Figma のデザインファイルを確認したり、コンポーネント情報を抽出したりする場合

ツールの実行順序：

1. FIGMA_DISCOVER_FIGMA_RESOURCES - Figma の URL から ID を抽出します［前提条件］
2. FIGMA_GET_FILE_JSON - ファイルデータを取得します（デフォルトでは簡略化されます）［必須］
3. FIGMA_GET_FILE_NODES - 特定のノードデータを取得します［任意］
4. FIGMA_GET_FILE_COMPONENTS - 公開済みコンポーネントを一覧表示します［任意］
5. FIGMA_GET_FILE_COMPONENT_SETS - コンポーネントセットを一覧表示します［任意］

主なパラメーター：

• file_key：URL のファイルキー（例：figma.com/design/abc123XYZ/... の 'abc123XYZ'）
• ids：カンマ区切りのノード ID（配列ではありません）
• depth：ツリーの走査深度（ページと最上位の子要素には 2 を指定）
• simplify：AI に適した形式にする場合は True（サイズを 70％以上削減）

注意点：

• Design ファイルのみ対応しています。FigJam ボードと Slides では 400 エラーが返されます
• ids は配列ではなく、カンマ区切りの文字列で指定する必要があります
• URL のノード ID はハイフン形式（1-541）の場合がありますが、API ではコロン形式（1:541）が必要です
• ids や depth の範囲が広いと、ペイロードが大きくなりすぎて（413）エラーになる場合があります。対象範囲を絞るか、深度を下げてください
• 応答データは data ではなく data_preview に含まれる場合があります

2. 画像のエクスポートとレンダリング

使用する場面：デザインアセットを画像としてエクスポートする場合

ツールの実行順序：

1. FIGMA_GET_FILE_JSON - エクスポートするノード ID を確認します［前提条件］
2. FIGMA_RENDER_IMAGES_OF_FILE_NODES - ノードを画像としてレンダリングします［必須］
3. FIGMA_DOWNLOAD_FIGMA_IMAGES - レンダリングした画像をダウンロードします［任意］
4. FIGMA_GET_IMAGE_FILLS - 画像の塗りつぶし URL を取得します［任意］

主なパラメーター：

• file_key：ファイルキー
• ids：レンダリングするノード ID（カンマ区切り）
• format：'png'、'svg'、'jpg'、または 'pdf'
• scale：PNG/JPG の倍率（0.01～4.0）
• images：ダウンロード対象の {node_id, file_name, format} の配列

注意点：

• 画像は node_id と URL の対応マップとして返されます。一部の ID は null（レンダリング失敗）になる場合があります
• URL は一時的なもので、有効期間は約 30 日です
• 画像は 32 メガピクセルまでに制限されています。それを超えるリクエストは自動的に縮小されます

3. デザイントークンの抽出

使用する場面：開発用にデザイントークンを抽出する場合

ツールの実行順序：

1. FIGMA_EXTRACT_DESIGN_TOKENS - 色、タイポグラフィ、スペーシングを抽出します［必須］
2. FIGMA_DESIGN_TOKENS_TO_TAILWIND - Tailwind の設定に変換します［任意］

主なパラメーター：

• file_key：ファイルキー
• include_local_styles：ローカルスタイルを含めるかどうか（デフォルトは true）
• include_variables：Figma の変数を含めるかどうか
• tokens：抽出時に取得した完全なトークンオブジェクト（Tailwind への変換用）

注意点：

• Tailwind への変換には、total_tokens と sources を含む完全なトークンオブジェクトが必要です
• 変換に渡す前に、抽出結果からフィールドを削除しないでください

4. コメントとバージョンを管理する

使用する場面：ユーザーがコメントの表示や追加、またはバージョン履歴の確認を希望している場合

ツールの順序：

1. FIGMA_GET_COMMENTS_IN_A_FILE - ファイルのすべてのコメントを一覧表示します［任意］
2. FIGMA_ADD_A_COMMENT_TO_A_FILE - コメントを追加します［任意］
3. FIGMA_GET_REACTIONS_FOR_A_COMMENT - コメントへのリアクションを取得します［任意］
4. FIGMA_GET_VERSIONS_OF_A_FILE - バージョン履歴を取得します［任意］

主なパラメーター：

• file_key：ファイルキー
• as_md：コメントを Markdown 形式で返します
• message：コメントのテキスト
• comment_id：リアクションを取得するコメント ID

注意点：

• client_meta を使用すると、特定のノードにコメントを配置できます
• 返信コメントは入れ子にできません（返信は 1 階層のみです）

5. プロジェクトとチームを閲覧する

使用する場面：ユーザーがチームのプロジェクトまたはファイルの一覧表示を希望している場合

ツールの順序：

1. FIGMA_GET_PROJECTS_IN_A_TEAM - チームのプロジェクトを一覧表示します［任意］
2. FIGMA_GET_FILES_IN_A_PROJECT - プロジェクトのファイルを一覧表示します［任意］
3. FIGMA_GET_TEAM_STYLES - チームで公開されているスタイルを一覧表示します［任意］

主なパラメーター：

• team_id：URL から取得するチーム ID（figma.com/files/team/TEAM_ID/...）
• project_id：プロジェクト ID

注意点：

• チーム ID はプログラムで取得できません。Figma の URL から抽出してください
• チームのエンドポイントから返されるのは、公開済みのスタイル／コンポーネントのみです

よくあるパターン

URL の解析

Figma の URL から ID を抽出します：

1. Call FIGMA_DISCOVER_FIGMA_RESOURCES with figma_url
2. Extract file_key, node_id, team_id from response
3. Convert dash-format node IDs (1-541) to colon format (1:541)

ノードの走査

1. Call FIGMA_GET_FILE_JSON with depth=2 for overview
2. Identify target nodes from the response
3. Call again with specific ids and higher depth for details

既知の注意点

ファイル形式のサポート：

• GET_FILE_JSON がサポートするのは Design ファイル（figma.com/design/ または figma.com/file/）のみです
• FigJam ボード（figma.com/board/）と Slides（figma.com/slides/）はサポートされていません

ノード ID の形式：

• URL ではハイフン形式が使われます：node-id=1-541
• API ではコロン形式が使われます：1:541

クイックリファレンス

タスク	ツールスラッグ	主なパラメーター
URL の解析	FIGMA_DISCOVER_FIGMA_RESOURCES	figma_url
ファイル JSON の取得	FIGMA_GET_FILE_JSON	file_key, ids, depth
ノードの取得	FIGMA_GET_FILE_NODES	file_key, ids
画像のレンダリング	FIGMA_RENDER_IMAGES_OF_FILE_NODES	file_key, ids, format
画像のダウンロード	FIGMA_DOWNLOAD_FIGMA_IMAGES	file_key, images
コンポーネントの取得	FIGMA_GET_COMPONENT	file_key, node_id
ファイルのコンポーネント	FIGMA_GET_FILE_COMPONENTS	file_key
コンポーネントセット	FIGMA_GET_FILE_COMPONENT_SETS	file_key
デザイントークン	FIGMA_EXTRACT_DESIGN_TOKENS	file_key
トークンを Tailwind に変換	FIGMA_DESIGN_TOKENS_TO_TAILWIND	tokens
ファイルのコメント	FIGMA_GET_COMMENTS_IN_A_FILE	file_key
コメントの追加	FIGMA_ADD_A_COMMENT_TO_A_FILE	file_key, message
ファイルのバージョン	FIGMA_GET_VERSIONS_OF_A_FILE	file_key
チームのプロジェクト	FIGMA_GET_PROJECTS_IN_A_TEAM	team_id
プロジェクトのファイル	FIGMA_GET_FILES_IN_A_PROJECT	project_id
チームのスタイル	FIGMA_GET_TEAM_STYLES	team_id
ファイルのスタイル	FIGMA_GET_FILE_STYLES	file_key
画像の塗り	FIGMA_GET_IMAGE_FILLS	file_key

---

Composio 提供