この記事でわかること
Figmaに「コードからデザインを生成する」機能があると知って、最初は少し不思議な感じがした。
デザインツールなのに、コードを入れたらデザインが出てくる。逆じゃないのか、と。
でも少し考えてみたら、Figmaが目指していることが見えてきた気がした。
FigmaはUIを「触らせない」ことを目指している
これまでのFigmaの使い方は、デザイナーが画面を見ながら手を動かすものだった。
でも最近のFigmaの動きを並べると、少し違う方向が見えてくる。
- Dev Mode — デザインの横にコードが表示される
- Variables — デザイントークンとCSSカスタムプロパティが対応する
- Code Connect — Figmaのコンポーネントとコードのコンポーネントをひもづける
- MCP連携 — AIエージェントがFigmaを直接操作できるAPI
全部つながっている。Figmaを人間が触らなくても動く仕組みにしようとしている。
コードからデザインは「逆行」じゃない
コードをFigmaに入れてデザインを作るのは、一見おかしく見える。でも実はこれ、長年の問題を解決しようとしている。
デザイナーとエンジニアの間には「ずれ」が常に発生する。Figmaで作ったデザインと、実装されたコードが微妙に違う、というやつだ。
Figmaが目指しているのは、デザインとコードを同じファイルで双方向に同期させること。コードが変わったらFigmaも追従する。Figmaが変わったらコードも追従する。
人間がどちらかを手動で合わせる作業をなくしたい、という発想だ。
今日の作業がそのまま答えだった
今日、Claude Codeと一緒にYouTube動画を作る作業をしていた。
イントロ動画の生成、画面録画とワイプの合成、YouTubeへのアップロード、記事化、Figmaへの書き出し。一通りやったのだが、振り返ってみると、自分がやったのは「言葉で意図を伝えること」だけだった。
「HTMLコーディング初心者向けで」
「自撮りの音だけ使って」
「アップして」
「記事にして」
「FigmaにBで」
どのツールも直接触っていない。意図を伝えたらAIが動いた。
これがすでに起きていることだ。
乗り遅れないためにどうするか
ここで「じゃあツールを勉強しなくていいのか」という話になりそうだが、そうではないと思っている。
ツールの操作を覚える必要性は下がる。でも「何を作りたいか」を言語化する力の価値は上がる。
AIに指示を出すためには、自分が何を作りたいのかを明確に言える必要がある。それができない人は、AIに何を頼んでいいかわからないまま止まる。
プログラミングやデザインの「考え方」を知っていることは、ツールを操作するよりずっと大事になってくる。HTMLの構造がどうなっているかを理解していれば、AIへの指示も具体的になる。
Figmaは「意図を置く場所」として残ろうとしている
AIが進化したとき、「Figmaで作る」と「コードで書く」の区別は薄れていく。
残るのは「UIをこうしたい」という意図だけだ。
Figmaはその意図を置く場所として生き残ろうとしているのかもしれない。人間が操作するツールというよりも、AIと人間と開発が集まるUIの共通言語として。
そう考えると、コードからデザインを作る機能も、AIエージェントがAPIで操作できる仕組みも、全部同じ方向を向いている。
乗り遅れないためには、ツールを使いこなすことより、この流れを理解した上で自分の意図を言語化し続けることが大事だと思う。