2026年10月6日、Figmaのプロダクトマネージャー、ウェイン・リン(Wayne Lin)氏は、同社のデザインエージェントでFigma内のデザインシステムを維持する方法を説明しました。エージェントはキャンバス上で動作し、コンポーネントの文書化、ライブラリとの照合、現行のコンポーネントやデザイントークンへの更新、名前の変更などの整理を支援します。Professional、Organization、Enterpriseおよび一部のEducationプランではFullシートのユーザーが利用でき、Starterでは一部機能に限られます。Collab、Dev、Viewシートでは下書きで使用できます。

デザイナーはエージェントに、コンポーネントの説明書の草案作成、バリエーションや設定の提示、開発者への引き継ぎに使うAPIの提案を依頼できます。Uberのプロダクトデザイナー、イアン・ギサード(Ian Guisard)氏は、自作のスキルと組み合わせ、Uberの7つのプラットフォームにまたがるコンポーネントを文書化しています。「/create-api」はコンポーネントの動作説明を作り、「/create-color」は各バリエーションや状態で使われるデザイントークンを示す色の仕様を生成します。Figmaによると、こうした文書があれば、開発者はデザインファイルを探したりデザイナーに確認したりせずに必要な詳細を把握できます。

エージェントは画面上のコンポーネントとトークンを洗い出し、それぞれをライブラリに対応付けます。たとえば、手作業で作られたチェックアウト画面の「Save for later」ボタンが、既存の「Button/Secondary」コンポーネントと重複していると指摘できます。また、現在のトークンを使うべき固定の色や余白の値も特定します。デザイナーは重複した要素を本番用コンポーネントやトークンに置き換えられます。特定のコンポーネントやトークンを一括置換したり、指定したライブラリのコンポーネントを検索して置き換えたりした後、変更内容を確認することもできます。

Granolaのプロダクトデザイナー、パーヴァン・ブッダデフ(Paavan Buddhdev)氏は、FigmaのChrome拡張機能で既存アプリの画面をFigmaに取り込んでいます。取り込まれたボタンなどの要素はGranolaのデザインシステムとの接続が切れますが、ボタンを選んで対応するシステム内のボタンに置き換えるようエージェントに依頼できます。チームは公開済みライブラリにガイドラインを添付でき、デザイナーがプロンプトごとに繰り返し説明しなくても、エージェントがシステムの意図やルール、パターンを参照できます。

ライブラリの整理では、「hover」「hovered」「mouse-over」のように一貫しない名前を見つけ、「small」と「sm」のようなバリエーション名を統一し、その命名方針をライブラリ全体に適用できます。「icon_1」「icon_2」のような一般的な名前を「linkedin_icon」「tiktok_icon」のような説明的な名前に変更し、コード更新向けに変更記録を作ることも可能です。コンポーネント全体のトークン使用状況を確認して使用中のトークンを注記し、ライブラリ内で共通の余白トークンが使われている箇所にある8 pxのアイコン間隔を指摘することもできます。こうした確認作業は、繰り返し使えるスキルとしてまとめられます。

2026年10月6日、Figmaのプロダクトマネージャー、ウェイン・リン(Wayne Lin)氏は、同社のデザインエージェントでFigma内のデザインシステムを維持する方法を説明しました。エージェントはキャンバス上で動作し、コンポーネントの文書化、ライブラリとの照合、現行のコンポーネントやデザイントークンへの更新、名前の変更などの整理を支援します。Professional、Organization、Enterpriseおよび一部のEducationプランではFullシートのユーザーが利用でき、Starterでは一部機能に限られます。Collab、Dev、Viewシートでは下書きで使用できます。

デザイナーはエージェントに、コンポーネントの説明書の草案作成、バリエーションや設定の提示、開発者への引き継ぎに使うAPIの提案を依頼できます。Uberのプロダクトデザイナー、イアン・ギサード(Ian Guisard)氏は、自作のスキルと組み合わせ、Uberの7つのプラットフォームにまたがるコンポーネントを文書化しています。「/create-api」はコンポーネントの動作説明を作り、「/create-color」は各バリエーションや状態で使われるデザイントークンを示す色の仕様を生成します。Figmaによると、こうした文書があれば、開発者はデザインファイルを探したりデザイナーに確認したりせずに必要な詳細を把握できます。

エージェントは画面上のコンポーネントとトークンを洗い出し、それぞれをライブラリに対応付けます。たとえば、手作業で作られたチェックアウト画面の「Save for later」ボタンが、既存の「Button/Secondary」コンポーネントと重複していると指摘できます。また、現在のトークンを使うべき固定の色や余白の値も特定します。デザイナーは重複した要素を本番用コンポーネントやトークンに置き換えられます。特定のコンポーネントやトークンを一括置換したり、指定したライブラリのコンポーネントを検索して置き換えたりした後、変更内容を確認することもできます。

Granolaのプロダクトデザイナー、パーヴァン・ブッダデフ(Paavan Buddhdev)氏は、FigmaのChrome拡張機能で既存アプリの画面をFigmaに取り込んでいます。取り込まれたボタンなどの要素はGranolaのデザインシステムとの接続が切れますが、ボタンを選んで対応するシステム内のボタンに置き換えるようエージェントに依頼できます。チームは公開済みライブラリにガイドラインを添付でき、デザイナーがプロンプトごとに繰り返し説明しなくても、エージェントがシステムの意図やルール、パターンを参照できます。

ライブラリの整理では、「hover」「hovered」「mouse-over」のように一貫しない名前を見つけ、「small」と「sm」のようなバリエーション名を統一し、その命名方針をライブラリ全体に適用できます。「icon_1」「icon_2」のような一般的な名前を「linkedin_icon」「tiktok_icon」のような説明的な名前に変更し、コード更新向けに変更記録を作ることも可能です。コンポーネント全体のトークン使用状況を確認して使用中のトークンを注記し、ライブラリ内で共通の余白トークンが使われている箇所にある8 pxのアイコン間隔を指摘することもできます。こうした確認作業は、繰り返し使えるスキルとしてまとめられます。