ローカライズされた読書ガイド
figma-code-connect-components目的、用途、および情報源
Code Connect マッピングツールを使用して Figma デザインコンポーネントをコードコンポーネントに接続します。ユーザーが「コード接続」、「このコンポーネントをコードに接続」、「このコンポーネントをマッピング」、「コンポーネントをコードにリンク」、「コード接続マッピングを作成」と言う場合、または Figma デザインとコード実装間のマッピングを確立したい場合に使用します。キャンバスへの書き込みは、use_figma、 使用figma-use。
ソースを取得しました:
- 出典リポジトリ
- openai/skills
- SKILL.md
skills/.curated/figma-code-connect-components/SKILL.md- リポジトリの Star
- 28,420
- リポジトリの最終更新
- 2026-10-29
- 能力分類
- デザイン
- 最終収集時刻
ライセンス: 記載なし
ワークフローの抜粋は、Codezによる実行可能な指示ではなく、あくまでも参考資料です。このページを作成するために、サードパーティ製のスキルは実行されていません。
以下の目的とワークフローに関する記述は、上流工程に関する資料であり、読みやすいように整理・翻訳されています。これらは、別途ラベル付けされたCodez編集分析とは区別されます。
このスキルが何をするか
Code Connect マッピングツールを使用して Figma デザインコンポーネントをコードコンポーネントに接続します。ユーザーが「コード接続」、「このコンポーネントをコードに接続」、「このコンポーネントをマッピング」、「コンポーネントをコードにリンク」、「コード接続マッピングを作成」と言う場合、または Figma デザインとコード実装間のマッピングを確立したい場合に使用します。キャンバスへの書き込みは、use_figma、 使用figma-use。
上流ワークフローの仕組み
概要
このスキルは、Figmaのコードコネクト機能を使用して、Figmaのデザインコンポーネントを対応するコード実装に接続するのに役立ちます。Figmaのデザイン構造を分析し、コードベースから一致するコンポーネントを検索し、デザインとコードの一貫性を維持するマッピングを確立します。
上流への航路 · L8 ↗ステップ1コードコネクトの提案を取得する
電話get_code_connect_suggestions単一の操作で、マッピングされていないすべてのコンポーネントを特定します。このツールは自動的に次の処理を実行します。Figmaシーングラフからコンポーネント情報を取得する。選択範囲内の公開済みコンポーネントを特定する。既存のCode Connectマッピングを確認し、既に接続されているコンポーネントを除外する。
get_code_connect_suggestions(fileKey=":fileKey", nodeId="1:2")要件とセットアップ
前提条件
Figma MCPサーバーが接続され、アクセス可能である必要があります。ユーザーは、ノードIDを含むFigma URLを提供する必要があります。https://figma.com/design/:fileKey/:fileName?node-id=1-2
制限事項と品質チェック
このファイルからは、個別の制限に関する記述は選択されていません。これは、このスキルがあらゆる入力や環境において安全であることを意味するものではありません。ソースコード全体を確認し、ご自身で結果を検証してください。
まずは安全なトライアルから始めましょう
- サポートされているホストとリポジトリのインストール手順を確認してください。スキルディレクトリと、それに関連付けられているスクリプト、アセット、ドキュメントはまとめて保管してください。SKILL.md単独では依存関係を省略できる場合があります。
- エージェントに実際の入力、希望する出力、および受け入れ基準を指定してください。呼び出し構文と利用可能なツールはホストによって異なります。このサイトは、汎用的なインストールコマンドを前提としていません。
- 使い捨てプロジェクトまたはコピーで、元のワークフローを試してみてください。ファイル、リモートサービス、または課金対象リソースを変更する操作は、許可する前に必ず確認してください。
- 出力結果をソースの品質チェックおよび独自の要件と照らし合わせて検証してください。トリガーが成功したことやリポジトリのスター数が多いことだけでは、正しい結果とは言えません。
詳細は出典元をご覧ください。
- 概要
- スキルの限界
- 前提条件
- 必要なワークフロー
- ステップ1コードコネクトの提案を取得する
- オプションA：
figma-desktopMCP（URLは提供されていません） - オプションB：FigmaのURLが指定されている場合
- ステップ2: コードベースをスキャンして一致するコンポーネントを探す
- ステップ3: ユーザーに一致する結果を表示する
- ステップ4コードコネクトマッピングの作成
- 例1ボタンコンポーネントの接続
- 例2: 部分選択による複数コンポーネント
- 例3: コンポーネントの作成が必要
- プロアクティブなコンポーネント検出
- 正確な構造マッチング
- 明確なコミュニケーション
- 曖昧さを処理する
- 優雅な衰退
- 問題：「この選択範囲には公開されているコンポーネントが見つかりませんでした」
- 問題点：「Code Connectは組織プランとエンタープライズプランでのみ利用可能です」
- 問題: コードベースに一致するコンポーネントが見つかりません
- 問題：「公開されたコンポーネントが見つかりません」（CODE_CONNECT_ASSET_NOT_FOUND）
- 問題：「コンポーネントは既にコードにマッピングされています」（CODE_CONNECT_MAPPING_ALREADY_EXISTS）
- 問題：「マッピングを作成するための権限が不足しています」（CODE_CONNECT_INSUFFICIENT_PERMISSIONS）
- 問題: Code Connect マッピングが URL エラーで失敗する
- 問題: 類似のコンポーネントが複数見つかりました
- Code Connectを理解する
- その他のリソース
関連スキル
翻訳と範囲
この読書ガイドは、ピン留めされた上流からの抜粋を選りすぐっていますSKILL.md翻訳は補助的なものです。完全なマニュアルではなく、互換性テスト済みであることを保証するものでもありません。ご使用前に原文および参照ファイルをお読みください。
この紹介文は、下記に固定表示されているバージョンに関するものです。現在のリポジトリのアクティビティと収集時間は別途表示されます。
- ピン留めされたソース
- 原文を読む ↗
- ソースを取得しました
- ソースコミット
49f948faa9258a0c61caceaf225e179651397431- ソースSHA-256
0f19edad8aed28063a3517c419fbcbef5421d024f189fd02a17fae25093ec69d