Figma、Markdownで設計ルールを定義するSpecs発表

a computer screen with the words the simplest way to create forms on it AI

デザインツールのFigmaは10月14日、インドで開いた初のConfigイベントで、Markdownで設計ルールを書ける新機能「Figma Specs」を発表しました。ブランドのデザイン原則をテキストで定義し、Figma自身のエージェントやサードパーティのエージェントに守らせる狙いです。同時にコードレイヤー機能も公開ベータに入り、MCP(Model Context Protocol、AIエージェントが外部ツールとやり取りするための共通規格)の対応ツールも20以上に増えました。AIがデザインとコードを量産する時代に、出力のばらつきをどう抑えるかという課題への一手です。

背景と文脈

AIの普及で、作れるものの量は急増しました。FigmaのチーフデザインオフィサーであるLoredana Crisan氏は、TechCrunchの取材に対して数字を挙げています。現在はかつての17倍のコードが書かれている一方で、リリース数は1.3倍にとどまるそうです。つまり、増えたコードの多くは出荷用ではなく、何を作るかを探るための試作だと説明しています。

試作が増えること自体は悪くありません。ただ、エージェントが毎回少しずつ違う見た目の画面を出力すると、チームは確認と手戻りに追われます。生成AIは同じ指示でも結果が変わる非決定的な性質を持つため、ブランドの色や余白、コンポーネントの使い方といったルールを毎回プロンプトに書き込む運用は長続きしません。

Figmaは直近の1週間で、キャンバス上で動くエージェントをより多くの利用者に開放したばかりです。今回の発表は、その自由度の高いエージェントに「守るべき枠」を与える位置づけだと言えます。インドはFigmaにとって米国外で最大の利用者市場で、ボンベイ証券取引所に上場する上位100社の40%が同社のツールを使っています。このイベントをインドで開いたのも、その規模が背景にあります。

技術/ビジネス面

black and silver retractable pen on blank book
Photo by Mike Tinnion on Unsplash

TechCrunchの報道によると、Figma Specsは自社のデザイン言語を簡単な書式で記述するMarkdownエディタです。単独のファイルとして置くことも、キャンバスの中に同居させることもできます。キャンバス上の要素やFigJamの図、コードレイヤー、デザインを文中から参照して埋め込めるため、文章と実物が離れません。

チームはデザインライブラリやコードライブラリ、ガイドラインも取り込み、デザインシステム全体の文脈を一か所にまとめられます。エージェントはこの集約された情報を参照して、ルールに沿った出力を目指します。開発者にとっては、リポジトリに置くREADMEやコーディング規約のデザイン版に近い存在です。

コードレイヤーは、キャンバス上のデザインにコードを加えて、動きのあるプロトタイプを作る機能です。6月に限定ベータで発表され、今回は公開ベータになりました。エージェントに「このデザインをコードにして」「このコードの一部を直して」と頼み、試作を繰り返せます。

もう1つの動きが、Payloadとの統合です。PayloadはオープンソースのヘッドレスCMS(画面表示と切り離して、コンテンツだけをAPIで管理する仕組み)で、Figmaが昨年買収しました。これをWebサイト生成機能のFigma Makeにつなぎ、動的なサイトの生成とコンテンツ管理を一貫して行えるようにします。Payloadのダウンロード数は直近12か月で6倍に伸びたと、同社は説明しています。

MCP対応も広がりました。新たにOpen CodeやDia、Grok Bot、インドのAIスタートアップSarvamなど20以上のツールが加わっています。Figma上の設計情報を、外部のコーディングエージェントが直接読みに来られる状態です。

これからどうなるか

注目点は、設計ルールが「人が読む資料」から「エージェントが読む入力」に変わることです。Markdownで書かれたSpecsは、人にも機械にも読めます。ルールが曖昧なままだとエージェントの出力も曖昧になるため、デザイナーには、暗黙知を明文化する作業が新しい仕事として加わりそうです。

実装者の視点では、フロントエンドのコードをエージェントに書かせている場合に影響があります。MCP経由でFigmaのSpecsやデザインシステムを参照させれば、プロンプトに色やコンポーネント名を書き足す手間が減る可能性があります。一方で、ルールの正本がFigma側とリポジトリ側の2か所に分かれる点には注意が必要です。どちらを正とするか、更新の流れをチームで決めておく必要があるでしょう。

非決定的なAIの出力を、完全には制御できません。それでも、ルールを渡す標準的な置き場ができれば、確認の負担は確実に下がります。他のデザインツールやIDEが同種の仕組みを出してくるかも、今後の見どころです。

まとめ

FigmaはSpecsとコードレイヤー、Payload統合、MCP拡張をまとめて発表しました。狙いは、増え続けるAI生成物を、ブランドのルールに沿った形でそろえることです。ルールを書く側の運用設計が、成果を左右しそうです。

参考リンク

アイキャッチ画像: Photo by Team Nocoloco on Unsplash

タイトルとURLをコピーしました