【Config 2024】Figma、プロダクト構築の新時代を作る新たな機能 / UIを発表

Figma共同創業者兼CEOのDylan Field登壇の様子。Config2024には10,000人以上（2023年8,500人）が来場、オンラインで20,000人が視聴の見込み

Config 2024に登壇したFigmaの共同創業者兼CEOであるDylan Fieldは、次のように述べました。

「AIのおかげでより多くのソフトウェアが作成され、再構築されている世界では、プロダクトの設計と構築はすべての人が関わることとなります。Figmaは、プロのデザイナーの技術を引き上げるAIツールや、デザインとコードのつながりを強める開発者ツール、そしてアイデア検討段階からプロダクト完成段階まで、チームが連携して、一連のプロセスをFigma上で完結できるようにしたいと考えています。」

• 
  デザインツールから「プロダクト開発プラットフォーム」へ拡大
  

2012 年にプロダクトデザインツールとして設立された Figma は、プロダクト開発に関わるより多くの方々にサービスを提供できるように拡大してきました（実際にユーザーの3分の2は非デザイナーです）。2021年には、チームでブレインストーミングを行うためのオンラインホワイトボード「FigJam」を発表。2023年には、デザイナーと開発者が協力してデザインをコードへ効率的に変換できる Figma の専用ワークスペースである「Dev Mode」を開始しました。

今日では、Google のような大手ハイテク企業や、フォルクスワーゲンのような世界的自動車メーカーなど、さまざまな業界や地域の組織が、ソフトウェアやデジタル製品の開発（ブレインストーミング 〜設計〜 構築）に Figma を使用しています。そして、今回発表した「Figma AI」「Dev Mode（開発者ツール）の新機能」「Figma Slides」および「新しいUI」は、デザインツールから「プロダクト開発プラットフォーム」へと進化しているFigmaを、さらに前進させる一歩となります。

米ガートナーの調査によると、2024年のソフトウェア投資額は、前年比13.9%増の1兆ドルを超えると予想されています。今後さらにソフトウェア開発が増えることが見込まれるなか、Figmaはソフトウェアやデジタル製品などのプロダクト開発をより一層サポートしていきます。

• 
  新しい機能 / UI について
  

【

Figma AI

】

Figma AI

Figmaのデザインツールでは初のネイティブAI機能である「Figma AI」は、デザイナーのワークフローをスピードアップし、プロのデザイナーの技術を向上させます。新機能により、簡単なプロンプトでデザインの下書きを生成できるようになり、デザイナーはビジョンを表現するさまざまな方法を素早く検討できるようになります。また、テキストや画像を書き換えたり、編集したり、置き換えたりする機能により、デザインをより洗練させることもできます。AIを活用したプロトタイプ、レイヤー構成、ビジュアル検索により、迅速なプロトタイピングと改善作業が可能です。

《Figma AIの特徴》

◼️ デザインの作成

：テキストでのプロンプトから、さまざまなスタイルやレイアウトを備えたモバイルおよびウェブのUIモックアップを作成することができます。

◼️ ビジュアル検索

：フレーム、画像、スクリーンショットを使用しチームの作業を検索して探しているデザインを見つけたり、似たような問題を解決したチームメイトからヒントを得ることができます。

◼️ レイヤーの名前付け

：ワンクリックでファイル内のすべてのレイヤーの名前を適切に変更し、整理することができます。

◼️ AIを活用したプロトタイプ

：手作業不要で静止画やデザイン画のモックアップを、動作するプロトタイプに組み込むことができます。

◼️ 面倒なタスクを自動化するアクション

：AIアクションを使用することで、リアルに表現したテキストの追加、翻訳、トーンの調整、画像の作成、背景画像の除去などをすべてFigmaで実行することができます。

※Figma AIは2024年6月26日に限定ベータ版で公開予定。ユーザーは、製品内の待機リストに登録することで限定ベータ版の利用をリクエストすることができます。

【Dev Mode（開発者ツール）の新機能】

フォーカスビュー

デザインステータスを改善した「開発完了ビュー」(左)と、デザインシステムのコードを表示させる「Code Connect」(右)

Dev Mode は、開発者がデザインをより効率的にコードに変換できる Figma 内のワークスペースとして、Config 2023 で発表されました。2024年、Dev Mode はデザインをコードに近づけ、デザインと開発のワークフローをより明確にする新機能を搭載し、さらに進化しています。Code Connectは、デザインシステムやサポートされているUIキットからコードをリンクし、開発者が効率的にデザインをコードに変換できるようにします。

《Dev Mode の新機能の特徴》

◼️ ワークフローの改善

：デザインステータスを改善した新しい「開発完了ビュー」、変更を常に通知する通知機能、検査のための「フォーカスビュー」が搭載されます。

◼️ Code Connect

：自動生成されたコードではなく、デザインシステムまたはサポートされているUIキットのコンポーネントコードを表示し、一貫性とスピードを維持しながら、適切なコードを実装できます。

※これらの機能は、2024年6月26日に提供開始

【Figma Slides】

Figma Slides

グリッドビューにしてスライドを表示したり（左）、 スピーカーノートを記載したりすることが可能（右）

プロのデザイナーとコラボレーターのための新製品で、ブランドに合わせたプレゼンテーションを作成し、提供することで、一体感を生み出します。Figma Slidesは、Figmaのデザイン能力とコラボレーション型のプレゼンテーションツールを1つにしたことで、心を打つストーリーテリングを実現し、チームやオーディエンスのエンゲージメントを高めます。

Figmaは、そのコラボレーション機能、パワフルなデザインツール、そして作業中のプロトタイプを埋め込む機能により、すでに多くのデザイナーに愛用されているプレゼンテーションツールです。昨年1年間で、約350万ものスライドファイルがFigmaでデザインされました。Figma Slidesは、プレゼンテーション専用に設計されているため、誰でもプロのデザイナーのように美しくデザインされたデッキを作成、構築、発表することができます。

《Figma Slidesの特徴》

◼️ スキルレベルによらずデザインが可能:：

デザイナーとそのコラボレーター向けに、Figmaのパワーと精度を使いやすいスライド機能に融合させました。複雑な操作なしでFigmaのデザインとプロトタイプを取り入れたり、ビジネスで事前に作成したすべてのデザインスタイルとカスタマイズテンプレートを活用することが可能です

。

◼️ 作成、プレゼンを共同編集：

コメント、チャット、オーディオ、グリッド、共同プレゼンテーション用のコントロールなど、Figmaの使い慣れたコラボレーション機能を使って、スムーズなプレゼンテーションを作成できます。

◼️ AIのアシスト:

文書のトーン調整、テキストのリライトや要約、画像の生成と編集をすべてFigma上で行うことができます。

◼️一方通行のプレゼンテーションを双方向のディスカッションに：

オーディエンスの関心を引きつけ、フィードバックや質問をあらゆる場所で収集することで、もっとインタラクティブに仕事を前進させることができます。

※Figma Slidesは、2024年6月26日にオープンベータとしてリリース

【新しいFigmaのUI】

新しいFigmaのUI

Figmaのデザインおよび開発ワークスペースにおいて、よりモダンで親しみやすく、柔軟なユーザー・インターフェイスを提供します。今回のリデザインでは、Figma AIやその他のツールに簡単にアクセスできる新しいツールバーが設置され、ユーザーエクスペリエンスを簡素化し、シームレスなプロダクト開発ワークフローのベースを築きます。

《新しいFigma UIの特徴》

◼️ もっと親しみやすいインターフェース

：より分かりやすいアイコン、プロパティパネルのオプションラベル、丸みを帯びたUIにするなど、ユーザビリティの向上により、デザイン初心者にとっても経験豊富なデザイナーにとっても、より見やすく親しみやすいものとなりました。

◼️ 人間工学に基づいたデザイン

：サイズ変更ができるパネルにより、キャンバスをさらにカスタマイズできるようになりました。デザインの作成中には、パネルを最小化しインターフェースを隠してキャンバスを開き、プロパティの調整中にはパネルを拡大してスペースを広く使うことができます。

◼️ AIやその他のツールへ簡単にアクセス：

キャンバスの下部に新しいツールバーが追加され、AIや既存の機能への新しいエントリーポイントやショートカットが搭載されます。

• 
  Figmaについて
  

Figmaは、デジタル製品やソフトウェアのようなプロダクトを共同で制作するチームに向けたプラットフォームです。ウェブで生まれたFigmaは、アイデアからプロダクト完成までチーム全体をサポートします。ツールの統合、ワークフローの簡素化、チームや時間帯を超えたコラボレーションなど、Figmaは、プロダクト開発プロセスをより迅速に、より効率的に、そして楽しく、全員の理解を統一させることができます。

◼️Figma Japan official website

：

https://www.figma.com/ja-jp/

◼️FigJam site

：

https://www.figma.com/ja/figjam/

◼️Dev Mode site

：

https://www.figma.com/ja-jp/dev-mode/

• 
  Configについて
  

Configはサンフランシスコで開催される、Figmaによる年次カンファレンスで、世界中のコミュニティからデザイナー、開発者、製品ビルダーなどが集まり、互いに繋がり学び合う場です。さらに、Figmaの主要製品の発表も行われます。Configは、コミュニティによるコミュニティのためのイベントです。