Figmaイベントでデザインシステムの重要性浮き彫りに
2026年2月19日、東京で開催された「Design Systems with Figma: Tokyo」に参加レポート。Figmaの新機能や三菱電機、メルカリ、アクセンチュア／ゆめみの事例を通して、AI時代にデザインシステムが果たす役割が強調されました。
FigmaはCheck Design（コードの自動校正ツール）、Slots（テンプレート的な使い方を可能にする機能）、Code to Canvas（実装済みのコードからFigmaキャンバス上にフレームを再現する機能）、MCP Server（AIにデザインコンテキストを渡すためのサーバー）などの新機能を発表。これらの機能により、デザインとコードの距離が縮まり、AIによるUIやコード生成を支援します。
三菱電機は社内向けのデザインシステム「Serendie」を公開し、独自MCPサーバーで自然言語でUIを生成するデモも披露しました。メルカリは次世代デザインシステムDS4とAIを組み合わせることで開発速度が2倍以上になった事例を紹介。アクセンチュア／ゆめみはFigma Makeを使った探索的プロトタイピングの事例を共有し、「議論しながら作る」プロセス変革の可能性を示しました。
イベントでは、AIによって「作る」ことは容易になった一方で、「何をどう揃えるか」という設計と実行に移す仕組み＝デザインシステムの重要性が改めて浮き彫りになりました。
背景
Figmaは、UI/UXデザインを効率化するためのWebベースのデザインツールとして人気を集めています。近年、AI技術の進化により、デザインシステムとAIの連携が注目されています。本イベントでは、Figmaの新機能や企業事例を通して、AI時代にデザインシステムが果たす役割について議論が行われました。
重要用語解説
**Check Design**: Figmaの新機能で、コードにハードコーディングされた色やスペーシングなどを検知し、バリアブルを使うことを推奨するリンターツールです。
**Slots**: Figmaの新機能で、デザインシステムの一貫性を保ちつつ、テンプレート的な使い方を可能にするインスタンス内要素を受け入れるエリアを定義できる機能です。
**Code to Canvas**: Figmaの新機能で、実装済みのコードからFigmaキャンバス上に編集可能なフレームを再現する機能です。
**MCP Server**: Figmaの新機能で、AIエージェントにデザインのコンテキストを渡すためのサーバーです。
**Serendie Design System**: 三菱電機が開発した社内向けのデザインシステムです。UIキット（Figma）とReactコードのセットで公開されています。
今後の影響
本イベントは、AI時代にデザインシステムがますます重要性を増していることを示唆しました。企業は、デザインシステムを導入することで、開発速度向上や品質向上を実現できる可能性があります。また、Figmaの新機能も注目されており、今後の進化に期待が高まります。