figma-generate-library

figma-generate-library スキルの概要

figma-generate-library で何ができるか

figma-generate-library は、コードベースをもとに Figma のデザインシステムを、迷いを減らしながら構築・更新するのを助けるスキルです。変数、セマンティックトークン、コンポーネントライブラリ、ドキュメントページ、そしてソースコードに近いライト/ダークテーマを必要とするチームに特に向いています。一般的なプロンプトと違い、figma-generate-library スキルは Design Systems 向けの順序立ったワークフローを与えてくれるため、何を最初に作るか、何を後回しにするか、どうやってファイルの一貫性を保つかを判断しやすくなります。

どんな人に向いているか

プロダクトのコードベースを保守しやすい Figma ライブラリに落とし込みたい場合に、このスキルを使ってください。特に、1回きりのモックアップではなく、再利用できる基盤が必要なときに適しています。デザインシステムのリード、プロダクトデザイナー、デザインエンジニア、トークンの整合、コンポーネント公開、ライブラリ整理に取り組むエージェントに向いています。単一画面だけ、あるいは簡単なビジュアル案だけが必要なら、このスキルはたいてい重すぎます。

何が違うのか

figma-generate-library の主な価値はオーケストレーションにあります。複数ステップの作業を前提に、依存関係を確認し、変数、コンポーネント、ドキュメントをまたいで順序を保ちながら構築します。figma-use と組み合わせて使う設計で、Plugin API の呼び出しは figma-use が担い、このスキルは何をどの順番で作るべきかを決めます。これにより、figma-generate-library skill は単なる「デザインシステムを作る」プロンプトよりも実用的になります。出力のブレを減らすだけでなく、構造上のミスを減らせるからです。

figma-generate-library スキルの使い方

インストールして、必要なスキルを先に読み込む

figma-generate-library install では、このスキルを追加すると同時に、Figma への書き込み前に figma-use も読み込んでください。リポジトリは、実行時にスキルのコンテキストが存在していることを前提にしており、指示は大きな一括処理ではなく、小さな use_figma 呼び出しを何度も重ねる流れを想定しています。実運用では、これは単発の生成ツールではなく、ワークフロー用のスキルとして扱うべきです。

まず作成ではなく、発見から始める

最初に SKILL.md を読み、そのうえで references/discovery-phase.md、references/token-creation.md、references/component-creation.md、references/documentation-creation.md を確認してください。失敗や中断が起きそうなら、references/error-recovery.md も読んでおくと安心です。サポート用スクリプトの存在は、このワークフローが、盲目的な生成ではなく、ファイルの確認、状態の再構成、検証、クリーンアップに依存している強いサインです。

ざっくりした目的を使えるプロンプトに変える

良い figma-generate-library usage プロンプトには、コードベース、対象フレームワーク、生成したいもの、そして Figma 側にすでに何があるかを含めます。たとえば、「src/styles/tokens.css と src/components をもとに、React アプリ向けのトークンとコアコンポーネントを作成し、既存のページ名は維持したまま、ドキュメントページより先に Button、Input、Badge を優先してください」という形です。「デザインシステムを作って」は、これよりずっと弱い指示です。スキルは実際の制約を順序に落とし込み、作りすぎを避けやすくなります。

出力を改善する実践ワークフロー

figma-generate-library guide としては、次の流れが有効です。1) トークンのソースと命名規則を見つける、2) 変数とセマンティックエイリアスを作る、3) 依存関係の順でコンポーネントを作る、4) ドキュメントを追加する、5) 検証して整理する。scripts/inspectFileStructure.js、scripts/createVariableCollection.js、scripts/createComponentWithVariants.js、scripts/validateCreation.js を見ておくと、スキルが構造と検証をどう考えているかが分かります。より良い結果を出したいなら、書き込みを依頼する前に、実際のトークンソース、既存ページ名、コンポーネント一覧を渡してください。

figma-generate-library スキル FAQ

figma-generate-library はデザインシステム専用ですか？

はい、基本的にはそうです。figma-generate-library skill は、特に再利用可能な基盤、コンポーネントバリアント、コードとデザインの整合が必要な Figma のデザインシステム向けに作られています。場当たり的なレイアウト生成や、単発の提案資料にはあまり向きません。

通常のプロンプトと比べて何が違いますか？

通常のプロンプトでも、それらしい Figma 計画は作れます。ですが figma-generate-library は、順序の強制、依存関係の把握、復旧ロジックまで含めて動きます。多数のノード、複数コレクション、繰り返しの編集が絡む作業では、この違いが効きます。ライブラリ全体で一貫性を重視するなら、ゼロからプロンプトを書くより、このスキルを出発点にしたほうがよいです。

初心者はリポジトリ全体を把握する必要がありますか？

いいえ。コードベースと、欲しい Figma 出力を特定できるなら、初心者でも使えます。初心者がつまずきやすいのは、スコープの指定が甘くなり、結果としてライブラリが途中までしかできない、または命名がずれることです。慣れていない場合は、まず少数のトークンと 1〜2 個のコアコンポーネントから始めてください。いきなり完全なライブラリを狙う必要はありません。

どんなときに使わないほうがいいですか？

素早いビジュアル探索、使い捨てのプロトタイプ、あるいはコードとの一致が不要な作業なら、figma-generate-library は使わないでください。トークン名、コンポーネント名、テーマルールの信頼できる正本を用意できない場合も、適した選択ではありません。

figma-generate-library スキルを改善するには

最も価値の高い入力を先に渡す

figma-generate-library の結果をよくするには、トークンファイル、テーマ変数、コンポーネントディレクトリ、既存の Figma ファイル構成といった具体的な素材が必要です。可能なら、正確なパスを示し、コードと Figma で食い違った場合にどちらを優先するかも明記してください。これで、命名、モードの割り当て、コンポーネントの優先順位付けに関する曖昧さを減らせます。

ライブラリで何を最重視するかを明確にする

多くのユーザーが特に重視するのは、トークンの忠実度、コンポーネントの一貫性、そしてライブラリとして公開できるかどうかの 3 点です。「コードのトークンに完全一致させる」「既存のコンポーネント名を維持する」「公開用アセットパネルがきれいに見えるよう最適化する」など、優先順位を先に伝えてください。とくにソースが不完全なときは、その優先順位によって、スキルがどのトレードオフを選ぶべきかが変わります。

よくある失敗パターンを避ける

ありがちな問題は、いっぺんに作りすぎること、発見フェーズを飛ばすこと、そして相性の悪い命名規則を混ぜることです。もう 1 つよくあるのは、土台の変数がないのにコンポーネントだけを先に求めてしまうことです。figma-generate-library skill の出力に違和感があるなら、トークンソース、コンポーネント一覧、ファイル状態のスナップショットをきちんと渡していたか確認してください。

1回目の結果を起点に、さらに詰める

最初の結果は、完成版ではなく下書きのライブラリ計画として扱ってください。何が作られたかを見直したうえで、不足しているトークン階層、次の依存レイヤー、あるいは孤立ノードの整理を依頼して調整します。初回出力が惜しいところまで来ているなら、次の依頼はより絞るのが効果的です。「セマンティックカラーのモードを追加して」「既存の atom セットから Button のバリアントを作って」「すでに作成済みの基盤だけを文書化して」のように、具体的に指示してください。