Figma AIって何ができるの？
弊社ではAI導入支援を行っていますが、そのような声をよくいただきます。
本記事では、Figma AIでできることや活用事例についてわかりやすくまとめて紹介していますので、ぜひ最後までご覧ください。
弊社Walkersでは、“AIトレンドに乗り遅れたくないけど、具体的な活用法が見えない…”を解決するAI導入支援を行っています。補助金により1/3のコストで導入可能なので、ぜひAI活用にお悩みがある方はお気軽にご相談下さい。⇒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のプラグインで便利なのあった。
— エイト|wedコーダー (@eight_web) June 30, 2024
AIで数秒でワイヤーもデザインもできるみたい。
設計も言語化して伝えることができれば、完成度高めることも可能なのかな？… pic.twitter.com/uChnnAIMbE
【事例⑤】揺らぎの演出
細かいデザインについても対応可能であるため、より広範囲のデザイン作成が行えます。
【事例⑥】スライド変換
Figma AIで作ったデザインはスライドにも使えるため、どのようなユーザーにも応用可能です。
Convert Sticky Notes to Figma Slides, supafast!
— Zander Whitehurst (@zander_supafast) June 27, 2024
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
【事例⑦】プロトタイプのフローの自動調整
細かな機能ではありますが、非常に嬉しい機能となっています。
あーこれもいいすね。
— tomoyuki|AI社員紹介所 (@sarukun99) June 28, 2024
プロトタイプの線を自動で繋いでくれる#FigmaAI pic.twitter.com/5DminUXv0F
【事例⑧】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が早速解放されたので雑に触っている
— コム (@co6x0) June 28, 2024
今のところプロンプトは日本語より英語の方が精度高そうな感じがしている（この動画では英語で一度デザインを作ってから日本語に翻訳させた） pic.twitter.com/poAxfBKCnm
【事例⑩】ダッシュボードデザイン制作
ダッシュボードのようなデザインも以下のように制作できます。
かなりいいぞFigmaAI、超適当にダッシュボード作って言ったらつくってくれるw。 pic.twitter.com/YwxeNu3H7g
— tomoyuki|AI社員紹介所 (@sarukun99) June 28, 2024
【事例⑪】マップアプリデザイン制作
マップアプリのようなデザインも以下のように制作できます。
Figmaにプロンプト入力でかんたんにデザイン作成できるAI機能来た！
— ❖ ken｜旅するデザイナー @南米バンライフ旅 (@ken_tbdz) June 26, 2024
例えば、
「マップと店舗情報が表示されたピザ屋検索アプリ」
と入力すると、デザインを作成してくれる。
画像も生成され、スタイルも複数から選べる。#Config2024 pic.twitter.com/V6MZP5YVAL
【事例⑫】ダミーテキストの自動生成
Figma AIではダミーテキストも考えてくれるため、デザイナーはクリエイティブな作業に集中できます。本当にありがたい機能だと感じます。
この辺もいいですよね、
— tomoyuki|AI社員紹介所 (@sarukun99) June 28, 2024
ダミーのテキスト考えるときにいちいち
CahtGPT/Claudeいかなくていい#FigmaAI pic.twitter.com/dhtIlZqLdk
Figma AIでできること・活用事例の紹介は以上です。この情報がお役に立てていれば嬉しく思います。
弊社Walkersでは、“AIトレンドに乗り遅れたくないけど、具体的な活用法が見えない…”を解決するAI導入支援を行っています。補助金により1/3のコストで導入可能なので、ぜひAI活用にお悩みがある方はお気軽にご相談下さい。
