オリジナル特集オリジナル特集

AIが変えるデザインシステム構築：Figmaの新しいアプローチ

AIが変えるデザインシステム構築の現在地

Figmaはここ数年で「デザインツール」から「デザインシステム基盤」へと進化してきました。その流れをさらに加速させているのが、生成AIをはじめとするAI機能の組み込みです。これまでデザインシステムは、人手でコンポーネントを作り、命名し、ドキュメントを書き、運用し続ける“手作業の塊”でした。AIの導入によって、こうしたプロセスの多くが自動化・半自動化され、デザイナーは「ルールづくり」と「意思決定」に集中できるようになりつつあります。

特にFigmaは、コンポーネントやトークン、テキスト、プロトタイプといった複数レイヤーの情報を一元的に扱えるため、AIが介入しやすい条件が揃っています。画面構造のパターンを機械学習で把握し、最適なコンポーネント候補を提示したり、既存のデザインからデザインシステムの構造を逆算して提案したりといったアプローチが徐々に実用段階に入っています。AIは新しい「デザインアシスタント」であるだけでなく、「デザインシステムの設計者」としても機能し始めているのです。

Figmaの新しいアプローチ：AIによるコンポーネント提案と自動整理

AI活用の中でも特にインパクトが大きいのが、コンポーネントの自動抽出・提案・整理というアプローチです。従来は、デザイナーが画面を眺めながら重複していそうな要素を見つけ出し、「ボタン」「カード」「ナビゲーション」などのコンポーネントに手作業でまとめていました。これには時間がかかるうえ、担当者の経験や観察力によって品質が大きく変わります。

AIベースの新しいFigmaの使い方では、まず既存の大量のフレームやページをAIが解析し、類似している要素のクラスターを自動的に抽出します。色・サイズ・タイポグラフィ・オートレイアウト構造・階層構造といった複数の特徴を同時に見て、「これは同じボタンパターンとして統合できる」「このカードはバリエーションとして整理できる」といった候補を提示します。デザイナーはそれを承認・修正していくだけで、大規模なUIライブラリを短時間で「コンポーネント化」できるようになります。

さらにAIは、コンポーネントの命名や階層構造の提案にも関与できます。利用頻度や組み合わせパターンを学習し、「Button / Primary / Default」「Button / Primary / Destructive」といった命名パターンを自動生成したり、「このコンポーネントはフォーム系のグループに属する可能性が高い」などのグルーピングを提案したりします。これにより、これまで属人的だったライブラリ構造が、より一貫したルールに基づいて構築されるようになります。

もう一つ重要なのは、継続的な自動整理です。プロジェクトが進むにつれ、似て非なるコンポーネントや不要になったスタイルが増え、デザインシステムはすぐに肥大化します。Figma上でAIが定期的にライブラリをスキャンし、「重複している可能性のあるコンポーネント」「使用頻度が極端に低いスタイル」「トークンの命名ルールから外れている要素」を検出して警告を出せるようになると、システムの健全性を保つコストが大幅に下がります。人が“掃除”に割いていた時間が減り、より本質的な改善に注力できるようになるのです。

デザインプロセスの変化：人が決め、AIが広げる

こうしたAIの導入によって、デザインシステム構築のプロセスも変化します。以前は「コンポーネントを作る → 使う → 改善する」という循環を人がすべて回していましたが、今後は「ルールを決める → AIが大量の候補を生成・整理する → 人が評価し、ルールを更新する」という役割分担が中心になります。

たとえば、デザイナーがまず「ブランドとして許容できる色の組み合わせ」「アクセシビリティ上必要なコントラスト」「ボタンのサイズの上限・下限」といったルールだけを定義するとします。そこから先はAIが、状況に合わせたバリエーションを大量に生成し、Figma上にコンポーネント候補として並べてくれます。デザイナーはそれらを見比べ、「ブランドらしさ」「使いやすさ」「開発コスト」などを基準にして取捨選択し、その結果を再びAIの学習対象にフィードバックしていく――という形です。

このプロセスでは、人の仕事は「最初の一手」と「最終判断」に集約されます。AIはあくまでルールに従ってパターンを広げ、既存の資産を整理し続ける存在です。デザイナーは、ブランドのストーリーやユーザーの文脈を理解したうえで「どのパターンを残すか」「何を禁止するか」を決めていきます。結果として、デザインシステムは単なるコンポーネントの集合ではなく、「組織の意思決定がコード化された知識体系」としてより明確な形を持つようになります。

この変化は、チームのスキル構成にも影響します。ミクロなレイアウト調整に長けた個人よりも、「ルール設計」「情報構造」「コンポーネント戦略」に強いデザイナーの重要性が増します。また、エンジニアとの協働も変わり、Figmaで定義されたトークンやコンポーネント構造を、そのままコード側のデザインシステム（StorybookやUIフレームワーク）に反映させる橋渡し役として、AIを挟んだ新しいワークフローが検討されるようになるでしょう。

これからのデザインシステム運用とデザイナーの役割

AIを前提としたFigmaの新しいアプローチは、デザインシステムの「作り方」だけでなく「運用のあり方」も変えます。これまでは年に数回、大規模な見直しとライブラリ整理を行うような運用だったものが、AIによる常時モニタリングと軽微な修正の積み重ねに置き換わっていきます。デザインシステムは「リリースされた製品」ではなく、「常に学習し続けるサービス」に近い存在になります。

このとき鍵になるのは、AIの提案を鵜呑みにせず「判断の基準を明文化する」ことです。どのコンポーネントを標準とし、どこまでバリエーションを許すのか。どのメトリクス（利用率、アクセシビリティ、実装コスト、ブランド適合度）を重視するのか。こうした基準が言語化されて初めて、AIの提案の良し悪しを評価できます。結果として、ガイドラインやデザイン原則のドキュメントは、これまで以上に重要なアセットになります。

デザイナーの役割も、「すべてを自分の手で作る人」から「AIを含むチーム全体のアウトプットをディレクションする人」へと変わります。Figma上でAIと対話しながら、「このパターンはブランドの世界観に合うのか」「アクセシビリティを犠牲にしていないか」「開発チームが現実的に運用できるか」といった観点で意思決定を行うことが主な仕事になります。言い換えれば、デザインスキルと同じくらい、「問いを立てる力」と「判断軸を設計する力」が求められるようになるのです。

AIがデザインシステム構築を支援することで、コンポーネントの量産や整理といった“作業”の負荷は確実に低減します。その一方で、「何を良しとするか」を決める責任は、これまで以上にデザイナーとチームに重くのしかかります。Figmaの新しいアプローチは、単に効率を上げる仕組みではなく、デザイン組織に問いを突きつける変化でもあります。AIを道具として使いこなしつつ、自分たちの基準を磨き続けることこそが、これからのデザインシステム構築の競争力になるでしょう。