Figmaの新UI: UI3のナビゲート
この機能を使用できるユーザー
- 限定ベータ版をすべてのプランで使用できます
- 新デザインになったFigmaにアクセスできない場合は、しばらくお待ちください。これらの更新は今後数か月で提供されます。Figmaを初めてご利用になり、新デザインのバージョンを自動的に使用する場合は、ガイドを参照してデザインファイルを確認することをお勧めします。
Config 2024では、UI3という新デザインのFigmaが導入されました。このガイドは、Figmaの旧デザインから、どのような変更が行われたかを知りたいユーザーを対象にしています。
Figmaの新デザインの理由
時間の経過とともに、Figmaは複雑さを増してきました。UI3はデザインエクスペリエンスを簡素化するための取り組みの1つです。Figmaデザインをデザイナーにとってより使いやすいものにするとともに、幅広いユーザーに利用しやすくすることが目的です。既存の製品(および今後の製品)のための一貫性のある基盤作りにも取り組んでいます。
新デザインでできること:
- サイズ調整や折りたたみに対応したパネルによって、インターフェースをきめ細かく制御できます
- キャンバス上の自分のデザインをより強調できます
- 機能の配置、グループ化、さまざまなコンテキストへの適応を改善することで、より直感的に使えるようにします
- 弊社の他の製品との一貫性を向上させ、Figmaデザイン、FigJam、開発モード、Figma Slidesの間を切り替えやすくします
ヒント: 新デザインについてもっと知りたい方は、次のブログ投稿をご確認ください。ユーザーの作業を中心に考えたFigmaの新デザイン
変更内容
ナビゲーションパネル
キャンバスの左側にあるナビゲーションパネルを再編成し、ファイルに関するすべての情報を1つの場所にまとめて、使いやすくしました。
UIの最小化
キャンバスを少し広く使いたい場合は、ナビゲーションパネルのUIを最小化できるようになりました。[Minimize UI (UIの最小化)]をクリックすると、ナビゲーションパネルとプロパティパネルの両方が折り畳まれます。
UIを最小化した状態でキャンバス上の何かを選択すると、プロパティパネルが一時的にバックアップとして開き、それぞれのプロパティのコントロールにアクセスできます。
ファイル名と場所
ファイル名の横のドロップダウンアイコンをクリックして、移動する、ライブラリを公開する、ブランチを作成する、バージョン履歴を表示するなどのファイルのアクションを実行します。
[アセット]タブ
コンポーネントの検索、参照、挿入を、[アセット]タブから簡単に行えるようにしました。
ツールバー
新しいツールバーでは、デザインツールがエディタの下の方に移動し、キャンバスの作業スペースが広くとれるようになりました。新しいアクションメニューには、まったく新しいAI機能も導入されました。
注: FigmaデザインのAI機能は今後数か月以内に提供されます。詳細→
アクション
[アクション]はツールバーのまったく新しい項目です。想像をすばやく現実に変えられるようにすることを最も重視しています。ここから、FigmaのすべてのAIツール、一般的な生産性アクション、プラグインとウィジェット、コンポーネントなどにアクセスできます。
開発モードに入る
ツールバーで[開発モード]にアクセスできるようになったため、Figmaデザインでモード間の切り替えを簡単に行えます。
プロパティパネル
プロパティパネルの[デザイン]ビューが使いやすくなり、プロパティが最新のワークフローに一致するようにグループ化されるようになりました。
プロパティパネルのサイズも変更できます。長い名前のコンポーネントを操作するときに便利です。
プロパティラベル
UI3では新機能として、[プロパティラベル]をオンにして、それぞれのプロパティの実行内容を明確に把握できるようになりました。
プロパティラベルをオンにするには、プロパティパネルの100%ズームパーセンテージの横のドロップダウンメニューをクリックして、[プロパティラベル]を選択します。
選択アクション
プロパティパネルの新機能の1つは、選択オブジェクトで実行できるアクションが表示されるヘッダー行です。
たとえば、マスクの適用、コンポーネントの作成、ブール演算を実行するボタンがあります。[その他]メニューに隠れている場合もあります。
レイアウト
レイアウトには、幅や高さなどオブジェクトのレイアウトに関連するすべてのプロパティが含まれています。
フレームの[オートレイアウトの使用]をクリックすると、[レイアウト]ラベルが[オートレイアウト]に変化し、すべてのオートレイアウトプロパティが使用できるようになります。
位置
キャンバス上のオブジェクトの位置に関連するすべてのプロパティにアクセスできるようになりました。[位置]の制約項目などがあります。
ヒント: プロパティパネルから自分にスポットライトを当てられるようになりました。スポットライトが当てられると、左右のパネルとツールバーが最小化され、作業領域が広がります。
機能の移動先
次のリストは、移動された各機能と移動先のリストです。
旧デザイン | 新デザイン | |
編集アクセス権を依頼ファイルに対して |
||
絶対位置絶対位置はオートレイアウトを無視するに変わりました。 オートレイアウトを無視すると、オートレイアウト構造に従わずに、オブジェクトをオートレイアウトフレーム内に手動で位置付けることができます。 オートレイアウトを無視するには、オートレイアウトフレームの子を選択して、プロパティパネルでをクリックします。 |
||
オブジェクトの配置配置コントロールは、オブジェクトを親レイヤーに揃えたり、複数のオブジェクトを互いに整列させたりするのに便利です。 2つ以上のオブジェクトを選択して、いずれかの配置ツールをプロパティパネルの[位置]でクリックします。 |
||
オートレイアウトフレーム上でオートレイアウトを使用すると、コンテンツの変更とそれぞれの画面サイズに応じて動的に調整されます。 フレーム上のオートレイアウトを使用するには、をプロパティパネルの[レイアウト]セクションでクリックします。 |
||
幅と高さの値のオートレイアウトオートレイアウトフレームでは、幅と高さの値がサイズ変更動作と組み合わせられるようになりました。これらの値は次の場所で確認できます。
|
||
ブレンドモードブレンドモードで、2つのレイヤーをどのようにブレンドするかを定義します。 ブレンドモードを適用するには、オブジェクトを選択し、をクリックして([外観]の横)、モードを選択します。 |
||
コンテンツをクリップ[コンテンツをクリップ]では、親フレームの境界を越えるレイヤーの部分を非表示にすることができます。 [コンテンツをクリップ]チェックボックス([レイアウト]の下)で、コンテンツを表示するか非表示にするかを選択します。 |
||
コンポーネントのプロパティコンポーネントプロパティは、コンポーネントの変更可能な部分です。特定のデザインプロパティに結び付けることで、他のユーザーがコンポーネントのどの部分を変更できるかを定義します。 コンポーネントに使用可能なコンポーネントプロパティがある場合は、プロパティパネル内のフレームの名前の下で見つけることができます。 |
||
制約制約は、親フレームのサイズを変更したときに、レイヤーがどのように動作すべきかをFigmaに指示します。 子レイヤーを選択した状態では、[制約]アイコンがプロパティパネルの[位置]セクション内のXとYの位置の値の横に表示されます。 |
||
角の半径角の半径は、オブジェクトの角を丸くするプロパティです。 オブジェクトを選択した状態で、角の半径フィールドを[外観]で選択して値を変更します。 をクリックしてそれぞれの角を個別に変更することもできます。 |
||
ファイル名、プロジェクト名、ファイルアクションファイルの名前、プロジェクト、ファイルアクションドロップダウンはナビゲーションパネルに移動しました。 |
||
マスクオブジェクトの特定の領域を表示しながら残りの領域を隠す場合に、マスクを使用します。 オブジェクトを選択した状態で、[マスクとして使用]をクリックして、マスクとしてのオブジェクトとともにマスクグループを作成します。使用可能なアクションの数によっては、[マスクとして使用]が[その他]メニューに表示される場合があります。 |
||
マルチ編集マルチ編集では、フレーム、グループ、セクションにわたる複数のレイヤーを選択し、同じ編集をそれらに一括して適用できます。 プロパティパネルでをクリックして、マルチ編集を有効にします。 |
||
プラグインとウィジェットプラグインとウィジェットにアクセスするには、ツールバーから[アクション]を開いて、[プラグインとウィジェット]タブをクリックします。 |
||
オブジェクトの幅または高さのサイズ変更または対象に合わせたサイズ変更オブジェクトの幅と高さを[レイアウト]で変更します。アイコンをクリックし、フレームのサイズを子レイヤーに合わせて変更することもできます。 |
||
回転回転または反転では、それぞれの向きを変更してオブジェクトを操作できます。オブジェクトを選択した状態で、[位置]を検索して以下の手順を実行します。
|
||
オブジェクトの表示または非表示キャンバス上のオブジェクトを非表示にするには、([見え方]の横)をクリックします。再度表示するには、をクリックします。 |
||
テキストテキストはタイポグラフィーと呼ばれるようになりました。
|
||
バリアブルモードバリアブルモードはデザインの異なるコンテキストを表します。1つのモードには、コレクション内のバリアブルの一連の値が含まれています。 バリアブルコレクションに複数のモードがある場合は、レイヤーおよび要素のモードを切り替えて、さまざまなコンテキストのデザインをすばやく変更できます。 オブジェクトが複数のモードとともにバリアブルにバインドされている限りは、([見え方]の横)をクリックしてさまざまなモードを切り替えることができます。 |
||
バリアントの追加バリアントでは、類似するコンポーネントを単一のコンテナにグループ化して整理することができます。コンポーネントインスタンスを挿入すると、コンポーネントセットのバリアントプロパティ間で切り替えることができます。 バリアントを追加するには、メインコンポーネントを選択して、プロパティパネル内のコンポーネント名の横の[バリアントを追加]をクリックします。 |
||
ベクターパスを編集ベクターパスを編集するには、[オブジェクトの編集]([ベクター]の横)をクリックします。 複数のベクターパスを選択すると、[boolean operations (ブール演算)]メニューが表示されます。このメニューから、以下の演算を実行できます。
|
||
ズーム/表示オプション[ズーム/表示オプション]メニューから、ズーム設定の調整、またはレイアウトグリッドやマルチプレイヤーカーソルなどの表示オプションの設定を行えます。 |
旧デザインに戻る方法
行き詰った場合に、旧デザインに簡単に戻れるようにしました。デザインファイル内からヘルプメニューを開いて、[Go back to previous UI (旧UIに戻る)]をクリックします。
後から切り替えることを決めた場合は、このメニューに戻っていつでも自由にリデザインを試すことができます。