figma-code-connect-components について
figma-code-connect-components は、Code Connect を通じて Figma のデザインコンポーネントとコードコンポーネントを結び付けるエージェントスキルです。デザインシステムの更新をコードベースに反映でき、完全なワークフローは Figma の上流スキルバンドルで確認できます。
主な機能
- 01Figma とコードのコンポーネント連携
- 02Code Connect の利用
- 03デザインシステム更新の反映
活用シーン
- 01デザインコンポーネントをコードに接続
- 02デザインシステムの更新をコードに反映
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/figma-code-connect-componentsを入力して読み込まれたか確認します。
詳細
figma-code-connect-components
Figma の MCP サーバーガイドをもとに編集しています。
機能
Code Connect を使用して Figma のデザインコンポーネントをコードコンポーネントに接続し、デザインシステムの更新が自動的にコードベースに反映されるようにします。
ソース
- 上流： https://github.com/figma/skills
- カテゴリー：
figma
使用方法
このカタログエントリーは、エージェントが計画中にこのスキルを見つけられるよう、OpenDesign で紹介しています。元のアセット、スクリプト、リファレンスを含む上流ワークフロー全体を実行するには、上流バンドルを使用中のエージェントのスキルディレクトリにインストールしてください。
# Inspect the upstream README for exact paths
open https://github.com/figma/skills
その後、このスキル名（figma-code-connect-components）を指定するか、このスキルのフロントマターに記載されたトリガーフレーズのいずれかを使って、このスキルを呼び出すようエージェントに依頼してください。
コメント
Markdown 対応