【2025年最新】Figma Make完全ガイド:AIでデザインはどう変わる?初心者向けに新機能Sites・Draw・Buzzも徹底解説

AI
この記事は約20分で読めます。

【2025年最新】Figma Make完全ガイド:AIでデザインはどう変わる?初心者向けに新機能Sites・Draw・Buzzも徹底解説のPodcast

下記のPodcastは、Geminiで作成しました。

ストーリーブック

「ユイと創造のスパーク」の絵本を見る

はじめに:Figmaの新章—デザインツールから「創造性のOS」へ

2025年のFigma年次カンファレンス「Config 2025」は、単なる新機能の発表会ではありませんでした。それは、Figmaが自らの役割を再定義し、デザインツールという枠を超えて、アイデアの創出からプロダクト開発、マーケティングまでを包括する一つの「創造性のOS(Creative Operating System)」へと進化する意志を明確に示した歴史的な転換点でした 。 
  
基調講演で登壇したCEOのディラン・フィールド氏は、AIがプロダクト開発を容易にする世界において、デザインこそが他との差別化を図るための最も重要な戦略的優位性になると強調しました 。このビジョンを具現化するように、Figmaは「Figma Make」「Figma Sites」「Figma Draw」「Figma Buzz」という4つの主要な新プロダクトを発表。これにより、Figmaのコア製品群は4つから8つへと倍増し、その領域を劇的に拡大しました 。   
この動きは、Figmaがこれまで競合してきたSketchのようなUIデザインツールだけでなく、WebサイトビルダーのWebflow、ベクター編集ソフトのAdobe Illustrator、そしてマーケティングコンテンツ作成ツールのCanvaといった、より広範なエコシステムに挑戦状を叩きつけたことを意味します 。   
この大規模な製品拡充の背景には、クリエイティブなワークフローをFigmaのエコシステム内に統合し、ユーザーをプラットフォームに深く定着させるという巧みな戦略が見え隠れします。従来、UIデザインはFigma、イラスト作成はIllustrator、Webサイト構築はWebflow、マーケティング素材はCanvaと、デザイナーは複数のツールを使い分ける必要があり、データのやり取りやブランドの一貫性維持に多大な労力を費やしていました 。Figmaは、これらの機能をすべてプラットフォーム内に取り込むことで、「より少ないツールで、より統一されたワークフロー」を実現しようとしています 。   
デザイナーがFigma Drawで作成したイラストを、Figma Sitesで構築したWebサイトに組み込み、そのテンプレートをFigma Buzzでマーケティングチームに共有する。このようなシームレスな連携が実現すれば、組織全体がFigmaから離れることは困難になります。この戦略を裏付けるのが、デザイナー以外の共同作業者向けに導入された新しい料金プラン「Content Seat」です 。これにより、Figmaは企業内のあらゆる部門に浸透し、その地位を不動のものにしようとしているのです。

主役の登場:AIプロトタイピングツール「Figma Make」徹底解剖

Config 2025で最も注目を集めたのが、AIを搭載したプロトタイピングツール「Figma Make」です。これは、デザインと開発の間の深い溝を埋める可能性を秘めた、革新的なツールと言えるでしょう。

Figma Makeとは何か?

Figma Makeは、テキストによる指示(プロンプト)、画像、スクリーンショット、あるいは既存のFigmaデザインファイルから、実際に機能するプロトタイプやWebアプリケーション、UIを自動で生成するAIツールです 。その体験は、まるで「Figmaのキャンバスに組み込まれたCopilot(AIコーディングアシスタント)」のようだと表現されています 。

初心者にも分かる主な機能

Figma Makeは、専門的な知識がないユーザーでも直感的に使えるように設計されています。

  • 自然言語による指示: コーディングは一切不要。「クリニックを探すアプリを作って」のように、作りたいものを言葉で説明するだけでAIが形にしてくれます 。   
  • ライブプレビューと直接編集: AIが生成したアプリはリアルタイムでプレビューでき、色や余白などの細かい部分は、画面上の要素を直接クリックして修正できます 。   
  • ライブラリのインポート: 既存のFigmaデザインライブラリを読み込むことで、生成されるプロトタイプもブランドガイドラインに沿ったデザインに統一できます 。   
  • Webへの公開: 作成したプロトタイプは、ワンクリックでユニークなURLを持つWebサイトとして公開可能。関係者に共有して、すぐにフィードバックをもらったり、ユーザーテストを実施したりできます 。

プロトタイピングの常識を変えるパラダイムシフト

Figma Makeの登場が画期的なのは、プロトタイピングの目的そのものを根本から変える可能性を秘めている点です。従来のFigmaのプロトタイピング機能は、静的なデザイン画面同士を線でつなぎ、インタラクションを「シミュレーション」するものでした。それはあくまでアプリの「模型」であり、実際の製品ではありませんでした 。   
一方、Figma Makeは、ユーザーの指示に基づいて実際に動作するコード(React)を生成します 。これにより生み出されるのは、単なるアプリの絵ではなく、アプリそのものの初期バージョンです。これは、プロトタイプとMVP(Minimum Viable Product:実用最小限の製品)の境界線を曖昧にする大きな変化です。   
この変化は、プロダクト開発のプロセスに絶大な影響を与えます。より現実に近い形での早期ユーザーテストが可能になり 、開発者には静的なデザイン画ではなく、動作するコードの断片を提供できるため、仕様の誤解が減り、手戻りが大幅に削減されることが期待されます 。さらに、プログラミングのできない起業家や企画担当者でも、アイデアをすぐに動く形で検証できるようになり、プロダクト開発の民主化を加速させるでしょう 。プロトタイプはもはや「計画書」ではなく、「製品の初稿」となるのです。 

Figma Make実践ガイド:初心者が知るべき「現実」とおすすめ活用法

Figma Makeは大きな可能性を秘めていますが、現在提供されているのはオープンベータ版であり、その実力を最大限に引き出すためには、現状のメリットとデメリットを正しく理解することが不可欠です。

メリット:アイデア出しを劇的に加速する

  • 比類なきアイデア創出スピード: Figma Makeは、特にプロジェクトの初期段階におけるUX/UIのアイデア出しにおいて、驚異的なスピードを発揮します。頭の中にある漠然としたイメージを瞬時に形にできるため、創造的な探求を強力に後押しします 。   
  • 非技術者のエンパワーメント: プログラミング経験のないチームメンバーでも、社内ツールや簡単なアプリのプロトタイプを1日足らずで構築できたという報告もあり、誰もが「作る」側に回れる可能性を示しています 。

デメリット:ベータ版ならではの課題

  • 魔法ではない: ユーザーからは「バグが多い」「動作がぎこちない」といった声も聞かれます 。あるユーザーは、その使い勝手を「たくさんの間違いを犯すジュニア開発者と一緒に仕事をしているようだ」と表現しています 。   
  • Figmaデザインファイルとの直接連携は不可: 現状、これが最も大きな制約です。Figma Makeの出力はあくまでインタラクティブなプロトタイプであり、Figmaのデザインツールで編集可能なレイヤーやコンポーネントには変換されません。生成されたデザインをFigmaで精密に作り込むには、静的な画像として書き出して手動で再構築する必要があります 。   
  • 制御の難しさとコードの品質: AIが意図しないデザイン上の判断を下すことがあります(例:ラジオボタンの修正を依頼したら、セレクトメニューに変更されてしまった) 。また、生成されるコードは単一のファイルにまとめられていることが多く、開発者にとっては非効率な場合があります 。 

誰でも使える具体的な活用例:読書会のイベントページ作成

シナリオ:地域の読書サークルの主催者が、次回のイベント告知ページを急いで作りたい。
専門的な知識はないけれど、参加者に情報を分かりやすく伝え、出欠を取りたいと考えています。
Figma Makeの活用ステップ:

  1. 最初のプロンプト(指示): Figma Makeを開き、チャットでこう入力します。

    「『丘の上読書会』のイベントページを作って。次回の開催は11月15日。課題本は『星の王子さま』で、本の表紙画像を目立たせて。参加登録のためのシンプルなRSVPボタンも設置して。」

  2. 瞬時にプロトタイプが完成: ほんの数十秒で、入力した情報が反映された、実際に操作できるウェブページのプロトタイプが生成されます。本の表紙が配置され、日付が記載され、クリック可能なボタンが設置されています。

  3. 対話による修正: 生成されたデザインを見て、主催者はもう少し雰囲気を変えたいと思いました。そこで、追加で指示を出します。

    「見出しなどの文字をもう少し大きく、太くしてメリハリのあるようにしてください。そして、全体的にもっと温かみのある、古書の図書館みたいな色合いにして。フォントも少しクラシックなものに変えて。」

    AIは即座にデザインを更新し、新しい雰囲気のページを提案します。

利用対象者

Figma Makeは、無料のスタータープランを含むすべてのプランで利用可能です 。ただし、無料プランでは、作成したプロトタイプの公開がFigma Community経由に限定されたり、既存のデザインライブラリを読み込んでスタイルを反映させる機能が使えなかったりといった一部機能制限があります。

おすすめの活用法:「生産エンジン」ではなく「創造性の触媒」として

これらの特性を踏まえると、現段階でのFigma Makeの最適な使い方は、プロダクトを完成させるための「生産エンジン」としてではなく、創造的なプロセスを開始するための「触媒」として捉えることです。その真価は、ゼロから何かを生み出す際の精神的な壁を取り払い、短時間で多様な可能性を提示してくれる点にあります。
推奨されるワークフローは以下の通りです。まず、プロジェクトの初期段階でFigma Makeを使い、プロンプトを変えながら10〜20パターンのアイデアを高速で試作します 。これにより、デザインの方向性やレイアウトの可能性を幅広く探ります。そして、有望なアイデアが見つかったら、Figmaのデザインツールに移行し、コンポーネント化やオートレイアウトといった機能を駆使して、ピクセル単位で正確な、本番用のデザインデータへと仕上げていくのです 。Figma Makeは「創造的な探求のための素晴らしい出発点」であり、最終目的地ではない、という認識が重要です。

拡大するFigmaの世界:Sites, Draw, Buzzと新Grid機能

Config 2025の発表はFigma Makeだけにとどまりません。Figmaを包括的なプラットフォームへと押し上げる、強力な新ツール群が発表されました。ここでは、それぞれのツールの概要と初心者にとってのメリットを解説します。

Figmaの新ツール一覧(Config 2025)

ツール名主な機能初心者へのメリット競合ツール
Figma MakeAIによるプロンプトからのプロトタイプ生成 コーディング不要で、アイデアを即座に動く形で試せる  AIプロトタイピングツール (v0など) 
Figma SitesデザインからWebサイトを直接公開 自分のポートフォリオサイトなどをFigmaから直接公開できる  Webflow, Framer, Wix Studio 
Figma Draw高度なネイティブベクター作画ツール アイコンやイラスト作成のために他のツール(Illustrator)を開く必要がなくなる  Adobe Illustrator 
Figma Buzzブランドに準拠したコンテンツの大量生成 デザイナーが作ったテンプレートを使い、安全にマーケティング画像などを素早く作れる  Canva 

各ツールの詳細

Figma Sites

Figmaで作成したデザインを、レスポンシブ対応のWebサイトとして直接公開できるツールです。ブレークポイント(画面幅に応じた表示切り替え)の設定やアニメーションの追加も可能で、将来的にはCMS(コンテンツ管理システム)の統合も予定されています。ポートフォリオサイトや製品のランディングページを素早く作成したい場合に非常に強力です 。

Figma Draw

Figmaのベクター編集機能を大幅に強化するツール群です。複数の図形を結合・分割できる「シェイプビルダー」、投げ縄ツールでのアンカーポイント選択、曲線に沿ってテキストを配置する「テキストオンパス」、パターンでの塗りつぶしなど、これまでAdobe Illustratorで行っていたような高度な作図作業の多くがFigma内で完結できるようになります 。 

Figma Buzz

「ブランドの安全性を担保したCanvaの代替ツール」と位置づけられています 。デザイナーが編集箇所を制限したテンプレートを作成し、マーケティング担当者などの非デザイナーがそのテンプレートを使って、ブランドイメージを損なうことなくSNS投稿画像や広告バナーといった素材を大量に生成できるツールです 。

Grid Auto Layout

待望の2次元レイアウト機能です。従来のオートレイアウトが縦か横の一方向にしか要素を並べられなかったのに対し、「Grid」では行と列を持つグリッド構造を簡単に作成できます。これにより、カレンダーや料金表、ダッシュボードといった複雑なレイアウトの構築が劇的に容易になります。また、この機能はWebの標準技術であるCSS Gridの考え方に基づいているため、デザインと実装の乖離が少なくなり、開発者への引き渡しもスムーズになります 。

デザインの未来:AIはデザイナーの役割をどう変えるか

Figma MakeをはじめとするAIツールの進化は、単なる作業効率の向上にとどまらず、デザイナーという職業のあり方そのものに大きな変化を迫っています。

「制作者」から「編集者・ディレクター」へ

AIがデザインの初期案を自動生成するようになると、デザイナーの役割は、ピクセルを一つひとつ手作業で配置する「制作者」から、AIが生み出した無数の選択肢の中から最適なものを選び、磨き上げる「編集者」や「ディレクター」へとシフトしていきます。価値の源泉は、手先の技術から、優れた審美眼、戦略的な視点、そして独自の思想へと移行するのです 。デザイナーはAIの出力を監督し、より良い方向へと導く存在になります 。

デザインと開発の境界線の融解

Figma Makeのようなツールは、デザイナーがコードを書かずに、簡単なUIのバグを修正したり、機能的なコンポーネントを構築したりすることを可能にします。これは、従来は開発者の領域だった作業です 。デザイナーと開発者の役割は完全に融合するわけではありませんが、その境界線はますます曖昧になり、両者の専門知識を併せ持つ「プロダクトコンポーザー」のような、より学際的な役割が求められるようになるでしょう 。

コアなデザインスキルの価値向上

逆説的ですが、AIが単純作業を自動化すればするほど、AIにはできない人間ならではのスキル、すなわち、ユーザーの課題を深く洞察するリサーチ能力、本質的な問題を特定する思考力、チームをまとめる協業力といった、根源的なデザインスキルの価値はむしろ高まります 。AI製品を開発する企業の半数以上が、従来製品よりもAI製品においてデザインが「より重要になる」と回答しているというデータもあります 。

「均質化」の脅威とオリジナリティへの回帰

一方で、AIデザインツールが広く普及することによる長期的なリスクも指摘されています。それは、デザインの「均質化(Sameness)」です 。AIモデルは既存の膨大なデザインデータを学習してアウトプットを生成するため、多くのデザイナーが同じツールを使い続けると、生み出されるUIやレイアウトが似通ってしまい、没個性的で陳腐なデザインが溢れかえる可能性があります 。   
このような状況が進むと、市場はAIが容易に模倣できない価値、すなわち、デザイナー独自の視点、深い戦略性、そしてデザインに「魂」や「個性」を吹き込むような繊細な表現力を、これまで以上に高く評価するようになるでしょう 。最も成功するデザイナーとは、AIに素早く指示を出せる人ではなく、AIを導いて真に新しいものを創造できる人、あるいは、時にはAIの提案を大胆に却下し、人間ならではの創造的な飛躍を成し遂げられる人になるはずです。ディラン・フィールド氏が語ったように、未来は「偶然にデザインされるのではなく、私たちによって意図的に形作られる」のです 。

まとめ:AI時代のFigmaと、あなたが次に踏み出す一歩

Config 2025は、Figmaがデザイン、開発、マーケティングを繋ぐオールインワンのクリエイティブプラットフォームへと大きく舵を切ったことを示しました。その中心にあるFigma Makeは、アイデアを瞬時に形にする強力なAIツールですが、まだ発展途上であり、その特性を理解した上で活用することが重要です。同時に発表されたSites、Draw、Buzz、そしてGrid機能は、Figmaで可能なことの範囲を飛躍的に広げました。
これらの変化の波の中で、デザイナーの役割は変容し、技術的な作業よりも戦略的な思考や人間中心の課題解決能力がこれまで以上に重要になります。

これからFigmaを学ぶ初心者や、この新しい変化に適応しようとしているデザイナーにとって、重要なのは以下の点です。

  • 実験を恐れないこと: これらの新しいツールを理解する最良の方法は、実際に触ってみることです。時間を確保してFigma Makeで遊んでみたり、Figma Sitesで簡単なページを作ってみたり、Figma Drawの新しいペンツールを試したりすることから始めましょう 。   
  • 基礎に立ち返ること: 新しいツールを学ぶことは大切ですが、それ以上に、ユーザーリサーチ、課題解決、コラボレーションといったデザインの基本原則を磨き続けることが、AI時代における最も価値ある資産となります 。   
  • AIをパートナーと捉えること: AIを自分の仕事を奪う脅威と見るのではなく、より多くのアイデアをより速く探求するのを手伝ってくれる創造的なパートナーと考えましょう。最終的な決定権を握るディレクターは、常にあなた自身です 。   
  • 好奇心と批評的な視点を持ち続けること: 流行にただ乗りかかるのではなく、これらのツールが本当に自分のワークフローに合っているか、単に「速い」だけでなく「より良い」仕事につながるかを、常に自問自答することが大切です 。   

Figmaが切り拓く新しい世界は、挑戦に満ちていますが、それ以上に大きな可能性を秘めています。この変化を前向きに捉え、自らのスキルセットを進化させ続けることが、これからのデザイナーに求められる最も重要な姿勢と言えるでしょう。

参考資料

  1. Figma 2025 AI report: insights for UX designers, https://www.everydayux.net/figma-2025-ai-report-insights-for-ux-designers/
  2. prototyping in figma is dead. the future is ai prototyping., https://www.reddit.com/r/UXDesign/comments/1ncq0ka/prototyping_in_figma_is_dead_the_future_is_ai/
  3. Figma Config Recap 2025: What We Learned, https://outwitly.com/blog/figma-config-recap-2025/
  4. Config 2025 Recap: Figma Becomes an End-to-End Platform, https://insomniacdesign.com/insights/config-2025-recap
  5. Muzli Recap: The Highlights from Figma Config 2025, https://muz.li/blog/muzli-recap-the-highlights-from-figma-config-2025/
  6. Designers can finally build and own our design, https://www.youtube.com/watch?v=3dApzK6v7CI&pp=0gcJCf8Ao7VqN5tD
  7. Figma's Config 2025 keynote featured CEO Dylan Field announcing new products and updates., https://sider.ai/create/video/ai-video-shortener/explore/cebc44be-0c48-470f-b60a-d22003a5067a
  8. Figma Config 2025: All The New Features & How To Use Them, https://www.designmonks.co/blog/figma-config-2025
  9. Figma Make in Sites, https://www.youtube.com/watch?v=5q8YAUTYAyk
  10. Figma Make Beta Launches to Turn Designs Into Apps and Prototypes, https://www.cmswire.com/digital-experience/figma-make-beta-launches-to-turn-designs-into-apps-and-prototypes/
  11. Figma Config 2025: A Glimpse into the Future of Design, https://hybridheroes.de/blog/figma-config-2025/
  12. Everything we announced at Config 2025, https://www.youtube.com/watch?v=NHodnYFUT_I&vl=en
  13. Everything Announced at Figma Config 2025, https://trewknowledge.com/2025/05/13/everything-announced-at-figma-config-2025/
  14. Config 2025: Complete Analysis of Figma's New Product Lineup, https://uxplaybook.org/articles/figma-config-2025-product-expansion-analysis
  15. Figma Make is now available on all plans, https://www.youtube.com/watch?v=qLyv9UO51bI
  16. Figma Config 2025 Full Overview | Figma Sites, Figma Make, Figma Buzz, Figma Draw and Grids!, https://www.youtube.com/watch?v=FdE-Qs_zBLo
  17. Figma 2025 Updates: A Game-Changer for Design and Collaboration, https://www.c-sharpcorner.com/article/figma-2025-updates-a-game-changer-for-design-and-collaboration/
  18. Course overview: Figma Design for beginners (2025), https://help.figma.com/hc/en-us/articles/30848209492887-Course-overview-Figma-Design-for-beginners-2025
  19. The Absolute Beginner’s Guide to Figma Design in 2025, https://medium.com/@freefigmatemplates/the-absolute-beginners-guide-to-figma-design-in-2025-d30254cba0e0
  20. From Prompt to Product: Building with AI and Code in Figma, https://www.youtube.com/watch?v=qaZC3XSAeR8
  21. Figma Crash Course 2025, https://www.youtube.com/watch?v=23lJ2YAnlC8
  22. Any recommended figma tutorial for beginner in 2025?, https://www.reddit.com/r/FigmaDesign/comments/1lqr6rd/any_recommended_figma_tutorial_for_beginner_in/
  23. Figma Config 2025 現地参加レポート 〜人とAIがともにデザインする未来〜, https://note.com/mercari_design/n/nc2ec290a1d68
  24. Figma Make Review 2025: How AI + Design Is Redefining App Creation, https://medium.com/@jiblemathew/figma-make-review-2025-how-ai-design-is-redefining-app-creation-b234e86354bd
  25. Figma UX Design Tools Review for 2025, https://cpoclub.com/tools/figma-review/
  26. Hands-on review of Figma AI Make, https://medium.com/@2bhere4u/hands-on-review-of-figma-ai-make-2422129f3a2f
  27. Figma Review, https://uk.pcmag.com/graphic-design/157408/figma
  28. Figma Make review: The good, the bad, and the future, https://blog.logrocket.com/ux-design/figma-make-review/
  29. prototyping in figma is dead. the future is ai prototyping., https://www.reddit.com/r/UXDesign/comments/1ncq0ka/prototyping_in_figma_is_dead_the_future_is_ai/
  30. Why Figma Make Might Be the Most Important AI Tool of 2025, https://www.thenextwave.show/why-figma-make-might-be-the-most-important-ai-tool-of-2025/

コメント

タイトルとURLをコピーしました