AI時代におけるデザインシステムの重要性
イベント冒頭のキーノートでは、デザインシステムの現在地と、Figmaが取り組んでいる3つの方向性についてお話ししました。
デザインシステムは、優れたプロダクトを支える基盤となるものです。チームがプロダクトを作っていく上で、一貫性・整合性・明確さをもたらしてくれます。そしてデザインシステムは、これからさらに大きな存在へと進化していくと考えています。
AIの進化によって、プロトタイピングのスピードは飛躍的に上がりました。一方で、そのスピードと引き換えにデザインの不整合が生まれやすくなっています。不整合を防ぐには、デザインシステムに関するすべての情報を一元管理する「Single Source of Truth（SSOT）」が必要です。Figmaはその存在になりうると私たちは考えています。
デザインシステムがFigma上に存在し、さまざまなリポジトリと連携し、MCPによってAIエージェントが操作できるようになれば、デザインシステムは単なる静的なライブラリではなく、プロダクトの見た目や使い心地を支える「生きたシステム」へと進化します。
この実現に向けて、Figmaでは3つの方向性で取り組みを進めています。
しなやかな設計
1つ目は「しなやかな設計」です。デザインシステムが柔軟であることで、より多くのアイデアをより早く試せるようになります。
Figmaにおいてバリアブル（Variables）は、デザインシステムを管理する上で欠かせない存在です。デザイントークンの実装やテーマの切り替えなど、デザインの効率性を高めるための基盤となる機能ですが、マルチブランドのデザインシステムを運用する現場では、バリアブルのコレクションやモードの管理が大きな負担になることもあります。
この課題に対してリリースしたのがExtended Collectionsです。ベースとなるコレクションを親として、各プロダクトやブランドが独自のテーマ拡張を行えるようにする仕組みで、親側の更新は自動的に引き継がれつつ、各ブランド固有の上書きはそのまま保持されます。
コンポーネントの柔軟性を高める新機能としてSlotもリリースしました。従来のFigmaコンポーネントでは、インスタンス内の要素数を柔軟に変更することが難しく、デタッチして親ライブラリとの接続が切れてしまうケースがありました。Slotを使えば、インスタンス内に独自のレイヤーを追加でき、デタッチせずに要素の差し替えや追加が可能になります。
早期アクセスで提供中のCheck Designsは、バリアブルが適用されていない箇所やコントラスト不足を検知するLinter的な機能です。開発チームへの引き渡し前に実行することで、デザインシステムとの整合性を保つガードレールとして機能します。
コードベースのコンテキスト
2つ目は「コードベースのコンテキスト」です。デザインシステムは、ビジュアルとコードの両方で構成されている必要があります。AIコーディングツールが高い精度でコードを書けるようになった今、自分たちのデザインシステムに沿ったコードをAIに書かせるためのコンテキストをどう提供するかが重要な課題です。
Code Connectは、Figmaのコンポーネントとコードを接続するための仕組みです。より手軽に設定できるCode Connect UIの導入も始まっています。
一方、先日リリースされたCode to Canvasでは逆方向の流れを実現します。コードで実装されたUIをFigmaのキャンバスに編集できるフレームとして取り込み、キャンバス上でデザインを探求してからまたコードに戻すことが可能になりました。
チーム全体に開くデザインシステム
3つ目は「チーム全体に開かれたデザインシステム」です。AIの登場により、プロダクト作りに関わるすべてのメンバーにとって、デザインシステムを活用する機会は広がっています。その代表的な例が、テキストプロンプトや既存のFigmaデータから機能的なプロトタイプを生成できるFigma Makeです。
ユーザーの皆さんから「自社のデザインシステムをFigma Makeにどう取り込むか」という声を多くいただいています。これに応えるため、FigmaコンポーネントをもとにFigma Make内でコードコンポーネントを生成できるMake kitsの開発を進めています。また、NPMパッケージのインポートにも対応し、自社やオープンソースのデザインシステムライブラリをFigma Makeに取り込めるようになりました。
イベントでは、ここで紹介した機能のデモを実演しています。YouTubeにイベントの様子が公開されているのでぜひご覧ください。
三菱電機：Serendie Design Systemの拡張戦略
三菱電機からは、統合デザイン研究所の山内貴司氏とDXイノベーションセンターの柴田博彬氏が登壇しました。
同社のSerendie Design Systemは、FigmaのUIキット、Reactコンポーネント、ガイドラインサイトをすべて社外公開しているデザインシステムで、2024年にグッドデザイン賞ベスト100を受賞しています。社外パートナーとの協業時にもNDAを締結する前から「こちらを見て、これを使って進めましょう」と言える点が、開発の立ち上がりを早くしていると紹介されました。
同社では、ハードウェア中心のメーカーゆえのUX/UIデザイナーやフロントエンドエンジニアのリソース不足、ウォーターフォール型開発に慣れているための開発スピードの遅さ、さまざまな製品を扱う事業間の垣根による統一の難しさといった課題があったと山内氏は語ります。Serendie Design Systemは、これらを解決するためにデザイナー向けのUIキットとエンジニア向けのReactコードをセットで提供し、社内外の誰でもすぐに使える基盤として構築されたものです。
さらに拡張の取り組みとして、独自のMCPサーバーや、検証機能とAI相談機能を備えた独自Linterプラグインの開発も紹介されました。
印象的だったのは、少人数での運営についてのお話です。グローバルで15万人の社員を抱える組織に対し、デザインシステムの運営メンバーは10名弱。デザインシステムのコアユーザーは社内に約400名いて、問い合わせも増え続けています。そこで、MCPサーバーを活用した質疑応答ツールを導入し、エンドユーザーが自己解決できる範囲を広げることで、人間が対応すべき問い合わせだけに集中できる体制を目指しているとのことでした。
