Figma Make×PayloadとFramer Skills：デザインルールをAIに覚えさせるサイトビルダー新機能(2026年10月)

2026年10月29日

AIサイトビルダーの競争軸が「どれだけ速く作れるか」から「ブランドのルールをどれだけ覚えさせられるか」に移りつつあります。今回は、Figma MakeのPayload連携とFigma Specs、FramerのAgentsとSkillsを取り上げ、デザインルールをAIに持たせる流れを整理します。

1. Figma：Specsでデザインの「言葉」をAIに渡す

Figma Makeを運営するFigmaは、インド開催の「Config India 2026」で新機能を発表しました。目玉はマークダウンで書く新しい仕組み「Specs」です。デザイン言語や方針を文章で定義し、チームやAIエージェントが参照できます。キャンバス上の要素、FigJamの図、コードレイヤーも参照・埋め込みできます。

Specsは単独ファイルとしても、キャンバス内にも置ける
GitHubコネクタでコードベースから技術仕様の下書きも作れる
Figma MCPが更新され、コードレイヤーやSpecsを普段使いのAIツールから扱える。エージェント向けの案内を改善し、エラーとトークン使用量を減らしたとしている

2. Figma Make × Payload：コンテンツ管理まで一体に

Figmaは昨年オープンソースのヘッドレスCMS「Payload」のチームを迎えました。今回、そのPayloadをFigma Makeに統合しています。デザイナーがv1をプロンプトで作り、マーケターが文言を更新し、開発者がPayload側でカスタマイズする、という分担を想定しています。入力したコンテンツはデザインシステムに紐づくため、ブランドの見た目が崩れにくい点が売りです。Figmaがホスティングするので、コンテンツとデータも同じ場所に置かれます。

なお、Figma MakeではGeminiの新モデルGemini 4 Argonも全プランで選べるようになったと、リリースノートにあります。

3. Framer：AgentsとSkillsで「覚える」AI

Framerは2026年6月のFramer 3.0で、キャンバス内で共同編集するFramer Agentsを導入しました。ほかにBranching（公開サイトの隔離コピーで安全に試す機能）、Framer CLI経由でClaude Codeなどをつなぐ外部エージェント、AIクレジット課金も入っています。

最近は「Skills」も加わりました。デザインシステム、文体、CMS運用といった文脈を保存でき、毎回同じ指示を書き直さずに済みます。キャンバス上の既存の配置からレイアウト規則を推測する動きもあるとのことです。

4. v0・Lovable・Bolt.new・Replit：選び方の目安

v0、Lovable、Bolt.new、Replitについては、比較記事で「生成コードを誰が保守するか」を軸にする見方が目立ちます。生成物はコードベースなので、安全に直すには読める人が必要です。

ツール	向く場面	留意点
Figma Make	デザインシステムを守ったままCMS付きサイトを作る	Specsやデザインライブラリの整備が前提
Framer	見た目重視のサイトをAIと共同編集、Skillsで文脈を保持	AIクレジットの消費を確認
v0	ReactのUIをVercelへ展開	フロントエンド寄り
Lovable	非エンジニアやデザイン主導の試作、GitHub双方向同期	クレジットはメッセージ単位
Bolt.new	ブラウザで素早くWebの試作	トークン課金、生成コードの確認は必要
Replit	開発・DB・公開を1か所で	コードの見直しは利用者の責任