figma

Figma スキル

mcporter 経由で figma-desktop MCP サーバーを使用して、Figma の自動化と統合を習得します。このスキルにより、Figma デザインへのプログラムからのアクセス、コード生成、スクリーンショットの取得、Code Connect マッピングが可能になります。

[!CRITICAL] ⚠️ 重要 — パラメーターの渡し方：

関数呼び出し構文を使用してください（フラグ構文は使用しないでください）。パラメーターはフラグではなく、関数呼び出しの中に指定します。

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456", clientLanguages: "typescript", clientFrameworks: "react")'

主なルール：

• パラメーターは関数呼び出し内で camelCase にします
• 文字列値は二重引用符で囲みます："value"
• ブール値はそのまま記述します：true または false
• 環境変数は引用符の外側で展開します："'$VAR'"
• --flag 構文は使用せず、JSON 文字列のエスケープも不要です

前提条件

Figma Desktop の接続を確認する

mise x node@20 -- mcporter call 'figma-desktop.get_metadata'

現在選択されているノードのメタデータが返されます。失敗した場合は、次の点を確認してください。

1. Figma Desktop が起動している
2. figma-desktop MCP サーバーが mcporter で設定されている

クイックセットアップ

デザインコンテキストを取得する（一括実行）

デザイン情報と生成コードを取得する最速の方法：

mise x node@20 -- ./scripts/get_design_context.sh "123:456"

または、現在選択されているノードを使用します。

mise x node@20 -- ./scripts/get_design_context.sh

フレームワークのコンテキストを指定する場合：

mise x node@20 -- ./scripts/get_design_context.sh "123:456" --languages "typescript" --frameworks "react"

URL からノード ID を抽出する

https://figma.com/design/:fileKey/:fileName?node-id=1-2 のような Figma URL がある場合：

• nodeId は 1:2 です（- を : に置き換えます）

ブランチ URL が https://figma.com/design/:fileKey/branch/:branchKey/:fileName の場合：

• branchKey を fileKey として使用します

主な操作

デザインコンテキストを取得する（コード生成）

Figma デザインから UI コードを生成するための主要なツールです。

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456")'

テクノロジーのコンテキストを指定する場合（推奨）：

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456", clientLanguages: "typescript,css", clientFrameworks: "react")'

現在選択されているノードの場合：

mise x node@20 -- mcporter call 'figma-desktop.get_design_context()'

コード出力を強制する場合（大規模なデザイン向け）：

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456", forceCode: true)'

成果物タイプのコンテキストを指定する場合：

mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "123:456", artifactType: "REUSABLE_COMPONENT", taskType: "CREATE_ARTIFACT")'

有効な artifactType の値：

• WEB_PAGE_OR_APP_SCREEN
• COMPONENT_WITHIN_A_WEB_PAGE_OR_APP_SCREEN
• REUSABLE_COMPONENT
• DESIGN_SYSTEM

有効な taskType の値：

• CREATE_ARTIFACT
• CHANGE_ARTIFACT
• DELETE_ARTIFACT

スクリーンショットを取得する

Figma のノードを視覚的なスクリーンショットとしてキャプチャします。

mise x node@20 -- mcporter call 'figma-desktop.get_screenshot(nodeId: "123:456")'

現在選択されているノードの場合：

mise x node@20 -- mcporter call 'figma-desktop.get_screenshot()'

メタデータを取得する（構造の概要）

ノードの XML 構造の概要（ノード ID、レイヤーの種類、名前、位置、サイズ）を取得します。

mise x node@20 -- mcporter call 'figma-desktop.get_metadata(nodeId: "123:456")'

**注：**ほとんどの用途では get_design_context を優先してください。get_metadata は構造の概要を確認する場合にのみ使用します。

変数の定義を取得する

ノードのデザイントークン／変数（色、フォント、サイズ、間隔）を取得します。

mise x node@20 -- mcporter call 'figma-desktop.get_variable_defs(nodeId: "123:456")'

次のようなマッピングが返されます：{'icon/default/secondary': '#949494'}

FigJam のコンテンツを取得する

FigJam ファイル（ホワイトボード、図表）の場合：

mise x node@20 -- mcporter call 'figma-desktop.get_figjam(nodeId: "123:456")'

ノード画像を含める場合：

mise x node@20 -- mcporter call 'figma-desktop.get_figjam(nodeId: "123:456", includeImagesOfNodes: true)'

**注：**標準の Figma デザインファイルではなく、FigJam ファイルでのみ動作します。

Code Connect

Code Connect は、Figma コンポーネントをコードベース内のコードコンポーネントに対応付けます。

Code Connect のマッピングを取得する

ノードの既存のマッピングを確認します。

mise x node@20 -- mcporter call 'figma-desktop.get_code_connect_map(nodeId: "123:456")'

次のようなマッピングが返されます。

{
  "1:2": {
    "codeConnectSrc": "https://github.com/foo/components/Button.tsx",
    "codeConnectName": "Button"
  }
}

Code Connect のマッピングを追加する

Figma コンポーネントをコードコンポーネントに対応付けます。

mise x node@20 -- mcporter call 'figma-desktop.add_code_connect_map(nodeId: "123:456", source: "src/components/Button.tsx", componentName: "Button", label: "React")'

必須パラメーター：

• source：コードベース内のコンポーネントへのパス
• componentName：コンポーネント名
• label：フレームワーク／言語のラベル

有効な label の値：

• React、Web Components、Vue、Svelte、Storybook、Javascript
• Swift UIKit、Objective-C UIKit、SwiftUI
• Compose、Java、Kotlin、Android XML Layout
• Flutter、Markdown

デザインシステムのルールを作成する

リポジトリ用のデザインシステムルールを生成します。

mise x node@20 -- mcporter call 'figma-desktop.create_design_system_rules(clientLanguages: "typescript", clientFrameworks: "react")'

ヘルパースクリプト

スクリプト	目的
./scripts/get_design_context.sh	ワンショットでデザインコンテキストを取得 - デザイン情報と生成されたコードを取得します（任意でフレームワークのコンテキストを指定できます）
./scripts/get_screenshot.sh	スクリーンショットを撮影 - ノードのスクリーンショットをファイルに保存します
./scripts/get_variables.sh	デザイントークンを取得 - 変数（色、フォント、サイズ、余白）を抽出します
./scripts/add_code_connect.sh	Code Connect を追加 - Figma コンポーネントをコードコンポーネントに対応付けます

スクリプトのヘルプ：

./scripts/get_design_context.sh --help
./scripts/get_screenshot.sh --help
./scripts/get_variables.sh --help
./scripts/add_code_connect.sh --help

一般的なワークフロー

1. デザインコンポーネントを実装する

# Get the node ID from Figma URL (node-id=1-2 → nodeId="1:2")
NODE_ID="1:2"

# Get design context with your tech stack
mise x node@20 -- mcporter call 'figma-desktop.get_design_context(nodeId: "'$NODE_ID'", clientLanguages: "typescript,css", clientFrameworks: "react")'

# Get variables/tokens for the component
mise x node@20 -- mcporter call 'figma-desktop.get_variable_defs(nodeId: "'$NODE_ID'")'

2. Code Connect でコンポーネントをドキュメント化する

# Check existing mappings
mise x node@20 -- mcporter call 'figma-desktop.get_code_connect_map(nodeId: "123:456")'

# Add mapping
mise x node@20 -- mcporter call 'figma-desktop.add_code_connect_map(nodeId: "123:456", source: "src/components/Button/Button.tsx", componentName: "Button", label: "React")'

3. デザインシステムのトークンを抽出する

# Get all variables for a design system frame
mise x node@20 -- mcporter call 'figma-desktop.get_variable_defs(nodeId: "0:1")'

# Generate design system rules
mise x node@20 -- mcporter call 'figma-desktop.create_design_system_rules(clientLanguages: "typescript,css", clientFrameworks: "react")'

4. ドキュメント用のスクリーンショットを撮影する

# Get screenshot of a component
mise x node@20 -- mcporter call 'figma-desktop.get_screenshot(nodeId: "123:456")' > component.png

よくある問題と解決策

問題	解決策
接続が拒否される	Figma Desktop が実行中であり、figma-desktop MCP サーバーが設定されていることを確認してください
ノードが見つからない	nodeId の形式が 123:456（コロン区切り）であることを確認してください。ファイル内にノードが存在するか確認してください。
大規模なデザインで出力がない	forceCode: true パラメーターを使ってコード生成を強制してください
コードの言語が違う	clientLanguages と clientFrameworks パラメーターを指定してください
「Invalid arguments」またはコマンドが失敗する	フラグ形式ではなく、関数呼び出し形式を使用してください。パラメーターは functionName(param: value) の中に指定します
FigJam ツールが動作しない	get_figjam は FigJam ファイルでのみ動作し、通常の Figma デザインファイルでは動作しません
Code Connect が表示されない	ノードが通常のフレームではなく、コンポーネントインスタンスであることを確認してください

スキーマイントロスペクションによる関数パラメーターの確認

mcporter CLI では、MCP サーバーのスキーマをイントロスペクションして、正しいパラメーターとその型を確認できます。

利用可能なすべてのツールを一覧表示する

mise x node@20 -- mcporter list figma-desktop --json | jq -r ".tools[].name"

次の内容が返されます：

get_design_context
get_variable_defs
get_screenshot
get_code_connect_map
add_code_connect_map
get_metadata
create_design_system_rules
get_figjam

特定のツールのスキーマを確認する

mise x node@20 -- mcporter list figma-desktop --json | jq '.tools[] | select(.name == "get_design_context")'

次の内容を含む完全な JSON スキーマが返されます：

• inputSchema.properties - 型と説明を含む、利用可能なすべてのパラメーター
• inputSchema.required - 必須パラメーター

必須パラメーターのみを絞り込む：

mise x node@20 -- mcporter list figma-desktop --json | \
  jq '.tools[] | select(.name == "add_code_connect_map") | .inputSchema.required[]'

パラメーターの説明を取得する：

mise x node@20 -- mcporter list figma-desktop --json | \
  jq '.tools[] | select(.name == "get_design_context") | .inputSchema.properties | to_entries[] | "\(.key): \(.value.description)"'

ヒント

• URL からノード ID を取得： URL 内の node-id=1-2 は nodeId: "1:2" になります（- を : に置き換えます）
• ブランチ URL： ブランチ URL では、fileKey として branchKey を使用します
• 現在選択中のノード： nodeId を省略すると、Figma Desktop で現在選択中のノードが使われます
• テクノロジーのコンテキスト： コード生成の精度を高めるため、常に clientLanguages と clientFrameworks を指定してください
• 大規模なデザイン： 出力が途中で切れている場合は、forceCode: true を使用してください
• シェルスクリプトで JSON を解析するには jq を使用します
• パラメーターが不明な場合はスキーマイントロスペクションを使用： mcporter list figma-desktop --json | jq が役立ちます

利用可能なツール一覧

ツール	目的	必須パラメーター
get_design_context	デザインから UI コードを生成	なし（選択内容を使用）
get_screenshot	ビジュアルスクリーンショットを撮影	なし（選択内容を使用）
get_metadata	XML 構造の概要を取得	なし（選択内容を使用）
get_variable_defs	デザイントークン／変数を取得	なし（選択内容を使用）
get_code_connect_map	既存のコードマッピングを取得	なし（選択内容を使用）
add_code_connect_map	デザインをコードコンポーネントに対応付ける	source、componentName、label
create_design_system_rules	デザインシステムのルールを生成	なし
get_figjam	FigJam のコンテンツを取得	なし（選択内容を使用）