デザインシステムとAI：なぜMCPサーバーが鍵となるのか

AIエージェントでFigmaからのデザインコンテキストを使用すると、デザインシステムがさらに効果的になり、最終的にはより良いコード出力につながります。

長年にわたり、デザインシステムは製品開発チームがデザインの決定を拡大し、デザインとエンジニアリングを橋渡しするための足場となってきました。デザインシステムを成功させるための構成要素には、より良いコミュニケーション、広範なドキュメンテーション、共有パターンと言語があげられますが、これらはAIを効果的に活用するための基盤でもあります。デザインシステムは、デザインとエンジニアリングのチームがブランドガイドライン、ベストプラクティス、パターン、コードを理解するために役立ちますが、同様に、デザインシステムはAIエージェントに対し、単に何らかの出力ではなく適切な出力を生成するために必要なコンテキストを提供します。AIエージェントがデザインコンテキストをもとに構築できるようになると、フライホイール効果が生まれます。AIがデザインシステムを強化し、それがより良いAIコード生成を推進します。

良い実例としてFigmaのMCPサーバーがあります。これは、FigmaからIDEにコンテキストを提供します。このコンテキストには、スタイルやバリアブルの使用状況、バリアブルコードの構文、Code Connectなどの情報が含まれています。そのため、デザインでチームのデザインシステムの利用が多いほど、またデザインシステムでデザインとコードの連携が密接であるほど、MCPサーバーはより有用になります。組織がまだ強固なデザインシステムを構築していない場合でも、Figma MCPサーバーはトークンやコンポーネントの実装を支援することで、プロセスを開始するのに役立つツールとなります。

デザインシステムはデザインとAIの共通言語

LLMの利用により、アイデアを実行するのは簡単になりました。これにともない、優れた製品の決め手となる要素として、機能だけでなく「クラフト」もあげられるようになりました。これは明確な意図、見た目の独自性、思慮深いユーザーエクスペリエンスを反映したものです。デザインシステムにより、そのレベルのクラフトを組織全体でスケールさせることが可能になります。デザインシステムは、洗練されていてアクセスしやすく、使いやすいインターフェースの基本となります。これにより、品質や一貫性を犠牲にしなくても、チームは迅速に動けるようになります。また、これにより、全員が同じAI生成部品のプールから寄せ集めた同じ汎用のUIをリリースするという事態を回避できます。

優れたデザインシステムでは以下のことが可能です。

• スケーラブルな基盤: カラー、間隔、タイポグラフィなどのために定義済みのトークンを使用しているので、ビジュアル表現がプラットフォームや接点にまたがって一貫します。
• 再利用可能なコンポーネント: ユースケースに応じて柔軟に対応できるように構築され、一方で共通の情報源を維持します。
• 組み込みのアクセシビリティ: デザインによるインクルーシブな体験

すでに強固なデザインシステムの恩恵を受けている組織、またはその構築と維持のために時間とリソースをかけるべき理由を探している組織にとって、その恩恵はAIツールと組み合わせることでさらに大きくなります。デザインシステムを用いることで、AIエージェントは単に製品をより速く構築するだけでなく、デザイナーや開発者が慎重に作り上げたパターンやベストプラクティスに沿い、情報を元にしたアウトプットを生成します。

より多くの企業が製品開発スタックにAIツールを導入するにつれて、デザインシステムはこれらのツールをより良い成果へと導くための要としてさらに役立つことでしょう。これは、組織がAIをブランド、標準、チームに近づけるための手段です。

新たなレベルのスピードと精度

現在、製品開発におけるAIの最も一般的な使用例はコード生成です。Figmaの最近のAIレポートによれば、68%の開発者がAIを使用してコードを書いています。しかし、その出力を信頼すると回答したデザイナーと開発者は32%にとどまります。なぜでしょうか。それは、コンテキストがすべてだからです。

デザインシステムのコンテキストなしでAIエージェントにコード生成を依頼するのは、新しいエンジニアにオンボーディング前にコードのリリースを開始させるようなものです。技術的には機能するかもしれませんが、チームによる構築方針とは一致しません。

なぜこれが重要なのか

AIエージェントがデザインシステムのコンテキストを使用してコードを生成すると、次のことができます。

• 既存のコンポーネントとパターンを再利用する: 重複や不一致を減らす
• デザイントークンを自動的に適用する: ブランドとアクセシビリティの基準にコードを合わせる
• 開発者に高品質の開始コードを提供する: エンジニアが迅速かつ正確に作業できるよう支援する
• フィードバックループを短縮する: デザインとエンジニアリングの間の誤解を減らし、QAに費やす時間を短縮することにより、両者を結びつける

ここでFigmaのMCPサーバーが活躍します。Figmaのフレームがインスペクトされると、MCPサーバーはコンポーネント、スタイル、バリアブルなどのコンテキスト情報をAIエージェントに送信します。これらの要素がCode Connectおよびバリアブルコード構文を介してコードにマッピングされている場合、エージェントは実際のコードリソースから情報を取得できます。そうでない場合でも、サーバーはスタイル情報を提供し、エージェントがデザインに基づいたコードを最初から作成するのを助けます。

そしてさらに、自動化されたデザインシステムルール生成の追加により、MCPサーバーはコードベースをスキャンし、トークン定義、コンポーネントライブラリ、スタイル階層、命名規則のアウトラインを示す構造化されたルールファイルを出力できます。このファイルはエージェントのためのシステムレベルのガイドとして機能します。これにより、曖昧さが低減し、生成されたコードがチームの基準に準拠するようになります。細かい詳細 (スペース、トークン、命名規則) をいちいちAIツールに指示する必要がなくなるため、開発者は構築に集中でき、AIはシステムに基づいたデフォルトを使用して空白部分を埋めます。

より良いデザインシステムの構築

FigmaのMCPサーバーは、開発者がより良いコードを書くのを助けるだけでなく、デザインシステムチームがAIをパートナーとしてシステムを構築、管理、進化させるための強力な新しい方法を提供します。これにより、チームはエージェントを使用して次のことができます。

1. 会社の基準に沿ったコンポーネントコードを生成する

まず最初に、Figma MCPサーバーを利用すると、AIエージェントの出力はチームの既存のパターンに従うようになります。以下のことが可能になります。

• 新しいコンポーネントデザインのMCPコンテキストを、既存のコンポーネントと組み合わせて、既存の基準に沿った形で新しいコンポーネントコードを実装する。
• ReactとTailwindのデフォルトの出力に限らず、チームが使用している言語とフレームワークに一致するコードを生成する。

このコンテキストは、コンポーネントの作成と改訂のスピードを上げるだけでなく、デザインとコードの整合性を高めるワークフローの重要性も強調します。

2. デザイントークン作業の自動化

Figma MCPサーバーでは、AIエージェントがデザイントークンを適用または導入する場所を特定できます。以下のことが可能になります。

• デザイントークンがまだ適用されていない場合に、それを使用する箇所を提案する。
• デザインとコードベースのコンテキストを使用して、作成したデザイントークンが定義済みの標準に準拠していることを確認する。
• チームのより良いデザイントークンワークフローを構築するために、プラグインとREST APIを使用してスクリプトと自動化を作成する。

トークンを使い始めたばかりでも、長年使っているシステムを改善する場合でも、Figma MCPサーバーはデザインとコードの両方でトークンの導入と使用を推進するのに役立ちます。

3. 整合性の監査と改善

効果的なデザインシステムを維持するためには、デザインとコードの整合性を確保することが重要です。Figma MCPサーバーを使用すると、AIエージェントはデザインのコンテキストを利用して、デザインとコードベースの差異の監査を支援します。以下のことが可能になります。

• コード内のデザインのトークンの使用状況を、選択されたデザインと比較し、その逆も評価する。
• Figmaのコンポーネントとコードのコンポーネントの整合性を高めるために、レイヤー名を改善する方法を指摘する。
• コードとの整合性を高めるためにFigmaのプロパティの改善を提案する。
• コードをレスポンシブにし、デザインの潜在的な問題を早期に特定する。

ここでは、AIエージェントがデザインとコードの間のプロップ整合の提案を生成するのを支援するために、Figma MCPサーバーをどのように利用できるかを説明します。

すでにCode Connectを設定している場合、生成されたコードは既存のパターンやデザインとの整合性が高くなります。Code Connectの実装を始めたばかりの方の場合、Figma MCPサーバーは、さらに多くの構造と提案を事前に提供することで、オンボーディングプロセスをよりスムーズにすることができます。

今後に向けて

デザインシステムとAIの協力は、可能性のほんの一部に過ぎません。これは単なるツールの変化ではなく、構築方法の変化です。AIワークフローにシステムレベルの考え方を組み込むことで、チームが反復作業を迅速に進めることができるようになり、その分、人々に好まれる、考え抜かれた美しいデザインの製品を作ることにチームが集中できるようになります。