【ITニュース解説】Figma made its design tools more accessible to AI agents

Figmaが人工知能、つまりAIモデルとデザインツールとの連携を強化したというニュースは、ソフトウェア開発の現場に大きな変化をもたらす可能性を秘めている。これは、システムエンジニアを目指す皆さんにとって、今後の技術動向を理解する上で重要な情報だ。

まず、Figmaについて簡単に説明する。Figmaは、Webサイトやモバイルアプリケーションのユーザーインターフェース（UI）やユーザーエクスペリエンス（UX）を設計するための、クラウドベースのデザインツールだ。デザイナーはFigmaを使って、画面のレイアウト、ボタンやメニューの配置、色の指定、フォントの選択などを行い、ユーザーがどのようにアプリを操作するかを視覚的に表現するプロトタイプを作成する。このプロトタイプは、動的な操作をシミュレーションできるため、実際にコードを書く前に使い勝手を検証し、改善点を早期に発見するために不可欠な存在となっている。

しかし、これまでのデザインプロセスには一つの課題があった。デザイナーがFigmaで作成したデザインは、最終的にはシステムエンジニアがプログラミング言語を用いて実際のコードに変換する必要がある。この「デザインからコードへの変換」の過程で、デザインの意図が十分に伝わらなかったり、手作業によるコーディングに多くの時間と労力がかかったりすることが少なくなかった。AIとの連携は、このデザインと開発の間のギャップを埋め、デザインの意図をより正確にコードに反映させ、開発プロセス全体の効率を大幅に向上させることを目的としている。

今回の更新の中心は「Model Context Protocol（MCP）サーバー」の拡張だ。MCPサーバーは、例えるならFigmaで作成されたデザインの「中身」をAIモデルが理解し、操作できるようにする「橋渡し役」のような機能を持つ。これまでAIは、Figmaのデザインを単なる画像として認識したり、テキスト情報を読み取ったりすることはできたが、デザインの背後にある構造的な情報、つまり「なぜそのボタンがそこにあるのか」「このコンポーネントはどのような機能を持つのか」といった、より深い意味合いを直接理解することは難しかった。MCPサーバーが拡張されたことで、AIモデルはFigmaのデザインデータだけでなく、そのプロトタイプやデザインを構成する「裏側のコード」にも直接アクセスできるようになる。

ここでいう「裏側のコード」とは、Webページの構造を記述するHTMLや、見た目を装飾するCSSといったマークアップ言語やスタイル指定、あるいはボタンをクリックしたときの動作などを記述するJavaScriptのようなスクリプト言語、さらにはアプリケーションの各部品（コンポーネント）の定義情報などを指す。Figmaのプロトタイプは、単なる静的な画像ではなく、内部的にはこれらの要素に対応する構造や属性を持っている。AIがMCPサーバーを通じてこの情報に直接触れることで、デザインがどのように構成されているか、どのような機能を持つべきかといった本質的な部分を、より深く、正確に把握できるようになるのだ。

この直接アクセスが可能になったことで、AIモデルはこれまで人間に頼っていた多くの作業を自動化できるようになる。例えば、FigmaのデザインからHTMLやCSS、JavaScriptなどのコードを自動的に生成することが可能になる。これにより、デザイナーが作ったUIデザインが、ほぼ瞬時に動作するWebページやアプリケーションの骨格へと変換される。また、AIは既存のコードとFigmaのデザインを比較し、デザインシステムとの整合性を自動的にチェックしたり、アクセシビリティガイドラインに準拠しているかを分析し、修正案を提案したりすることもできる。さらに、アプリケーションの特定の機能に対するテストコードをFigmaのデザイン情報に基づいて自動生成するといった、開発の品質向上に寄与する機能も期待される。

システムエンジニアにとって、この変化は業務内容に大きな変革をもたらすだろう。単純なコードの書き起こしや、デザインの仕様に合わせて手動で調整するといった反復的な作業はAIに任せられるようになる可能性が高い。これにより、エンジニアはより高度なアーキテクチャ設計、複雑なビジネスロジックの実装、パフォーマンスチューニング、セキュリティ対策といった、人間ならではの深い思考と専門知識を必要とする領域に、より多くの時間と労力を注げるようになる。また、AIが生成したコードの品質を評価し、必要に応じて修正や改善を行う「レビュー」のスキルも、ますます重要性を増すだろう。AIを効果的に活用するためには、AIに対して適切な指示（プロンプト）を与える能力も求められるようになる。

FigmaとAIの連携強化は、デザインと開発の間の障壁を取り払い、ソフトウェア開発プロセス全体の効率と品質を劇的に向上させる可能性を秘めている。システムエンジニアを目指す皆さんは、将来的にAIと協働することが当たり前になる開発環境を意識し、AIを活用するための新しいスキルセットを身につけていくことが求められる。デザインの意図をAIが深く理解し、コードへと自動変換する未来は、開発者がより創造的な仕事に集中できる、新しい時代の幕開けを告げていると言えるだろう。