Figmaの新機能が示すAI時代のデザイン管理
みんな、こんにちは！元アイドル志望のシステムエンジニア兼AIライター、星野りりあだよっ。今日は、デザインツールの大手Figmaがインドで開催した「Config」イベントで発表した画期的な新機能について、あたしの視点で深掘りしていくね。
AIで画像を大量に生成しているのに、それをうまく活用できていない…そんな悩みを抱えている人、多いんじゃないかな？あたしもまさにその一人。でも、今回のFigmaの発表を知って、「これだ！」と思ったの。だって、AIが作ったデザインをどう管理して、どう活かすかという根本的な課題に応える内容だったから。
Figmaが発表したMarkdownベースのエディタ「Figma Specs」は、企業のデザイン言語を定義し、AIエージェントがブランドルールに従うための中央管理システムを提供。さらにコードレイヤーの公開ベータやPayloadとの統合により、AI生成物の活用と管理が飛躍的に向上する。
Figma Specsとは？Markdownでデザイン言語を定義
Figmaが発表したFigma Specsは、Markdownベースのエディタで、企業のデザイン言語をシンプルに定義できるツールだよ。これまでのデザインシステムって、ガイドラインがPDFだったり、Notionに散らばっていたりして、チーム全体で共有するのが難しかったんだよね。
でもSpecsなら、Figma内でスタンドアロンファイルとしても、キャンバス内に共存させることもできるの。テキストエディタとしてだけでなく、キャンバス上の要素やFigJamの図、コードレイヤー、デザインを参照・埋め込みできるのがポイント。
え、でもそれってただのドキュメントツールでしょ？AIと何が関係あるの？
いい質問だね。実はここが肝心。SpecsはAIエージェントが参照する「中央管理システム」として機能するんだ。つまり、AIがデザインを生成するときに、このSpecsに従わせることで、ブランドの一貫性を保ちながらAIを活用できるようになるのさ。
なるほど！でも、AIって非決定的で予測不能な部分があるよね？そこはどう解決するの？
そこもFigmaは考えている。AIの非決定性に対応するため、Specsのようなルールを明示する仕組みを提供しているんだ。これにより、AIの出力をより予測可能な方向に導ける。まさに「AIと一緒に輝く」ための基盤だね。
コードレイヤーとPayload統合がもたらす変革
Figmaは昨年、オープンソースのヘッドレスCMS「Payload」を買収したんだけど、今回それをFigma Makeと統合することを発表したよ。これにより、動的なウェブサイトを生成しながら、コンテンツを直接管理できるようになるの。
さらに、コードレイヤー機能がオープンベータとして公開されたんだ。これは6月にプライベートベータとして発表された機能で、キャンバス上のデザインにコーディングを追加して、よりインタラクティブなプロトタイプを作れるもの。ユーザーはエージェントにデザインをコードに変換させたり、コードの一部を変更してプロトタイプを反復したりできるの。
Figmaのデザイン責任者が語るAIの現状
Figmaのチーフデザインオフィサー、ロレダナ・クリサン氏はTechCrunchの取材に対し、こんな興味深いデータを語っているよ。
「今日は過去と比べて17倍のコードが生産されている。しかしリリースを見ると、わずか1.3倍しか増えていない。多くのコードは出荷用ではなく、製品を発見するために、つまりデザインするために書かれているんだ。」
このデータ、すごく示唆に富んでいるよね。つまり、AIによってコードを書くスピードは劇的に上がったけど、実際にリリースされるプロダクトはそれほど増えていない。多くのコードは「デザインの探索」に使われているの。
このデータからわかるのは、AIは「作る」フェーズを爆速にするけど、「何を作るか」を決めるデザインフェーズの重要性はむしろ増しているってこと。FigmaがSpecsやコードレイヤーを提供するのは、まさにこのデザインと開発の橋渡しを強化するためなんだね。
インド市場でのFigmaの躍進とMCP対応
Figmaはインドで初のオフィスを開設し、Sales、パートナーシップ、GTM、プロダクトサポート機能を展開しているよ。インドは米国以外で最大のユーザー市場なんだって。ボンベイ証券取引所に上場しているインドのトップ100企業の40%がFigmaを利用しているというから驚きだよね。
また、FigmaはMCP（Model Context Protocol）を通じて20以上の新しいツールをサポートすることも発表したよ。Open Code、Dia、Grok Bot、そしてインドのAIスタートアップSarvamなどが含まれているの。これにより、さまざまなAIツールとFigmaが連携しやすくなるんだ。
なぜ今、デザインシステムとAIの統合が重要なのか
ここでちょっと考えてみて。みんなはAIで画像を生成したとき、こんな経験ない？
- 大量に生成したけど、どれがどれだかわからなくなる
- チームで共有しても、ブランドカラーやフォントがバラバラ
- せっかく作ったのに、実際のプロダクトに反映されない
あたしもまさにこの壁にぶつかってたの。でもFigmaのSpecsがあれば、AIが生成するデザインにあらかじめルールを教え込める。つまり、ブランドの一貫性を保ちながら、AIの創造性を活かせるわけ。
でも、うちのチームはFigma使ってないし、AIツールもバラバラで…
それならなおさら、Figmaの動きは無視できないよ。なぜなら、MCPを通じてさまざまなAIツールと連携できるから。Figmaをハブにして、AI生成物を管理する流れが業界標準になりつつあるんだ。
AI画像を活かすための実践ステップ
じゃあ、実際にどうやってFigmaの新機能を活用していけばいいのか、具体的なステップを紹介するね。
まずは、自社のブランドカラー、フォント、余白のルールなどをMarkdown形式でSpecsに書き出そう。キャンバス上の要素を参照できるから、視覚的にもわかりやすいよ。
FigmaのAIエージェントや連携するAIツールに、このSpecsを参照させることで、生成されるデザインが自動的にブランドルールに沿うようになるの。
生成したデザインをコードレイヤーでインタラクティブなプロトタイプに変換。エージェントにコード変更を指示して、素早く反復しよう。
Figma MakeとPayloadを統合すれば、動的なウェブサイトを生成しながら、コンテンツをCMSで管理できる。AI生成物を実際のサイトに反映させるハードルがぐっと下がるよ。
従来のワークフローとの比較
どれだけ変わるのか、表で比較してみたよ。
| 項目 | 従来のワークフロー | Figma新機能活用後 |
|---|---|---|
| デザインルールの共有 | PDFやNotionで分散 | Specsで一元管理 |
| AI生成物の一貫性 | 手動でチェック・修正 | Specs参照で自動的に準拠 |
| プロトタイプ作成 | 別ツールでコーディング | コードレイヤーでFigma内完結 |
| コンテンツ管理 | 別途CMSを構築 | Payload統合でシームレス |
| AIツール連携 | 個別にAPI連携 | MCPで20以上のツールと接続 |
よくある質問
Figma Specsは無料で使えるの？
Figmaの公式発表では、Specsの利用価格についての詳細は明言されていません。ただし、Figmaの既存プランに組み込まれる可能性が高いと推測されます。最新情報は公式サイトをチェックしてみてね。
コードレイヤーはプログラミング知識がないと使えない？
コードレイヤーは、AIエージェントに指示を出すことでコードを生成・変更できる機能です。自分で一からコードを書く必要はありませんが、基本的なコードの概念を理解していると、より活用の幅が広がります。
Payloadとの統合は既存のFigmaユーザーにもメリットがある？
はい、特にWebサイトやアプリのコンテンツ管理をしているチームにとっては大きなメリットがあります。デザインとコンテンツ管理がシームレスにつながることで、更新作業の効率が格段に向上します。
MCPって何？
MCPは「Model Context Protocol」の略で、AIモデルと外部ツールを連携させるためのプロトコルです。FigmaがMCPをサポートすることで、さまざまなAIツールとFigmaがスムーズに連携できるようになります。
まとめ：AIとデザインの未来を掴もう
Figmaの今回の発表は、AI時代のデザインワークフローを根本から変える可能性を秘めているよ。特に、大量のAI画像をどう管理し、どう活用するかという課題に対して、具体的な解決策を提示してくれたのが嬉しいポイント。
あたし自身、アイドルオーディションに何度も落ちて、夢を諦めかけたこともあった。でも、AIという新しい相棒に出会って、「夢は叶わなかったけど、AIがいるからまだ諦めない！」って思えるようになったの。みんなも、AIを味方につけて、自分のクリエイティブを輝かせてみない？
Figmaの新機能は、まだベータ版のものもあるけど、今から触っておくことで一歩先を行けるはず。限定感があるうちに、ぜひチェックしてみてね！
※本記事は2026年10月時点の情報に基づいています。最新の情報はFigma公式サイトをご確認ください。
参考情報: techcrunch.com
著者について
