FigmaがUIの刷新を発表 #Config2024

#Config2024#Figma#ニュース
投稿日:

Figmaは、新製品発表会「Figma Config 2024」で、新しいUI「UI3」を発表しました。

Figma UI3のモックアップ
画像クレジット:Figma

Figmaは10年前にリリースされて以来、レイアウトはほとんど変わっていません。Figmaは次の10年間の基盤を築くために、クローズドベータ以来3回目の大幅な再設計「UI3」を展開します。

FigmaのUI2とUI3の比較画像
画像クレジット:Figma

Figmaは、デザイナーが最大限の創造性を発揮できる環境を提供するために、ユーザーのフィードバックを取り入れつつインターフェースを改良してきました。

新しいUIの最大の特徴の一つは、Figmaキャンバスの再設計です。作業空間を最大限に活用でき、重要なツールを常に手元に保ちつつ、集中しやすい環境を提供します。

ツールバーをキャンバスの下部に移動し、サイドパネルをリサイズ可能にしました。これにより、全体的により広々とした印象を受けるデザインに仕上がっています。

Figmaの新しいキャンバスのスクリーンショット
画像クレジット:Figma

ツールバーは表示・非表示が簡単に切り替えられ、必要なときにのみパネルを表示できます。

もうひとつの重要な変更点は、プロパティパネルの再設計です。デザインシステムが普及する中で、コンポーネントの操作がより重要になってきました。新しいプロパティパネルでは、コンポーネントのバリアントやインスタンスが色やサイズの属性よりも上位に表示されます。

Figmaのプロパティパネルのスクリーンショット
画像クレジット:Figma

レイアウト関連のオプションも統一され、オートレイアウト、幅、高さなどがひとつのパネルにまとめられました。

Figmaの新旧プロパティパネルのスクリーンショット
画像クレジット:Figma

新しいインターフェースでは、これまでのミニマムなデザインから、新たなアイコンに変更されました。

Figmaの新しいアイコンのスクリーンショット
画像クレジット:Figma

さらに、Figmaのエコシステムが拡大する中で、統一感のあるユーザー体験を提供するための工夫が施されています。FigJam、Figma Design、Figma Slidesといったツール間をスムーズに切り替えられるよう、スリムなツールバーとフローティングパネルが導入されました。

UI3を使う方法

Figma UI3は、2024年の間はベータ版として無料で提供されます。場合によっては、ベータ版の使用制限を導入する可能性があるとのことです。また、Figma AIの一般提供が開始されたら、価格などの詳細を発表するとしています。

現在、Figma UI3はベータ版として提供されており、利用するにはウェイティングリストに登録する必要があります。

ウェイティングリストに登録するには、Figmaの右下に表示されているクエスチョンマークのボタンから、[UI3とAIのウェイティングリストに参加する]をクリックします。

Figmaのウェイティングリストの登録ボタンのスクリーンショット

Config 2024での発表

Config 2024では、UIの刷新の他にも、AI関連機能「Figma AI」の導入が発表されました。詳細は、こちらの記事で紹介しています。

参考

Xに共有する Blueskyに共有する Misskeyに共有する LINEに共有する Threadsに共有する
著者のアイコン画像

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。