Config 2024レビュー

過去数十年のソフトウェアは指数関数的な成長を遂げてきました。このトレンドはまだ終わっていません。シンプルなプロンプトから完全に機能するインターフェースを出力できるAIの時代において、デザインはこれまで以上に重要です。実際、優れた製品を明らかな解決策から差別化するのはデザインです。Figmaの役割は、可能性のオプションスペースを探索するのを支援することです。本日、アイデアから製品までのプロセスをサポートし、チームが創造性を発揮できるようにする多くの機能を発表します。

Figma AI: より大きく考え、より速く作る

AIの力で、アイデアから製品への道のりがこれまで以上に具体的になりました。Figmaでは、私たちのデザインチームが他のデザイナーのために製品を作っているため、デザインにおけるAIの役割に関して独自の視点（そして課題！）を持っています。そのため、私たちにとっては、単なる話題にとどまらず、実際のユーザーのニーズに基づいた仕事をすることが特に重要です。

ビジュアル検索: 探しているものを見つける

新しいプロジェクトに取り組むことが、必ずしもゼロから始めることを意味しないことは私たちも理解しています。そして、プロダクションスクリーンショットや既存のコンポーネントを見つけるのは難しいことがあります。そこで、ビジュアル検索を導入し、1つの参照で探しているものを簡単に見つけられるようにします。アイコンからデザインファイル全体まで、スクリーンショット、選択したフレーム、または鉛筆ツールで描いた簡単なスケッチで検索すると、Figmaがチームファイルから類似のデザインを引き出します。また、アセット検索が改善され、Figmaは検索クエリの背後にあるコンテキストをAIで理解できるようになりました。検索用語がアセットの名前と一致しなくても、簡単にアセットを見つけることができます。

効率の向上: フローを維持

デザイナーは、やりたい仕事から時間を奪う退屈な作業に多くの時間を費やしています。そこで、これらの作業を自動化し、より効率的に作業できるようにする一連のAI機能を導入します。これらの新機能により、リアルな画像やコピーの生成、テキストの修正や書き直し、プロトタイプの自動配線、レイヤーのワンクリックでの名前変更が可能になります。

デザインの作成: より良いスタート方法

空白のキャンバスに直面してどこから始めればいいか分からない場合は？新しいアクションパネルに存在する「デザインを作成」を使って、テキストのプロンプトから迅速にUIレイアウトやコンポーネントのオプションを生成することができます。必要なものを説明するだけで、Figmaが最初の草案を提供し、さまざまなデザインの方向性を探求し、プロセスをスタートさせる手助けをします。

スライド1 / 51 / 5

フレームや画像、スクリーンショット、またはスケッチを使って、組織内で類似するデザインや完全に一致するデザインを検索します。

UIのレイアウトやコンポーネントのオプションを生成して、さまざまな方法性を探ります。

テキストをアレンジしたり、リライトしたり、翻訳したりします。

プロトタイプを自動的につなぎ合わせます。

ファイル内のすべてのレイヤーを整理したり、名前を変更したりします。

これらの機能を構築するために、私たちは、すぐに使える大規模言語モデル（LLM）を使用しました。しかし、より良い機能を提供するためには、Figma を使用するチーム特有の作業方法に合わせて、モデルを調整する必要があります。トレーニングのアプローチについて、詳しくはこちらをご覧ください。

私たちのAI機能は、2024年までのベータ期間中はすべてのユーザーに無料で提供されます。私たちはこれらのツールがどう使用されるか、またFigmaにとっての実際のコストを学ぶとともに、ベータ版の使用制限を導入する必要があるかもしれません。Figma AIが一般提供される際には、価格設定に関する明確なガイドを提供します。私たちの目標は、効率的な作業をサポートすると同時に、これらの機能をスケーラブルに改善することです。詳細はこちらで確認してください。

AIに関する私たちのビジョンと新しいAI機能のスイートについて詳しく学ぶ。

UI3: リデザインされたFigma

本日、私たちはFigmaをクローズドベータ版で10年以上前にローンチして以来、3回目のインターフェースのリデザインであるUI3を展開します。より没入感のあるキャンバス、コンポーネントを中心としたUI、新しいアイコンセットを備えたUI3は、今日のあなたの作業方法からインスピレーションを得たもので、コミュニティからのフィードバックに基づいています。Figmaをローンチして以来、私たちはユーザーエクスペリエンスを向上させ、より強力なツールにするために機能を追加してきました。数年にわたり機能やアップデートを段階的に追加してきましたが、長年にわたって築いてきたマッスルメモリーやワークフローパターンを尊重しつつ、Figma内により多くのスペースを作り出したいと考えています。

私たちは、目の前の悩みを解決するだけでなく、Figmaが目指す方向への道を切り開こうとしています。一貫したパターン、システム、およびFigmaプラットフォーム全体で新しいサーフェスに対応するための構造があり、今回のリデザインはそのシフトを反映しています。

これらの変更に適応するには時間がかかることを理解していますので、今日からユーザーに徐々に展開していきます。皆様のフィードバックを基にUI3を改善していく中で、このリデザインをオフにすることも可能です。最終的には全ユーザーをUI3に移行します。詳細はこちらからご確認ください。

リデザインされたFigmaの舞台裏をのぞいてみてください。

Figma Slides: 作成、共同作業、発表

私たちの働き方は年々大きく変わってきましたが、プレゼンテーション資料はそれに遅れをとっています。そのため、多くのデザイナーが解決策としてFigmaを選んでいます。昨年だけでも、Figmaで350万以上のスライドファイルが作成されました。しかし、デザイナーではない人とのコラボレーションやツールに馴染みのない人へのプレゼンテーションでは、しばしば面倒な回避策や手作りのワークフローが必要でした。説得力のあるデッキを作るためにわざわざ苦労することはもうありません。また、重要なデザインコントロールを犠牲にする必要もありません。私たちは、マルチプレイヤー、ライブデザイン、ズームアウトしたグリッドビューなどFigmaの魅力をすべてスライドツールに取り込んだため、すぐに使い慣れることができるでしょう。

Figma Slidesは無料ベータ版です。2025年初頭には、無料プランと有料プランで利用可能となり、ユーザーごとに月額3ドルと5ドルからとなる予定です。詳細はこちらで確認してください。

デッキを重ねる: Figma Slidesの開発背景について詳しく読み、始め方を学ぶ。

開発モードのアップデート: デザイン準備完了から開発完了まで

Config 2023で、Figmaの開発者向けの新しいワークスペースである開発モードを発表しました。本日、開発モードのアップデートを発表し、反復的なデザインプロセスの現実により適したサポートを提供し、開発者のワークフローを加速し、デザインとコードをより密接に結びつけます。

新しいビューやステータスを常に把握

ハンドオフは一度きりの出来事ではありません。実際には、デザインとコードが進化するにつれて、チームが行ったり来たりする反復的で非線形なプロセスです。新しい「開発準備完了ビュー」は余分なノイズを削減し、開発者、デザイナー、その他の関係者がプロジェクトを前進させるために必要なことを正確に把握できるよう支援します。また、「フォーカスビュー」とデザインを「開発完了」としてマークする機能により、開発者は連携を保ちつつ、フローに乗りながら作業を進めることができます。

開発準備完了ビュー

開発者が数百のデザイン探索の中から何に取り組むべきかを見つけることは難しいことがあります。作業が複数のページにまたがっている場合には特にそうです。新しい「開発準備完了ビュー」では、開発者が検索やフィルタリング、更新のリスト解析を行い、誰がいつ何を更新したかを確認することができるため、必要な全てのコンテキストを得ることができます。

フォーカスビュー

新しいフォーカスビューでは、開発者は邪魔をされずに構築すべきものだけを見ることができます。デザインが時間の経過と共にどのように変化し、ステータスが更新されたかを全て把握することができ、最新のデザイン訂正以前のデザインのスナップショットも確認できます。開発が完了したら、開発者はデザインを「完了」とマークしてプロセスを終了することができます。

より強力な方法でステータスを追跡

デザインは常に作業を進行中であり、直前での変更が避けられません。今回、デザイナーが「開発準備完了」とマークされたデザインに変更を加えると、開発者に更新情報を伝えることができ、変更内容を説明するための役立つメモも残すことができます。その後、開発者は変更に関する通知を受け取り、次に取り組むべき作業内容が明確になります。

Code Connectで一貫性と効率性を維持

デザインシステムは、デザインとコードの間の隔たりを埋め、チームがスケーリングしながら迅速に動くのを助けます。しかし、Figmaでデザインシステムを持っていても、開発者がそれを採用しなければその利点はほとんど失われてしまいます。そのために私たちはCode Connectを開発しました。これはデザインシステムのコードを明確にし、異なるフレームワークや言語間でより有用にします。本日、Code Connectを一般提供し、コンポーネントプレイグラウンドで連携するコードスニペットを表示する改善や、セットアップを効率化する新しいツール、React、React Native、iOS、Androidなどへのサポートを含むさまざまな改善を共に発表できることを嬉しく思います。

これらのアップデートは、ビジネスプランおよびエンタープライズプランの開発モードユーザーが利用可能です。詳細はこちらで学ぶことができます。

利便性の向上: オートレイアウト、UIキット、プロトタイプビューア

すでに好評いただいている機能のさらなる改良のため、利便性向上のための一連のアップデートをリリースします。変更内容は次のとおりです。

オートレイアウトがより直感的に

オートレイアウトを更新し、必要な場合にはより予測可能で、不要な場合には無視しやすくしました。今回、Figmaは単一のデザイン要素に複数のオートレイアウトフレームが必要かどうかを提案し、それらのフレームを自動的に作成することができます。これにより、デザイン内の各フレームに個別に適用する手間が省けます。さらに、デザイン要素をオートレイアウトフレームにドラッグする際にCtrlキーを押すことで、絶対位置を設定してオートレイアウトを無視することができます。詳細はこちらで学ぶことができます。

UIキットで素早くスタート

アセットパネルで直接、Apple iOS、Google Material Design 3、およびFigmaのSimple Design System UIキットを見つけることができます。各UIキットにはコンポーネントセットと例示のモックアップが含まれており、フルレイアウトから始めることができます。例示の画面をドラッグして始点として利用し、ライブラリからのコンポーネントを使用して完全に編集可能です。さらに、これらのUIキットはすべてCode Connectでサポートされています。詳細はこちらで確認してください。

Googleなどのパートナーから厳選されたUIキットを使って始めましょう。

プロトタイプビューアーがレスポンシブにサイズ変更可能に

レスポンシブにサイズ変更する新しいプロトタイプビューアのエクスペリエンスにより、あらゆる画面サイズでデザインを体験できます。この新しいメニューオプションでは、プロトタイプのプレビューまたはプレゼンテーションが可能です。ビューアウィンドウのリサイズや異なるデバイスフレームの選択時には、制約とオートレイアウトのプロパティが尊重されます。詳細はこちらをご覧ください。

近日公開予定: エージェンシーやフリーランサー向けの改善

Figmaの改善は、インターフェースや機能だけでなく、請求アーキテクチャなどの見えにくいユーザーエクスペリエンスも含まれます。今後は、フリーランサーやエージェンシーが外部クライアントと協力するのを容易にし、プロジェクトの引き継ぎを効率化し、請求を簡素化するための取り組みを進める予定です。この取り組みの進捗については、引き続き最新情報を共有していきます。詳細はこちらで学ぶことができます。

AIによって形作られる将来では、クラフトが差別化要因となります。Figmaでは、これは日々使うソフトウェアの能力を広げつつ、品質も向上させることを意味します。今日の発表をお楽しみいただければ幸いです。みなさまのために製品構築ができる機会に感謝しています。