Figma、コードとデザインをつなぐ新機能を発表、仕様共有やサイト管理も

Figmaは2026年10月15日、コードとデザインを連携する新機能を発表した。動く試作品の比較から、仕様の共有、ウェブサイトの管理までを対象にしている。

動く試作品とデザインをつなぐ

中心となるcode layersは、動く試作品を共同で試し、比較する機能だ。2026年10月15日から全プランで公開ベータとして順次提供する。正式提供前の機能を、利用者に広く開放する形だ。

Figmaによると、手元のフォルダーなどから対応する試作用コードを取り込める。Chromeの拡張機能を使い、公開中のウェブページを取り込むこともできるという。

Extract designsは、試作品の画面を編集可能なデザインに変換する機能だ。同社は、動く試作品を扱うだけでなく、その画面をデザインとして編集できるとしている。

利用にはAIクレジットという利用枠を使う。有料プランでは2026年11月4日まで、code layersの作成・編集が無料だ。全プランが対象であることと、作成・編集の無料期間は分けて確認したい。

かんたんに言うと、見本と説明書を一緒に扱う

code layersは、動く見本を共同で確かめる場にたとえられる。一方、Specsは、その見本に説明書を添えるような機能だ。

Figmaによると、Specsでは文章とデザインをまとめ、仕様や決定事項をチームで共有できる。画面の見た目だけでなく、どう作るかという情報も一緒に扱う仕組みだ。

Specsはウェブ、デスクトップ、モバイルに対応する。2026年10月15日から、有料プラン向けに公開ベータを順次提供する。

サイトを公開した後の管理に関わる更新もある。Figma Makeには、内容を管理する基盤のPayloadを統合した。同社によると、担当者は管理画面から記事や画像を更新・公開できる。

Payloadを使うFigma Makeのホスティング基盤、つまりサイトを公開するための基盤は、現在ベータ版で無料だ。

日本では

日本での提供は発表されていない。資料には、日本で使えるか、日本向けの提供時期や価格、日本語への対応についての記載はない。全プラン向けという案内だけで、日本での利用可否までは判断できない。

まとめ

今回の発表は、動く試作品とデザイン、仕様書、公開後の管理をつなぐものだ。ただし、機能によって対象プランや試験提供の範囲が異なる。

Figmaは今後、より複雑なコード群にも対応する計画だ。Payloadは全プランを対象に、今後数週間かけて全アカウントへ順次提供する。ホスティング基盤の料金と提供体系は、適用前に発表する予定だ。