1. AIで作ったデータをFigmaに反映しよう｜実践する3つのこと

キャンバスとコードを行き来する、を体で覚える

動画の冒頭で、すでにFigmaに反映された状態のファイルが映ります。バリアンツも揃っていて、色のVariablesも入っている。なのに「ここまで一切Figmaを触っていない」と話している。全部AIが処理した結果が並んでいるわけです。

精度は7割くらいで、アイコン周りとかにちょっとずれは出るけど、UIの骨格はちゃんと揃う。

この光景を見ると、「こういうのもうAIでできるんだ」が頭で理解するより先に体に入ってくる。そしてちまちまFigmaで一個ずつ登録する作業に、自分が時間を使う意味を考え直すことになります。

このクエストでやる3つの実践

3つに分けて進めます。

1. 画面をFigmaに持ち込む

ローカルで動いている開発環境のページを、そのままFigmaのデータに変換します。Figma MCPという仕組みを使うと、画像じゃなく編集できるデザインデータとして入ってきます。

2. VariablesをFigmaに登録する

前回作ったトークンのJSONを、Figmaにバーンと一括インポートします。色も余白もサイズも、全部Figmaの変数として読み込まれます。

3. コンポーネントをFigmaに登録する

Figmaのキャンバス上で動くAIに、構造通りに作ってもらってバリアンツまで設定します。プロンプトを投げて確認するだけ。

3つに共通しているのは、人間の作業がほぼゼロという点です。

MCPはAIをツールに繋ぐ仕組み

ここで何度か出てくる「MCP」という言葉、聞き慣れないと「マーベル・シネマティック・ユニバース？」みたいになるけど、簡単に言うとAIをFigmaなど他のツールに繋ぐ仕組みの総称です。USBみたいなものと思っておけば十分。

このシリーズではFigma MCPを使います。導入してClaude CodeやCursorに指示すれば、あとはAIがFigma操作までやってくれる。難しい設定は出てこないので構えなくて大丈夫です。

なぜキャンバスとコードを行き来する必要があるのか

ちまちまFigmaで登録する作業、正直やってる人多いと思うんですよね。それ自体は否定しないけど、ユーザーにとっての価値には繋がっていない作業です。ボタンの整理をきれいにしたところで、ユーザーは「新しい価値くれよ」と思っているわけで。

一方で、整理されたシステムをこういう定義で分類しよう、と決まっているものはAIが得意な領域です。型化されたもの＝ロジックがあるものは、AIに指示しやすい。だから一回キャンバスとコードを行き来できる体験を踏んでおくと、「ここはAIに任せる、ここは自分でやる」の判断ができるようになる。

このクエストで得られる視点

このクエストを終えると、Figmaに反映されたデザインを 自分でFigma作業する時にそのまま再利用 できるようになります。AIにも「この定義のルールで新しい画面を作って」と頼める。一度作ったデザインシステムを何度も使い回せる、という未来が見えるはずです。

ちまちま登録する作業から解放されて、もっと価値のあるところに時間を使う。これがこのクエストの一番大きい意味です。

次回予告

次は実際に手を動かしていきます。3つの最初、URLで表示している画面をFigmaに取り込むところから。Figma MCPの導入から実演まで一気に進めていきます。