Figma MakeでSNSアプリ(プロトタイプ)を自動生成してみた

• Figma Makeの使い方がわからない…
• Figma MakeでSNSアプリを自動生成するにはどうすればいい？
• Figma MakeでSNSアプリ(プロトタイプ)を自動生成してみた結果が知りたい

このような疑問や興味をお持ちの方におすすめの記事です。

この記事を書いているぼくはPCでいろいろ試すことが大好きな32歳です。PCでいろいろ試してたら、YouTubeチャンネル登録者が1,700人になったり、ブログで毎月小銭を稼げたり、電子書籍を3冊出版してチャリンチャリン小銭が入ってくるようになったりして、ちょっと人生が好転しています。

今回は、「Figma MakeでSNSアプリ(プロトタイプ)を自動生成してみた」という記事です。

Figma Makeというのは、Figma(フィグマ)というデザインツールの中にある「プロンプトを入力するとAIがコーデを自動生成してサイトやアプリのデザインが作成できちゃう」という超すごいツールのことです。

それで今回は試しにこのFigma Make(フィグマメイク)を使ってみました！

Figma初心者のぼくでもすぐにFigma Makeを使ってSNSアプリを自動生成することができたので、びっくりです。

この記事を見ることで、

• Figma Makeの使い方がわかる
• Figma Makeの雰囲気がわかる

ようになります。

それでは前置きはここまで。

さっそくFigma MakeでSNSアプリ(プロトタイプ)を自動生成してみましょう。

あなたのデザインライフの一助になれば幸いです。

よろしくお願い申し上げます。

＞＞Figma(フィグマ)の無料プランアカウントの作成方法

Figma MakeでSNSアプリ(プロトタイプ)を自動生成してみた

それでは、Figma MakeでSNSアプリ(プロトタイプ)を自動生成するまでの手順をスクリーンショット付きで解説していきますね。

まずは、Figmaにログインして編集ページを開きましょう。

＞＞Figmaにログインする方はこちらから

Figmaの画面右上の「Make」をクリックしましょう。

そうすると、Figma Makeにプロンプトを入力する画面になります。

ぼくはFigam初心者なこともあって、まずは、自分の中の思いついた言葉を入力してみることにしてみました。

ぼくは今回、率直に「SNSアプリを作ってみたい！」と思っていました。なので、

X（Twitter）とYouTubeが合体したいSNSを作りたい。気軽にポストもできるし、ショート動画も投稿できるし、長尺動画も投稿できるSNSアプリ。

めっちゃ雑ですけど、近頃の生成AIは頭がとてもいいので、シンプルにそのままの普段の言葉で伝えても理解をしてくれます。

プロンプトを入力したら、右側の「矢印ボタン」をクリックしましょう。そうするとFigma Makeが自動生成を開始します。

左の方で、「推論」が始められて、Figma Makeが自動でコーディングを開始してくれます。

上の動画は、FigmaMakeでSNSアプリをAIコーディングしている映像です。（※動画編集で30倍速に設定しております。あとBGMも挿入しております。）

映像のとおりで、プロンプトを入力してから、推論を開始して、そこからAIが自動生成を開始していきます。

プロンプトや指示内容にもよると思いますが、ぼくはだいたい3分前後でこのSNSアプリのプロトタイプを作ることができました。

こんな感じで、Figma MakeでSNSアプリ(プロトタイプ)が自動生成されました。

すごいですよね。パッと見で「え、これ誰が作ったの？ひでおあなたなの！？すごい！」って自慢できちゃいますよね。

ただの飾りのボタンが配置されているわけではなく、「新規投稿」も可能です。すごい。

ポストも投稿出来て草

こんな文字を入力して投稿してみました。

「ポストも投稿できて草」という投稿もできました。

もちろんこれはプロトタイプ(仮の型)なので、僕の投稿は誰にも見られていませんし、影響はありません。そう考えると、Figma Makeで自分だけのメモ書きアプリとかもAIコーディングで生成できちゃいそうですよね。

ショート動画タブもクリック可能です。もちろん長尺動画タブも可能です。

まさかのショート動画も再生可能でした。ほかのページも同じ映像ですが。

Figma Makeで作成したアプリのコードも閲覧可能でした。すごい。

ぼくはプロゲートというプログラミング学習アプリでHTML&CSSをザックリ学びましたが、コードを触れたり理解されている方は、コードを自分で変更することも可能です。

そう考えると、「自分で0からアプリのデザインを作る手間が減る」ということが可能になりますよね。すごい。

ということで、以上となります。

まとめ：Figma Makeは触ってて楽しい

今回は、「Figma MakeでSNSアプリ(プロトタイプ)を自動生成してみた」という記事でした。

正直、Figma Makeすごいなと思いました。

もう令和時代のイマは、こうしてAIが自動でコーディングしてくれる時代なんですね。もちろん多少の細かい設定変更などは必要ですが。

ということで以上となります。

あなたのデザインライフの参考になったのであれば幸いです。

今後もFigmaを触ってみて、アウトプットしていこうと思います。

それではまた次の記事でお会いしましょう。

• 【あわせて読まれている記事】Figma(フィグマ)の無料プランアカウントの作成方法

[st-catgroup html_class=”” cat=”1154″ page=”5″ order=”desc” orderby=”rand” child=”on” slide=”off” slides_to_show=”3,3,2″ slide_date=”on” slide_more=”ReadMore” slide_center=”off” fullsize_type=””]