figma

Name: figma
Author: tech-leads-club

github.com/tech-leads-clubデザイン・UI7.1k217 回インストール今日更新

figma について

Figmaのデザインを既存プロジェクトに実装する開発者向けのスキルです。デザイン情報とスクリーンショットの取得から、アセット処理、実装、見た目の検証までの手順を定めています。

Figma MCPサーバーを使い、デザイン情報、メタデータ、スクリーンショット、アセットを取得します。MCPクライアントには対象のFigmaノードまたはバリアントへのリンクを渡します。

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/tech-leads-club/agent-skills --skill figma

インストール後、Claude Code で/figmaを入力して読み込まれたか確認します。

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE.txt

references/

figma-mcp-config.md

figma-tools-and-prompts.md

Figma を活用した実装には、Figma MCP サーバーを使用します。セットアップやデバッグの詳細（環境変数、設定、検証）については、references/figma-mcp-config.md を参照してください。

これらのルールは、Figma の入力をこのプロジェクトのコードに変換する方法を定めたもので、Figma を活用した変更のたびに必ず従う必要があります。

まず get_design_context を実行して、対象のノードを正確に指定し、構造化された表現を取得します。
応答が大きすぎる場合や途中で切れている場合は、get_metadata を実行してノードの概要マップを取得してから、必要なノードのみを指定して get_design_context を再実行します。
実装するノードのバリエーションを視覚的に確認するため、get_screenshot を実行します。
get_design_context と get_screenshot の両方を取得してから、必要なアセットをダウンロードし、実装を開始します。
出力（通常は React + Tailwind）をこのプロジェクトの規約、スタイル、フレームワークに合わせて変換します。可能な限り、プロジェクトのカラートークン、コンポーネント、タイポグラフィを再利用します。
完了とする前に、Figma と照合して見た目と動作が 1:1 であることを検証します。

Figma MCP の出力（React + Tailwind）は、デザインと動作を表すものとして扱い、最終的なコードスタイルとして扱わないでください。
適用可能な場合は、Tailwind のユーティリティクラスをプロジェクトで推奨されるユーティリティやデザインシステムのトークンに置き換えます。
機能を重複して実装するのではなく、既存のコンポーネント（ボタン、入力欄、タイポグラフィ、アイコンのラッパーなど）を再利用します。
プロジェクトのカラーシステム、タイポグラフィのスケール、スペーシングのトークンを一貫して使用します。
リポジトリですでに採用されているルーティング、状態管理、データ取得のパターンを尊重します。
Figma のデザインと見た目が 1:1 になるよう努めます。競合が生じた場合は、デザインシステムのトークンを優先し、見た目を合わせるためのスペーシングやサイズの調整は最小限にとどめます。
最終的な UI の見た目と動作を、Figma のスクリーンショットと照合して検証します。

サーバーはリンクベースです。Figma のフレームまたはレイヤーのリンクをコピーし、実装の支援を依頼する際に、その URL を MCP クライアントに渡します。
クライアントは URL を開いて閲覧できませんが、リンクからノード ID を抽出します。必ず、リンクが実装したい正確なノードまたはバリエーションを指していることを確認してください。

references/figma-mcp-config.md — セットアップ、検証、トラブルシューティング、リンクベースの使用に関する注意事項。
references/figma-tools-and-prompts.md — ツール一覧と、フレームワークやコンポーネントの選択、メタデータの取得に使うプロンプトのパターン。

Markdown 対応