flntfnd/figma-design-system

Figma デザインシステム

公式 Figma MCP サーバー上で、iOS/iPadOS/macOS、Android、Web向けのデザインシステムを Figma で構築する方法。すべての単一値は変数です。スタイルは変数から構築された複合要素（テキストスタイル、エフェクトスタイル、グラデーションペイントスタイル）に使用します。ソリッドカラースタイルはレガシーです。

MCP ツール呼び出しは、Figma プラグインに付属するプラグインスキル（figma:figma-use、figma:figma-generate-library、figma:figma-generate-design、およびその関連スキル）に属します。これらは Figma が管理しています。このスキルと一緒に読み込んでください。機構的にはプラグインスキルが優先されます。プロセスと完全性に関しては、このスキルが優先されます。

クイックリファレンス

トピック	リファレンス
全スキルのトークン命名規則：階層、ファミリー、プラットフォーム別変換ルール、コード構文；変数コレクション、モード、タイポグラフィ、スペーシング、半径	reference/token-architecture.md
コンポーネントと状態のリスト、オートレイアウト、プロパティ、スロット、必須のインタラクティブステート配線	reference/component-architecture.md
Figma での Liquid Glass 構築：Apple のキット、パラメータ、ガラストークン、API 制限	reference/liquid-glass.md
既存デザインへの視覚スタイル適用（トークン置換ではなく再構築）	reference/applying-styles.md
ゼロからの構築とアプリ複製の作業順序、ファイル構造、Dev Mode ハンドオフ、アクセシビリティ、アンチパターン	reference/workflows-and-handoff.md
4つのゲートの詳細、タスクに応じたスケーリング、プラットフォーム別の最小画面セット	reference/gates.md
変更される Figma の事実：プランゲート、制限、ベータステータス、MCP ツールとスキル名、キットリンク、日付付き	reference/platform-status.md

ゲート

4つのルール。セッション開始時および全体を通してチェックします。これらに違反すると静かに失敗し、ハンドオフ時に最もコストがかかります。

1. 最初に暗いキャンバス。 すべてのページのキャンバスは、コンテンツが存在する前に #1E1E1E である必要があります。白の場合は、止めて修正します。
2. 空のページやフレームは禁止。 作成したら、完全に埋めてから次に進みます。プラットフォームは最小画面セットが揃わなければ完了ではありません。
3. トークン名はコードベースと完全に一致。 すでに出荷されている名前を使用します。新しい名前を発明しないでください。
4. ライトとダークの両方。 すべてのセマンティックカラーに両方の値があり、すべての画面が両方のモードで構築・レビューされて初めて完了です。

フルビルドでは4つすべてを完全に適用します。既存ファイルへの小さな編集では、ファイルを悪化させてはいけません。また、すでに壊れているものは黙って修正せず、報告します。reference/gates.md に理由、スケーリングルール、最小画面セットが記載されています。

Figma での操作：

暗いキャンバス：

figma.currentPage.backgrounds = [{
  type: 'SOLID',
  color: { r: 0.118, g: 0.118, b: 0.118 },  // #1E1E1E
  opacity: 1
}];

figma.currentPage は1ページ分です。figma:figma-use のページ切り替えルールを使用して、ページごとに繰り返し、新しいページが作成されるたびに設定します。手動の場合は、空のキャンバスを右クリック → 背景色。スクリーンショットを撮って確認します。

空ページ禁止。 ページを作成するのと同じステップで、そのページを埋めます。🎨 Tokens ページが存在する場合、🎛 Components ページに触れる前に、そのページ上に変数コレクションを配置します。

トークン名。 変数パスと各変数のコード構文は、reference/token-architecture.md に従います。コードベースが既にトークンを命名している場合、その名前が優先されます。

ライトとダーク。 Semantic Color コレクションのライトモードとダークモード。各画面のトップフレームをそれぞれに設定してレビューします。

レーン

このスキルは Figma のプロセスとトークン名を担当します。値とプラットフォームルールは、それらを所有するスキルから提供されます。

ニーズ	所有者
4つのゲートと最小画面セット	このスキル (reference/gates.md)
パレット値と各セマンティックロールがエイリアスするプリミティブ	color-system
Apple のタイプサイズ、システムカラー、Liquid Glass のルールと外観、OS バージョン	apple-platform
Material カラーロール、シェイプスケール、ウィンドウサイズクラス、ライブラリバージョン	android-platform
CSS での Web トークン、コード上のブレークポイント	web-platform
モーショントークン名と値	motion-design
スタイルカタログ	visual-styles

セッション開始

1. figma:figma-use と、作業に適したプラグインスキル（トークンとコンポーネントには figma-generate-library、画面には figma-generate-design、実装のためにデザインを読む前には figma-design-to-code）を読み込みます。
2. セッションを開きます。他のファイルツール（読み取り専用の作業を含む）の前に、ファイルキーと1行のタスクを指定して create_session を実行します。新しいファイルの場合は、最初に create_new_file、次に create_session を実行します。
3. 書き込む前に読み取ります。既存のファイルにはページ、コレクション、慣習があります。それらを見つけてから追加します。
4. タスクに応じてスケーリングされたゲートをチェックします。

デザインスタイル

トークンやコンポーネントを構築する前に、visual-styles スキルで視覚スタイルを確認します。スタイルが指定されていない場合、プラットフォームのデフォルトのデザイン言語が使用されます。トークンの階層、コンポーネント構造、オートレイアウト、ステート配線はスタイル間で変わりません。値と構造的な詳細のみが変更されます。reference/applying-styles.md に、スタイルが Figma でどのように適用されるかが記載されています。

哲学

デザインシステムはデザインとコードの間の契約です。Figma で定義されたトークンは、SwiftUI、Compose、CSS で使用される同じトークンです。名前、値、階層は3つすべてで一致します。エンジニアリングをオーディエンスと見なさずに構築されたデザインシステムは、単なるステッカーシートです。

すべてをデザインします。すべての画面、すべての状態、すべてのエッジケース。空、ロード中、エラー、部分的なコンテンツ、オーバーフロー、長いテキスト、短いテキスト、無効。ハッピーパスのみをカバーするデザインは、ムードボードです。エンジニアリングはコードで欠けている状態を発明し、それらは間違っているでしょう。

ピクセルパーフェクトはその言葉通りの意味です。すべてを変数にバインドし、すべてを測定します。「だいたい合ってる」ように見えるからといって17px幅のコンポーネントは、ピクセルパーフェクトではありません。

2つの作業モード

ゼロから構築する。 デザインシステムが最初、コンポーネントが次、画面が最後です。単一のコンポーネントに触れる前にトークンを定義します。

既存アプリを複製する。 まず監査し、暗黙のシステムを抽出し、正式化し、その正式化されたトークン上でコンポーネントを再構築します。監査を決してスキップしないでください。

両方のステップバイステップは reference/workflows-and-handoff.md にあります。