【随時更新】Figma AIでできること・活用事例12選をまとめて紹介！

2024年6月30日

Figma AIって何ができるの？

弊社ではAI導入支援を行っていますが、そのような声をよくいただきます。

本記事では、Figma AIでできることや活用事例についてわかりやすくまとめて紹介していますので、ぜひ最後までご覧ください。

執筆者：山口鳳汰
ノーコード・AI開発会社「Walkers」のCMO。
AIサービス「Prompt Lab」運営。
その他、受託開発や教育など多数のAI事業に参画している。

運営会社：株式会社Walkers
ノーコード・AI専門の開発会社。
300件以上の開発/制作実績、200件以上の企業様を支援。
マーケティングやUI/UXと掛け合わせたサービス開発を得意としている。

執筆者：山口鳳汰
ノーコード・AI開発会社「Walkers」のCMO。
AIサービス「Prompt Lab」運営。

運営会社：株式会社Walkers
ノーコード・AI専門の開発会社。
これまでに300件以上の開発/制作実績、200件以上の企業様を支援。

クリックできる目次

Figma AIでできること・活用事例12選

【事例①】1行の文章でUI制作

ついにFigmaではテキストからUIデザインを制作できるようになりました。まさに革命的な機能です。

【事例②】雑務の自動化

Figma内の雑務もAIによって自動化できるようになりました。Figmaユーザーからすると本当にありがたい機能です。

【事例③】ワンクリックでプロトタイプ開発

“ワンクリック”でできるため、ミーティング中にも活用できそうです。そのため、会議のスピードが早くなり予想以上の効率化が期待できます。

【事例④】ワイヤーフレームの制作

デザインまでいかずともサイトの全体像を考えたい時には、ワイヤーフレームだけの出力が可能です。段階に合わせて調整できるのも非常によいところです。

アプリ内のデータベースやワークフローを試すのに、適当でいいからUIデザインやサイトの全体像をイメージしたいと思ったら、figmaのプラグインで便利なのあった。
AIで数秒でワイヤーもデザインもできるみたい。
設計も言語化して伝えることができれば、完成度高めることも可能なのかな？… pic.twitter.com/uChnnAIMbE
— エイト|wedコーダー (@eight_web) June 30, 2024

【事例⑤】揺らぎの演出

細かいデザインについても対応可能であるため、より広範囲のデザイン作成が行えます。

Figma AI can recreate Apple's ripple effect 🤯 https://t.co/OeGjJOlBG4 pic.twitter.com/hbDIeyqRjA
— 𝙅𝙊𝙎𝙀 (@jose_goncalves_) June 27, 2024

【事例⑥】スライド変換

Figma AIで作ったデザインはスライドにも使えるため、どのようなユーザーにも応用可能です。

Convert Sticky Notes to Figma Slides, supafast!

One of my fave AI updates is being able to convert sticky notes in FigJam to a polished Figma Slides deck.

Stickies to storytelling in seconds. pic.twitter.com/XpC6NDSkOG
— Zander Whitehurst (@zander_supafast) June 27, 2024

【事例⑦】プロトタイプのフローの自動調整

細かな機能ではありますが、非常に嬉しい機能となっています。

あーこれもいいすね。
プロトタイプの線を自動で繋いでくれる#FigmaAI pic.twitter.com/5DminUXv0F
— tomoyuki|AI社員紹介所 (@sarukun99) June 28, 2024

【事例⑧】SNSデザイン制作

SNSのようなデザインも以下のように制作できます。

AI is finally bringing my dog only social network to life. @figma pic.twitter.com/Zb8Kz6Cb7c
— Matthew Berman (@TheMattBerman) June 27, 2024

【事例⑨】ECデザイン制作

ECサイトのようなデザインも以下のように制作できます。

嬉しいことにFigmaのUI3 + AIが早速解放されたので雑に触っている

今のところプロンプトは日本語より英語の方が精度高そうな感じがしている（この動画では英語で一度デザインを作ってから日本語に翻訳させた） pic.twitter.com/poAxfBKCnm
— コム (@co6x0) June 28, 2024

【事例⑩】ダッシュボードデザイン制作

ダッシュボードのようなデザインも以下のように制作できます。

かなりいいぞFigmaAI、超適当にダッシュボード作って言ったらつくってくれるw。 pic.twitter.com/YwxeNu3H7g
— tomoyuki|AI社員紹介所 (@sarukun99) June 28, 2024

【事例⑪】マップアプリデザイン制作

マップアプリのようなデザインも以下のように制作できます。

Figmaにプロンプト入力でかんたんにデザイン作成できるAI機能来た！

例えば、
「マップと店舗情報が表示されたピザ屋検索アプリ」
と入力すると、デザインを作成してくれる。
画像も生成され、スタイルも複数から選べる。#Config2024 pic.twitter.com/V6MZP5YVAL
— ❖ ken｜旅するデザイナー @南米バンライフ旅 (@ken_tbdz) June 26, 2024