UXデザイナーの現場検証2｜Claude MCPでFigmaをAI操作して分かった実務での限界と可能性

今回の検証は、単にビジュアルを作るだけでなく、プロダクト全体の構造を俯瞰して設計・検証できる以下のスキルセットを持ったデザイナー目線で実施されました。

• UX設計能力
• UIデザインおよびデザインコンポーネント設計・構築の専門知識
• HTML / CSS基礎知識
• Gitによるソース管理およびバージョン管理の理解
• 大規模システム開発プロジェクトへの参画経験

プログラマーの視点だけではなく、大規模システムに耐えうる「デザインシステムの整合性」と「運用のしやすさ」を担保できる立場で検証を行っています。

今回の検証では、サードパーティの独立したAIツールを使用するのではなく、デザインの現場で直接AIにFigmaファイルを操作させるシステム環境を構築しました。

具体的には、Figmaのファイル情報をAPI経由で直接読み書きできる環境を整え、ClaudeのMCP（Model Context Protocol）を活用して、対話型でデザインアセットの編集やリサーチを行う手法を採用しています。

基本となる操作手順は以下の通り、非常にシンプルです。

• ターミナル（コマンドライン）を開く
• claude と入力して対話環境を起動する
• 対象ファイル（iConファイル等）のIDを指定し、テキストで具体的な編集・調査の指示を出す
• AIがファイル構造を自動で把握し、必要なAPIを発行して処理を代行する

全体的なファイル構造の把握において、AIは自動で各レイヤーのキャプチャや構造ノードを取得しながら理解を進めてくれるため、人間がファイルの全容を一から説明する手間を大幅に削減できます。

今回の検証を通じて最も強く感じたのは、AIを活用して自動化できる領域は劇的に広がっているものの、最終的な調整や確認、そして人間の感性に訴えかけるUXの検討は完全に人間の役割として残るということです。

AI（Claude MCPなど）は、指示されたルールに従って何百個ものオブジェクトのプロパティ（type=outlineへの変更など）を一瞬で、かつ正確に変える処理は非常に得意です。

しかし、「Figmaのファイル構造を誰が見てもわかりやすいように美しく整列させる」といった、自由度が高く感覚的な美しさが求められる整理整頓を指示する場合、デザインシステム全体のコンテクスト（文脈）を考慮した詳細なプロンプトをいちいち作り込む必要があります。さらに、安全性の観点からAIによる書き込み許可を毎回手動で承認せねばならず、結果として「人間の手作業で余白の調整、不要ファイルの削除を行ったほうが圧倒的に早い」という現象が発生しました。

また、ツール側の機能制限（APIのサポート対象外領域）によって、Figmaの「コメント機能」を介したチーム間コミュニケーションなどはAI側からアクセスできず、完全に手動での運用が必要となる制限も見えてきました。画面を機械的に構築・変更することはできても、「それを誰が、どういう文脈で、どのように使うのか」を定義するUX設計と、成果物に対する泥臭い手動の最終調整こそが、プロダクトの品質を左右する最大の鍵となります。

以下は、実際にClaude MCP環境からFigmaの大規模アイコンファイルを操作した際の実績値と、詳細な作業ログの記録です。

対象ファイル

iCon

• ファイルの整理

  指示内容

  ・バリアントとして作成してあるファイルの左に名称のテキストを入れたいです。
  一部名称が作られていないバリアントがあるので、同様に作成したいです。
  例えば「check-round」という名前のバリアントの場合、以下のようにテキストを作成してください。
  Check-round
  →フォントはBody - 16px 16/120を適用
  icon-check-round
  →フォントはCaption - 12px 12/120を適用
  
  上記の2つのテキストは7pxの間隔を開けて上下に配置してください。左揃えで。

  結果

  5つの未ラベルバリアントすべてにテキストラベルを作成

  バリアント	表示名（16px）	アイコン名（12px）
  Check-round	Check-round	icon-check-round
  Circle	Circle	icon-circle
  Checkbox-indeterminate	Checkbox-indeterminate	icon-checkbox-indeterminate
  Checkbox	Checkbox	icon-checkbox
  Radio	Radio	icon-radio

  
• コンポーネントプロパティ名・値の修正

  指示内容

   ・各バリアント内のプロパティ値が「プロパティ1」デフォルトとなっているものについて、プロパティ名「type」値を「outline」になるように修正してください。
  ・Figma内のコメントを全て削除してください。
  ・何かiconとして不具合がありそうなレイヤーやファイルがあれば教えてください。

  結果

  全185個のCOMPONENT_SETをスキャンし、18個で「プロパティ1」プロパティを確認。以下の手順で修正を完遂。
  ① バリアントCOMPONENTのname「プロパティ1=デフォルト」→「プロパティ1=outline」にリネーム
  ② editComponentProperty() で プロパティキー「プロパティ1」→「type」にリネーム（自動的にCOMPONENT名も「type=outline」に更新）
  修正対象アイコン（18件）:
  Instagram、Twitter、Facebook、Line、YouTube、Horizontal dots、Plus、Minus、CrossUse、Load、VerticalDots、RssSymbol、WalkingFilled、LinkOutline、point-coin-chenge、sure-icon-securities-loan-outline、Refresh、Logout

• コメントの削除（API制限の検証）

  指示内容

  Figmaファイル内のコメントをすべて自動削除してください。

  結果

  Figma Plugin API はコメントへのアクセスをサポートしていないため、ツールからの自動削除は不可。代替策として、デザイナーが手動で一括削除するための以下の運用オペレーションをAIより案内・実施。
  ・Figmaで Shift + C → コメントパネルを開く → 各コメントを右クリック→「削除」
  ・またはコメントをクリックして選択 → Delete キー

  
• 不具合レイヤー・ファイルの調査（ダブルチェック機能）

  指示内容

   アイコンとして不具合がありそうなレイヤーやファイルを自動抽出して報告してください。

  結果

  ① 空の type=filled バリアント（6件）
  以下のアイコンに「filled」バリアントが存在するが、内部に視覚要素（ベクターオブジェクト）がない未実装状態のバグを特定。

  アイコン名	空バリアントID
  Order history	342:3555
  Trade history	354:4045
  Deposit and Withdrawal History	356:3564
  Incoming and outgoing History	356:3615
  Staking	350:3754
  AIChat	425:4969

  ② サイズ不正（検出後、自動修正済み）
  Search（95:126）: 本来の規格から外れた「182×112」になっていたため、AI側で「184×112」に即時修正。
  ③ その他の確認推奨事項
  ・Logout（1:1378）: 単独COMPONENTとして存在。他と統一するためCOMPONENT_SETへの変更を推奨。
  ・SNSアイコン群: 外部製アイコンのため、デザインシステムの統一ガイドライン策定を推奨。

• Vectorレイヤーの分割・命名調査

  指示内容

  ①Vectorが2つのレイヤーに分かれているバリアントを一覧化する
  ②Vectorレイヤーの名前が「Vector」になっていないものを一覧化する。

  結果

  ① Vector 2分割バリアント（5件）

  アイコン名	バリアント	レイヤー構成
  Chevron down	type=filled	[VECTOR] "Vector" × 2
  check-round	type=filled	[VECTOR] "Vector" × 2
  Checkbox	type=outline	[VECTOR] "Vector" × 2
  Home	type=filled	[VECTOR] "Fill 1" + [VECTOR] "Fill 3"
  Check	type=fill	[RECTANGLE] "Rectangle 16" + [VECTOR] "Vector"

  ② 「Vector」以外の名前のレイヤー（主なもの）

  「Union」という名前になっていたレイヤー（29アイコン、計55件）は、AIが一括修正を完了。修正前に確認された特殊な命名は以下の通り。

  アイコン名	バリアント	レイヤー名（修正前）
  You Tube	type=outline	icon-sns-youtube
  Home	type=outline	icon-home-outline
  Home	type=filled	Fill 1 / Fill 3
  List	outline / filled	vector（小文字）
  Refresh	type=outline	icon
  Check	type=fill	Rectangle 16
  Settings	type=filled	Union（BOOLEAN_OPERATIONタイプ）
  sure-icon-securities-loan-outline	type=outline	Union（BOOLEAN_OPERATIONタイプ）

• 「Union」レイヤーの一括リネーム

  指示内容

  レイヤー名が「Union」となっているパス・レイヤーをすべて「Vector」に変更する。

  結果

  全ページ・全COMPONENT_SET内のバリアントを再帰的にスキャン。
  名前が「Union」のシェイプレイヤー（VECTOR / BOOLEAN_OPERATIONタイプ）を補足し、すべて「Vector」に一括リネームを適用. （修正総件数: 55件）

大規模プロジェクトの現場において、ClaudeのMCP（Model Context Protocol）環境から直接Figmaファイルを操作・検証してみた結果、AIの「圧倒的な強み」と「実務における明確な限界」が見えてきました。

• プロパティ修正などの定型作業は「高速かつ正確」

  コンポーネントのプロパティ値やレイヤー名の一括変更といった定型的な作業は、人間の手作業よりも圧倒的に速く、正確に処理することができました。

  また、修正漏れや単純ミスが発生しにくい点も大きなメリットです。

• 「見た目の整理整頓」は手作業のほうが早い場面もある

  一方で、Figmaのファイル構造を綺麗に整理したり、不要なレイヤーの削除、細かな余白調整など「見た目の美しさ」を整える作業については、AIへかなり細かい指示を出す必要がありました。

  また、AIが編集処理を行うたびに手動で実行許可（承認）が必要になるため、細かな調整作業では逆に時間がかかってしまうケースもあります。

  結果として、こうした整理整頓系の作業は、人間が感覚的に手作業で行ったほうが早い場面も多くありました。

• APIの権限制限による技術的な制約もある

  Figmaのコメント機能については、MCP経由ではアクセス権限の対象外となっているため、AIによるコメント取得や削除、自動整理などは行うことができませんでした。

  そのため、一部の運用については従来通り手動対応が必要になります。

• 「不具合検知」や「ダブルチェック」用途では非常に優秀

  AIに対して「不具合がありそうな箇所を教えて」「他のコンポーネントとルールが異なるものを列挙して」といった抽象的な指示を出すだけでも、気になるポイントを論理的に洗い出してくれます。

  人間が見落としやすい命名ルールのズレや設定ミスを短時間で発見できるため、デザインレビューやダブルチェック用途としては非常に実用的だと感じました。

• 自動キャプチャによるスムーズな構造把握

  事前に細かな説明をしなくても、AIが自動的にFigmaファイルのキャプチャ（視覚情報）を取得しながら、レイアウトや階層構造を把握して進めてくれるため、作業開始までが非常にスムーズでした。

  特に大規模ファイルでは、全体構造を短時間で理解してくれる点が大きなメリットだと感じました。

今回の検証を通じて、AIは特定のルーティン作業やエラー検知において、非常に強力なパートナーになることを実感しました。

特に、データの整合性チェックやダブルチェックなど、機械的に繰り返される作業については、AIを活用することで作業時間を大幅に削減できます。

一方で、最終的なビジュアルの調整や細かなチューニング, システム制約を踏まえた設計判断、そして「このデザインや運用フローが本当に使いやすいのか」を客観的に評価するUX（ユーザー体験）の視点は、依然として人間が担う重要な役割だと感じました。

また、AIは非常に便利なツールですが、1回の指示だけで理想的な結果にたどり着けるケースは多くありません。複雑な仕様や環境依存の問題については、何度も検証や修正を繰り返しながら調整していく必要があります。

だからこそ重要なのは、AIの利便性と限界を正しく理解し、適切に使い分けることです。

人間は単純作業から解放される一方で、より上流の情報設計やUX設計、正式には本質的なユーザー体験の改善に集中していく必要があります。

AIを活用する時代だからこそ、「何を作るべきか」「誰のために作るのか」を考える力が、これまで以上に重要になっていくのではないでしょうか。