AIでUIスタイリング入門
0%
1
AIでUI作成してデザインスキルは上がるのか？2
AIでUIスタイリングを生成する3
AIでスタイリングを分析する4
Figma MCPでデザインシステムの土台を作るAIでUIスタイリング入門
動画の冒頭で、すでにFigmaに反映された状態のファイルが映ります。バリアンツも揃っていて、色のVariablesも入っている。なのに「ここまで一切Figmaを触っていない」と話している。全部AIが処理した結果が並んでいるわけです。
精度は7割くらいで、アイコン周りとかにちょっとずれは出るけど、UIの骨格はちゃんと揃う。
この光景を見ると、「こういうのもうAIでできるんだ」が頭で理解するより先に体に入ってくる。そしてちまちまFigmaで一個ずつ登録する作業に、自分が時間を使う意味を考え直すことになります。
3つに分けて進めます。
ローカルで動いている開発環境のページを、そのままFigmaのデータに変換します。Figma MCPという仕組みを使うと、画像じゃなく編集できるデザインデータとして入ってきます。
前回作ったトークンのJSONを、Figmaにバーンと一括インポートします。色も余白もサイズも、全部Figmaの変数として読み込まれます。
Figmaのキャンバス上で動くAIに、構造通りに作ってもらってバリアンツまで設定します。プロンプトを投げて確認するだけ。
3つに共通しているのは、人間の作業がほぼゼロという点です。
ここで何度か出てくる「MCP」という言葉、聞き慣れないと「マーベル・シネマティック・ユニバース？」みたいになるけど、簡単に言うとAIをFigmaなど他のツールに繋ぐ仕組みの総称です。USBみたいなものと思っておけば十分。
このシリーズではFigma MCPを使います。導入してClaude CodeやCursorに指示すれば、あとはAIがFigma操作までやってくれる。難しい設定は出てこないので構えなくて大丈夫です。
ちまちまFigmaで登録する作業、正直やってる人多いと思うんですよね。それ自体は否定しないけど、ユーザーにとっての価値には繋がっていない作業です。ボタンの整理をきれいにしたところで、ユーザーは「新しい価値くれよ」と思っているわけで。
一方で、整理されたシステムをこういう定義で分類しよう、と決まっているものはAIが得意な領域です。型化されたもの＝ロジックがあるものは、AIに指示しやすい。だから一回キャンバスとコードを行き来できる体験を踏んでおくと、「ここはAIに任せる、ここは自分でやる」の判断ができるようになる。
このクエストを終えると、Figmaに反映されたデザインを 自分でFigma作業する時にそのまま再利用 できるようになります。AIにも「この定義のルールで新しい画面を作って」と頼める。一度作ったデザインシステムを何度も使い回せる、という未来が見えるはずです。
ちまちま登録する作業から解放されて、もっと価値のあるところに時間を使う。これがこのクエストの一番大きい意味です。
次は実際に手を動かしていきます。3つの最初、URLで表示している画面をFigmaに取り込むところから。Figma MCPの導入から実演まで一気に進めていきます。