# UIUX EngineerがFigma Makeを使って感じた、AI時代のフロントエンド開発

最近、AIの進化を実感しながら開発に携わる日々でありますが

個人開発でUIをFigma Makeで作成して思ったのが

「AIでここまでUIを作れるのか」

という驚きでした。

今回は、実際にFigma Makeを使って感じたことと、AIによってUIUX × フロントエンド開発が今後どのように変わりそうかを書きたいと思います

Figma Makeとは？

Figma Makeは、プロンプトからUIを生成できるFigmaのAI機能です。

自然言語で「こんな画面を作りたい」と指示すると、AIがその内容をもとにUIを作ってくれます。

例えば、

* ログイン画面
* ダッシュボード
* 管理画面
* 一覧画面
* 詳細画面

といったUIのたたき台を、プロンプトから作ることができます。

そして、個人的に一番驚いたのが、

デザインを作るだけではなく、実際に動くUIまで生成できることです。

コードとしては、扱えるため、単なるデザイン案ではなく、その後のフロントエンド開発につなげることができます。

これまでのUI開発

これまでWebアプリケーションのUIを作る場合、ざっくり次のような流れでした。

要件を考える
    ↓
Figmaなどでデザインを作る
    ↓
デザインを確認する
    ↓
Reactで実装する
    ↓
調整後、リリース

もちろん実際の開発ではもっと複雑ですが、

「デザイン」と「実装」は別の工程

として扱われることが多かったと思います。

フロントエンジニアは、デザインを見ながら

「この余白は何pxだろう？」
「このコンポーネントはどう分割しよう？」
「このレイアウトをCSSでどう表現しよう？」

と考えながらReactで実装していきます。

Figma Makeを使うとどうなる？

Figma Makeを使ってみて、この流れが少し変わるかもしれないと感じました。

作りたいものを考える
    ↓
Figma Makeに指示を出してUIを作成する
    ↓
実際に動かして確認する
    ↓
調整後、リリース

つまり、

「デザインを作ってから実装する」

という境界が、少しずつ曖昧になってきています。

プロンプトを入力して、

「もう少しシンプルにして」
「サイドバーを追加して」
「カード形式に変更して」

と指示しながらUIを作り、そのまま動く画面として確認できます。

これはかなり便利でした。

以前、自分は受託開発でUIUXデザイン兼エンジニアをしていたことがあり、

デザインをfigmaで１から作成して顧客に確認し、諸々調整してデザインが確定して

実装して、デモを確認後に デザインが気に入らないのでやり直したい

などあるあるではありましたが

この機能があれば、 画面デザインと実際の画面の挙動のずれを防ぐことができる

また、実装とデザイン両方の時間が短縮されて開発工数を削減することができることができます

では、フロントエンドエンジニアはいらなくなる？

Figma Makeを使うと、かなり完成度の高いUIを短時間で作ることができます。

ただ、実際のプロダクト開発を考えると、

生成されたコードをそのまま使えば完成、というわけではありません。

例えば、

• コンポーネントをどう分割するか
• Stateをどこで管理するか
• APIとどう接続するか
• TypeScriptの型をどう設計するか
• エラーをどう扱うか
• ローディングをどう扱うか
• 共通コンポーネントをどう設計するか
• テストをどう書くか
• アクセシビリティをどう担保するか

など、実際の開発では考えることがたくさんあります。

まだ、Figma Makeが生成したコードは、ここまでのクオリティには及んでいないですが、非常に優秀な「スタート地点」と考えるのがよさそうです。

「作る」より「設計する」が重要になる

Figma Makeを使っていて特に感じたのが、

フロントエンドエンジニアの仕事が「コードを書くこと」から、少しずつ「どう作るかを決めること」に変わっていくのではないか

ということです。

これまでは、

人間
 ↓
設計
 ↓
実装
 ↓
コード

だったものが、

人間
 ↓
要件・設計
 ↓
AI
 ↓
コード
 ↓
人間がレビュー・改善

という流れになっていくかもしれません。

AIがコードを書けるようになるほど、

「要件を実現するには、どのような構成にする？」

「何のライブラリをどのように使ってAPI通信する？」

「コンポーネント、CSS設計は？」

「保守性、正確性、セキュリティは担保できている？」

といった設計の判断が、より一層重要になりそうです。

AIを使ってフロントエンド開発をしていく

Figma Makeを使ってみて、

「AIに仕事を奪われる」

というより、

「AIを開発フローのどこに入れるかを考える段階に来ている」

UIに関しても、ゼロからすべて手で作るのではなく、

AIに作ってもらい、人間がプロダクトとして使える形に仕上げる。

これからは、そんな開発が当たり前になっていくのかもしれません。

まとめ

Figma Makeを使ってみて、一番印象に残ったのは、

デザインと実装の距離がかなり近くなったこと

でした。

プロンプトからUIを作り、そのまま動かして確認できる。

さらに、そのコードをベースにReactの開発へ進むこともできます。

一方で、実際のプロダクトでは設計や状態管理、API、テストなど、エンジニアが考える部分はまだたくさんあります。

むしろAIが実装をしてくれるようになることで、

「コードを書く力」だけではなく、「どう作るかを考える力」がより重要になるのではないか

と感じています。