Figma
Figma 連携：デザインファイルへのアクセス、コンポーネントの抽出、トークンの読み取り、コードへの変換。デザインと開発の溝を埋めます。
Figma プラグインは、Claude Code を Figma のデザインファイルに直接接続することで、デザインと開発の溝を橋渡しします。デザインのコンテキストへのアクセス、コンポーネント情報の抽出、デザイントークンの取得、そしてピクセル単位の精度で本番環境に対応したコードへの変換が可能です。
主な機能として、Figma フレームからレイアウト・タイポグラフィ・カラーなど構造化されたデザインデータの抽出、デザイン変数およびトークンの取得、Code Connect を利用した Figma コンポーネントと既存コードベースのマッピング、検証用ビジュアル参照のキャプチャなどが挙げられます。Figma のクラウドサーバーとデスクトップアプリの両方に対応しています。
使い方：Figma の URL を共有し、Claude にデザインの実装を依頼してください。/implement-design を使用すると、プロジェクトのデザインシステムに基づいて Figma フレームをコードに変換できます。/create-design-system-rules を使用すると、チームの開発規約を反映したカスタムガイドラインを生成できます。/code-connect-components を使用すると、Figma コンポーネントとコードベースの実装間のマッピングを確立できます。
プロンプト例：「この Figma デザインを実装して：[Figma URL を貼り付け]」「React プロジェクト用のデザインシステムルールを作成して」「Button コンポーネントを対応する Figma コンポーネントに接続して」「このデザインファイルからカラー変数を抽出して」