code-connect-components
✓Code Connect を使用して、Figma デザイン コンポーネントをコード コンポーネントに接続します。ユーザーが「コード接続」、「このコンポーネントをコードに接続」、「Figma をコードに接続」、「このコンポーネントをマップ」、「コンポーネントをコードにリンク」、「コード接続マッピングを作成」、「コード接続を追加」、「デザインをコードに接続」、または Figma デザインとコード実装の間のマッピングを確立したい場合に使用します。 Figma MCP サーバー接続が必要です。
SKILL.md
This skill helps you connect Figma design components to their corresponding code implementations using Figma's Code Connect feature. It analyzes the Figma design structure, searches your codebase for matching components, and establishes mappings that maintain design-code consistency.
When the user provides a Figma URL with file key and node ID, first run getmetadata to fetch the node structure and identify all Figma components.
IMPORTANT: When extracting the node ID from a Figma URL, convert the format:
Code Connect を使用して、Figma デザイン コンポーネントをコード コンポーネントに接続します。ユーザーが「コード接続」、「このコンポーネントをコードに接続」、「Figma をコードに接続」、「このコンポーネントをマップ」、「コンポーネントをコードにリンク」、「コード接続マッピングを作成」、「コード接続を追加」、「デザインをコードに接続」、または Figma デザインとコード実装の間のマッピングを確立したい場合に使用します。 Figma MCP サーバー接続が必要です。 ソース: figma/mcp-server-guide。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
code-connect-components とは？
Code Connect を使用して、Figma デザイン コンポーネントをコード コンポーネントに接続します。ユーザーが「コード接続」、「このコンポーネントをコードに接続」、「Figma をコードに接続」、「このコンポーネントをマップ」、「コンポーネントをコードにリンク」、「コード接続マッピングを作成」、「コード接続を追加」、「デザインをコードに接続」、または Figma デザインとコード実装の間のマッピングを確立したい場合に使用します。 Figma MCP サーバー接続が必要です。 ソース: figma/mcp-server-guide。
code-connect-components のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/figma/mcp-server-guide
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-01