figma-automation

Rube MCP を介した Figma の自動化

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

前提条件

• Rube MCP が接続されている必要があります（RUBE_SEARCH_TOOLS が利用可能であること）
• figma ツールキットを指定して RUBE_MANAGE_CONNECTIONS で Figma に接続していること
• 現在のツールスキーマを取得するため、必ず最初に RUBE_SEARCH_TOOLS を呼び出してください

セットアップ

Rube MCP を取得する：クライアントの設定で https://rube.app/mcp を MCP サーバーとして追加します。実際に MCP 認証が完了していることと、許可された Figma アカウントおよびファイルにアクセスできることを確認してください。エンドポイントの設定だけでは不十分です。

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

コメントとエクスポートの境界

デザインデータを読み取れるからといって、コメントを投稿したり共同作業者に通知したりする権限があるわけではありません。コメントには、対象ファイル、スレッド、メッセージを明示したユーザーの許可が必要です。要求されたノードのみを安全な新しい保存先にエクスポートし、非公開のデザインデータを保護するとともに、一時 URL を検証し、認証情報を無関係なホストに転送しないでください。

主なワークフロー

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 が扱いやすい形式にします（サイズを 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 はデザインファイル（figma.com/design/ または figma.com/file/）のみをサポートします
• FigJam ボード（figma.com/board/）とスライド（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

使用するタイミング

このスキルは、概要で説明されているワークフローまたはアクションを実行する場合に適用されます。

制限事項

• このスキルは、タスクが上記の範囲に明確に一致する場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、または専門家によるレビューの代替物として扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が欠けている場合は、停止して確認を求めてください。