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

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

Figmaは、デザイナーが最大限の創造性を発揮できる環境を提供するために、ユーザーのフィードバックを取り入れつつインターフェースを改良してきました。
新しいUIの最大の特徴の一つは、Figmaキャンバスの再設計です。作業空間を最大限に活用でき、重要なツールを常に手元に保ちつつ、集中しやすい環境を提供します。
ツールバーをキャンバスの下部に移動し、サイドパネルをリサイズ可能にしました。これにより、全体的により広々とした印象を受けるデザインに仕上がっています。

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

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

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

さらに、Figmaのエコシステムが拡大する中で、統一感のあるユーザー体験を提供するための工夫が施されています。FigJam、Figma Design、Figma Slidesといったツール間をスムーズに切り替えられるよう、スリムなツールバーとフローティングパネルが導入されました。
UI3を使う方法
Figma UI3は、2024年の間はベータ版として無料で提供されます。場合によっては、ベータ版の使用制限を導入する可能性があるとのことです。また、Figma AIの一般提供が開始されたら、価格などの詳細を発表するとしています。
現在、Figma UI3はベータ版として提供されており、利用するにはウェイティングリストに登録する必要があります。
ウェイティングリストに登録するには、Figmaの右下に表示されているクエスチョンマークのボタンから、[UI3とAIのウェイティングリストに参加する]をクリックします。

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

参考
記事をシェア
フォローして最新情報を入手
Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。
-1.png&w=1080&q=75)
生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。
Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。



![[何を報告していますか?]というタイトルのダイアログで[スパム]にチェックが入っているスクリーンショット](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fx-report-post-spam-selected.png&w=1920&q=75)

![Xの設定の[アクセシビリティ、表示、言語]>[表示]>[フォントサイズ]のスクリーンショット](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fx-android-font-size-settings.png&w=3840&q=75)

![[新しいXチャットへようこそ]というテキストが画面に大きく表示されており、その下には次の3つの説明が表示されている。[エンドツーエンドの暗号化:メッセージは、端末にかかわらずエンドツーエンドで暗号化されています。][最先端のプライバシー:Xを含め、他の人がメッセージを読むことはできません。][パスコードを設定:メッセージを保護するため、4桁のパスコードを設定してください。]これらの説明の下には、[パスコードを作成]という大きなボタンが配置されている](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fwelcome-to-new-chat.png&w=1920&q=75)


