当メディアはアフィリエイトプログラムによる収益を得ています

Figma、デザインから開発・コンテンツ管理まで支援。「Config India」でMCP連携や新機能を発表

Figmaは10月15日、インド・ベンガルールで開催したイベント「Config India」で、デザインから開発、コンテンツ管理までを支援する新機能を発表した。

コードで作成したプロトタイプをデザイン画面上で扱える「Code Layers」や、仕様書の作成・共有に対応した「Figma Specs」、デザインシステムの管理機能などを順次提供する。また、CMS(コンテンツ管理システム)「Payload」との連携も強化し、アプリの制作からコンテンツの管理、公開、運用までを支援する。

今回が初開催となった「Config India」には、対面とオンラインを合わせて3万人以上が参加登録した。FigmaのCEOを務めるディラン・フィールド氏は、インドが日次アクティブユーザー数で世界第2位のコミュニティになっていると説明。同社にとって、インド市場の重要性が高まっていることを示した。

スポンサーリンク

コードベースのプロトタイピング機能「Code Layers」を公開

「Code Layers」は、コードを使って作成した操作可能なプロトタイプを、Figmaのデザイン画面上で作成、編集、比較できる機能だ。10月15日からオープンベータ版の提供が始まった。

プロトタイプの作成には、AIへの指示に加え、GitHub上のコードやローカルフォルダ内のファイル、MCPに対応したコーディングエージェントなどを利用できる。また、Chrome拡張機能を使って、実際に動作するWebサイトを取り込むことも可能だ。作成したプロトタイプは、本番環境へのデプロイにも対応している。

Figmaは、外部のAIツールとの連携も拡充する。MCP(Model Context Protocol)は、AIツールが外部のサービスやデータと連携するための仕組みだ。

今回、Figma MCPのパートナーとして、OpenCode、Dia、JetBrains Junie、Meta Muse、Sarvamなど20のサービスが新たに加わることが発表された。外部のAIツールからFigmaのデザイン情報を参照できるようになり、既存のデザインを踏まえながら、コードの作成や開発作業を進めやすくなる。

スポンサーリンク

仕様書の作成・共有を支援する「Figma Specs」

今回のイベントでは、仕様書の作成と共有を支援する「Figma Specs」も発表された。Markdown形式に対応したエディターを備え、デザインの意図や製品要件、技術的な詳細などを記録できる。

ドキュメントを単独で利用できるほか、Figmaのデザイン画面の横に配置し、FigJamで作成した図表やデザイン、Code Layersで作成したプロトタイプなどと組み合わせて管理することも可能だ。関連する資料をまとめて確認できるため、デザインの意図や仕様をチーム内で共有しやすくなる。

ドキュメント上では、チームメンバー同士でコメントをやり取りできるほか、FigmaのAIエージェントに内容を読み取らせ、質問への回答を求めることもできる。

さらに、MCPを介して仕様書の情報をコーディングエージェントに渡すことも可能だ。設計時に決めた内容や開発上の要件を実装作業に引き継ぎやすくなり、デザインと開発の間で情報を共有する際の手間を減らせる。

Figma Specsは、有料プランを対象に、Web、デスクトップ、モバイルでオープンベータ版の提供が順次始まる。

デザインシステムの管理機能も強化

デザインシステムの管理機能も強化される。デザインシステムとは、ボタンや入力欄などの部品に加え、色や文字の使い方、各部品の利用ルールなどをまとめた仕組みだ。複数のデザイナーや開発者が関わるプロジェクトでも、共通のルールに沿って制作を進められるようにする役割がある。

今回の機能強化では、デザイン用のライブラリだけでなく、コードのライブラリや利用ガイドラインもまとめて管理できるようになる。

GitHubやnpmにあるコードを参照できるほか、システムマップを使ってデザインシステム全体を確認することも可能だ。また、部品の説明が不足している箇所や、クリック時・選択時などの動作状態に関する設定漏れをチェックする機能も用意される。

ガイドライン機能は有料プラン向けにオープンベータ版の提供が始まり、コードソースとの連携機能はクローズドベータとして提供される。デザインシステムの状況をまとめて確認できる管理用ダッシュボードも、今後順次展開される予定だ。

CMS「Payload」との連携でアプリの公開・運用まで支援

コンテンツ管理の領域では、Figmaが前年に買収したオープンソースのCMS「Payload」との連携が紹介された。Payloadは、Webサイトやアプリで使う文章、画像などのコンテンツやデータを管理するためのシステムだ。Figmaによると、過去12カ月でダウンロード数が6倍に増加したという。

Figma MakeとPayloadを組み合わせることで、アプリの制作だけでなく、アプリ内で使用するコンテンツやデータの管理、公開、運用までを進められるようになる。デザイナーやマーケター、開発者が同じプロジェクトに参加し、アプリを作る段階から公開後の運用まで連携できる環境を整える。

Payloadは全プランで利用でき、今後数週間にわたって順次提供される。

なお、FigmaのAIエージェントは10月6日から一般提供が始まっている。既存のコンポーネントやデザインシステムを活用しながら、デザインの作成や編集を支援する機能だ。

AIの進化によってコードを書くハードルが下がり、アイデアを素早く形にできるようになるなか、Figmaはデザインの検討から仕様の共有、実装、コンテンツ管理までを支援する環境の整備を進めている。今回発表した機能も、個々の作業を効率化するだけでなく、デザイナーや開発者など、異なる役割を担うメンバーが連携しながら製品を作り上げるための取り組みといえる。

(画像提供:Figma)