作業の進め方
Figma Create Design System Rules は、今後の Figma からコードへの作業向けに、プロジェクト固有のガイダンスを作成します。コンポーネントの配置場所、スタイリングの扱い、トークンの定義場所、実装が守るべきアーキテクチャ上の規約を分析します。成果物はルールファイルであり、Figma のコンポーネントライブラリや再設計された画面ではありません。
ソースは Claude Code、Codex、Cursor のルール形式に対応しています。有用なルールは、すべてのリポジトリに汎用的な React や Tailwind のパターンを押し付けるのではなく、実際のコンポーネントパスとトークンのソースを示します。ワークフローの最後に小さなコンポーネントでルールを試し、うまくいかなかった点を改善します。書かれた指示だけでは、エージェントが常にそれに従う証拠にならないためです。
期待される成果物
- プロジェクト固有の Figma 実装ルールのセクションまたはファイル
- コンポーネント、トークン、アセットの場所に関する具体的なガイダンス
- ルールを改善するために使う小規模な実装チェック
ブリーフからレビューまで
- 01既存の規約を調べる
まず Figma MCP の create_design_system_rules ツールから基本テンプレートを取得します。その後、コンポーネントの構成、スタイリング、インポート、ルーティング、既存のエージェントルールを読み、プロジェクト固有の追記を作成します。
- 02実行可能なマッピングを書く
実際のコンポーネントとトークンのファイル名を挙げ、必要な Figma のコンテキストとスクリーンショットの流れを記述し、プロジェクトのフレームワークを維持します。
- 03ルールを保存してテストする
関係のない既存の指示を上書きせず、適切なホストのルール形式を使います。小規模な Figma 実装を試し、矛盾するルールや役に立たないルールを削除します。