SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine(コードジン) DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア

ProductZine Day&オンラインセミナーは、プロダクト開発にフォーカスし、最新情報をお届けしているWebメディア「ProductZine(プロダクトジン)」が主催する読者向けイベントです。現場の最前線で活躍されているゲストの方をお招きし、日々のプロダクト開発のヒントとなるような内容を、講演とディスカッションを通してお伝えしていきます。

AI時代の「壁」を乗り越えろ。プロダクトマネージャーが直面するカオスと、現場を動かす「仕組み化」のリアル

ProductZine Day 2026

ProductZine Day 2026

ProductZineニュース

Figma、Config Indiaでコードレイヤーや「Figma Specs」を発表。デザインとコードをキャンバスに集約

斉木 崇(編集部)[著]

 Figmaは10月15日、インドのベンガルールで開催した「Config India」で、チームがAIを活用し、キャンバス上で共同作業しながらデザインと開発を進めるための新機能を発表した。「コードレイヤー」「Figma Specs」、デザインシステムの集約機能、オープンソースのCMS「Payload」との連携などを含む。

キャンバス上に並べたコードレイヤー。動作するプロトタイプを比較しながら検討できる
キャンバス上に並べたコードレイヤー。動作するプロトタイプを比較しながら検討できる

 Config Indiaは年次カンファレンス「Config」のインド版で、同国での開催は初めて。共同創業者兼CEOのDylan Field(ディラン・フィールド)氏は基調講演で、インドが日次アクティブユーザー数でFigma第2位のコミュニティであることを明かした。

 今回の発表の背景にあるのは、開発の進め方の変化。コーディングが低コストになり、まず開発から始めるチームが増えた一方で、AIエージェントと個別に作業する人が多くなり、チームで作業内容を共有しながらリリースすることが難しくなっているという。Figmaは、人とAIエージェント、デザインとコードを1か所でつなぐ環境を「フルスタック・クリエイティブキャンバス」と位置づける。

 Field氏は講演で、AIで誰もが速くソフトウェアを作れるようになるほど価値は上のレイヤーへ移るとして、「デザインこそが差別化要因」と強調。作りながら考えを広げる「考えるためにつくる(building to think)」と、精度やクラフトが問われる「出荷するためにつくる(building to ship)」の2つのモードを示し、前者でも「思考をAIに委ねてはいけない」と、くぎを刺した。新機能は、この2つのモードをFigma上でつなぐものとして紹介された。

キャンバス上でデザインし、コーディングする「コードレイヤー」

 「コードレイヤー」は、Figma Designのキャンバス上で、コードで動作するプロトタイプを作成・編集・比較できる機能。本番環境への展開も可能。Figma AIエージェントへのプロンプトのほか、GitHubリポジトリや、MCP経由でコーディングエージェントからコードを取り込んで作成する。講演では、Chrome拡張機能の新機能「capture code」で本番のWebサイトを取り込むデモも行われた。10月15日からオープンベータ版として提供されている。Figma MCPも拡充され、OpenCode、Dia、Meta Muse、Sarvamなど20の新たなパートナーとの連携が発表された。

仕様をまとめてチームとAIエージェントに渡す「Figma Specs」

 「Figma Specs」は、デザインの意図や実装の詳細をまとめ、チームやAIエージェントと共有できるMarkdownエディター。キャンバス上のデザインと並べて作成でき、FigJamの図やコードレイヤー、デザインの埋め込みに対応する。講演ではプロダクトエンジニアのJohnny Dallas(ジョニー・ダラス)氏が「プロトタイプのコードは本番のコードではない」として、データモデルや運用の検討はエンジニアが担うと指摘。仕様に人がコメントでレビューを重ね、そのリンクをコーディングエージェントに渡す使い方を紹介した。

Figma Specsで作成したPRD。コメントでチームとやりとりできる
Figma Specsで作成したPRD。コメントでチームとやりとりできる
デザインシステムを1か所に集約

 デザインライブラリ、コードライブラリ、ガイドラインをFigmaに集約し、1つのデザインシステムとして接続できるようにする。全体像の可視化や改善を支援するツールも備える。Figmaは、AIエージェントを活用した制作が増えるほど、一貫性を保つデザインシステムの重要性は高まるとしている。

デザインシステムの管理画面。システムマップやライブラリを一覧できる
デザインシステムの管理画面。システムマップやライブラリを一覧できる
Payload(CMS)を使い、Figmaから直接リリース

 「Payload」は、Webサイトやアプリのコンテンツ、メディア、APIなどを支えるオープンソースのバックエンド兼CMS。昨年Figmaに加わった。今回のアップデートで、Figma Makeで作成したアプリをPayloadに接続し、コンテンツやデータの作成、公開、管理までを1か所で行えるようになる。

 講演でPayloadの創業者は「出荷とローンチは同じではない」と指摘した。機能ができてプロダクトに入っても(出荷)、それを市場に打ち出してユーザーに届ける(ローンチ)には、告知やローカライズといったマーケターの作業が残る。同氏は、Payloadとの連携は、こうした作業までFigma上で扱えるようにするものと説明した。

Figma MakeとPayloadで作成したWebサイト。コンテンツの作成から公開までをFigma内で扱える
Figma MakeとPayloadで作成したWebサイト。コンテンツの作成から公開までをFigma内で扱える

 Field氏は講演の締めくくりで「エージェントは皆さんに取って代わるためではなく、最大限に力を発揮できるようにするためにつくっている」と述べ、「すばらしいものをつくるには、あなたの意図、クラフト、創造性が必要」と呼びかけた。

 コードレイヤー以外の新機能は、今後数週間かけて順次提供される、今後数週間かけて順次提供される。提供時期や利用条件は機能によって異なり、詳細はFigmaのヘルプセンターで案内されている。

関連リンク

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
ProductZineニュース連載記事一覧

もっと読む

この記事の著者

斉木 崇(編集部)(サイキ タカシ)

株式会社翔泳社 ProductZine編集長。1978年生まれ。早稲田大学大学院理工学研究科(建築学専門分野)を卒業後、IT入門書系の出版社を経て、2005年に翔泳社へ入社。ソフトウェア開発専門のオンラインメディア「CodeZine(コードジン)」の企画・運営を2005年6月の正式オープン以来担当し、2011年4月から2020年5月までCodeZine編集長を務めた。教育関係メディアの「EdTechZine(エドテックジン)」...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー