Figma の UI を整える — サイドバー / メニュー / レイヤーパネルを非表示にしてキャンバスを広く使う

「Figma のサイドバーを一時的に隠してキャンバスを広く使いたい」「メニューや 3 点リーダーがどう動くのか把握しておきたい」「プレゼンで見せるときだけ UI を全部消したい」 — Figma を日常的に使っていると、UI 要素を表示・非表示する操作は意外と頻繁に出てきます。

この記事では、Figma の サイドバー / メニュー / レイヤーパネル / プレゼンモード を中心に、UI を整えるための操作を Mac / Windows 両方のショートカット付きで整理します。Adobe XD から移行してきた方にとっては、Figma の UI 構造そのものが新しく感じられるはずです。まずは公式の用語で全体像を把握しておくと、あとで困りません。

関連記事

Figma の日本語化（メニュー言語の切り替え） については Figma の日本語化ガイド を参照してください。本記事は UI 要素の表示・非表示と配置の Tips に焦点を絞っています。

📝 はじめに — UI を整えるとキャンバスが広く使える

Figma の標準 UI（UI3、2024 以降のデフォルト）は次の 4 つの要素で構成されています。

  • 左サイドバー (Navigation panel) — ファイル名 / メインメニュー / Layers / Assets
  • 右サイドバー (Properties panel) — Design / Prototype のプロパティ
  • Toolbar（画面下部中央、フローティング） — 基本ツール群 / Comment / Dev Mode / Actions
  • 画面右上のフローティングコントロール — アバター / Share / Present ボタン

画面上部の細い帯（以前の Figma UI の Top bar）は UI3 で廃止されており、デザインエリアは画面の左右パネル間に縦いっぱい広がります。デザイン作業のほとんどではこの構成のままで問題ありませんが、状況に応じて以下のような場面で UI を整理したくなります。

  • 広いキャンバスで集中して作業したい — 細かいピクセル調整、複雑な Auto Layout の組み立てなど
  • 画面共有やレビューでデザインを見せたい — UI ノイズなしでスクリーンショットを撮りたい
  • プレゼンや顧客提案で全画面表示したい — Figma の操作 UI を見せずにデザインだけを映したい
  • 特定のパネルだけを一時的に縮めたい — 右の Properties panel を細くしてキャンバスを横に広げたい

これらをそれぞれ手作業でやろうとすると、メニューを探したり、ウィンドウサイズを変えたりと余分な手間がかかります。Figma にはこういった操作のためのショートカットや UI が用意されているので、覚えてしまえば数秒で切り替えられます。

本記事では以下のテーマを扱います。

  1. Figma の UI 構造 — 公式名で各パネルを把握する（File タブ / Assets タブ / Properties panel など）
  2. Show/Hide UI — UI 全体を一括で隠す
  3. Minimize UI — 左サイドバーを最小化 + 右サイドバーをフローティング化してキャンバスを広くする
  4. タブの切り替え — 左サイドバー内の File と Assets を行き来する
  5. 3 点リーダー（⋯） — 省略表示の挙動と、隠れているコマンドの探し方
  6. プレゼンモード — フルスクリーンでデザインを見せる
  7. Mac / Windows の比較表 — ショートカットの違いを 1 つの表にまとめる

🎯 Figma の UI 構造をおさらい

操作 Tips に入る前に、Figma の UI 各部の 公式名 を整理しておきます。日本語の解説記事では「レイヤーパネル」「アセットパネル」と呼ばれることが多いですが、Figma の公式ドキュメントでは少し違う呼び方をしています。これを揃えておかないと、ショートカットや操作手順を調べたときに混乱しやすくなります。

左サイドバー（Left sidebar）

左サイドバーには、ファイル内のコンテンツを参照するためのタブが 2 つあります。

  • File タブ — Layers（レイヤー一覧）と Pages（ページ一覧）をまとめて表示するタブ。左サイドバーで最初に開かれている
  • Assets タブ — そのファイル内のコンポーネントや、有効化済みのチームライブラリのアセットを表示するタブ

「Layers タブ」「Pages タブ」は公式名ではない

日本語ブログでよく「Layers タブ」「Pages タブ」という呼称を見かけますが、Figma の現在の UI では Pages は File タブ内 に統合されています。Layers と Pages を別タブだと思って探すと見つからないので、公式名「File タブ」を起点に覚えておくほうがあとで困りません。

右サイドバー（Right sidebar / Properties panel）

右サイドバーの公式名は Properties panel（プロパティパネル）です。中には 2 つのタブがあります。

  • Design タブ — 選択中のレイヤーの位置・サイズ・塗り・線・エフェクトなど、デザインプロパティを編集する
  • Prototype タブ — プロトタイプ接続（トリガー / アクション / 遷移）を設定する

選択しているレイヤーの種類によって、Properties panel に表示される項目は動的に変わります。

左サイドバー上部の情報領域

UI3 では、ファイル名やメインメニューは 左サイドバー (Navigation panel) の上部 に配置されています。

  • メインメニュー（F の Figma ロゴ、左サイドバー最上部）
  • ファイル名 / 編集状態
  • ファイル操作ドロップダウン（ファイル名横のアイコン: 移動 / ライブラリ公開 / ブランチ作成 / バージョン履歴）
  • Minimize UI ボタン

画面右上のフローティングコントロール

画面右上の角には、共有とプレゼン関連のコントロール群がフローティング配置されています。

  • コラボレーターアバター（同じファイルを開いている人のアイコン）
  • 共有ボタン (Share)
  • Present ボタン（▶ アイコン、プレゼンモード起動）

→ 次節以降で扱う Present ボタン はここにあります。

Toolbar（画面下部中央、フローティング）

UI3 では、画面下部中央に Toolbar がフローティング表示されており、主要なツール類が集約されています。

  • 移動 / フレーム / シェイプ / テキスト等の基本ツール（中央）
  • コメントツール（ショートカット: C）
  • Dev Mode 切り替えトグル（ショートカット: Shift + D）
  • Actions メニュー（AI 機能などへの入り口、右側）

🎬 UI 全体を隠す（Show/Hide UI）

Figma の UI を 一括で非表示 にしたいときは、Show/Hide UI 機能を使います。左右のサイドバーも、画面下部の Toolbar も、画面右上のコントロール群も全部消えて、キャンバスとデザインだけが残ります。

⚠️ まず最初に確認すべきこと — 自分の環境のショートカット

Show/Hide UI のショートカットは、OS とキーボードレイアウトの組み合わせごとに大きく異なります。Figma が物理的に同じ位置のキーに割り当てているため、レイアウトが違うとそのキーの「文字」も違うのが理由です。

最も確実な確認手順は次の通りです。

  1. 画面右下の ? アイコン をクリック
  2. Keyboard Shortcuts パネルが開く
  3. 「Show/Hide UI」または「UI の表示/非表示」項目に表示されているキーが、自分の環境で実際に動く組み合わせ

環境別の代表的なショートカット

環境ショートカット
Windows JIS（日本語配列）@ キー単独
Windows US 配列Ctrl + \
Mac US 配列Cmd + \ または Cmd + .
Mac 欧州系（独 / 仏 / 西 等）Cmd + .

→ 表は参考程度に。確実なのは前述の ? アイコンでの確認 です。

ショートカットが動かなくても焦らない

「他の人が紹介していたショートカットを試したのに動かない」「ネットの記事に書かれている Ctrl + \ が反応しない」というケースは、動かないのが普通です。レイアウト依存のため、自分の環境向けのキーを ? アイコンから確認するか、次節の Actions menu 経由で実行してください。

Actions menu から実行する（旧 Quick actions、全環境共通の確実な方法）

ショートカットが分からないとき / 動かないときは、Actions menu（旧称 Quick actions）経由が確実です。全 OS / 全レイアウトで共通で動きます。

  1. Actions menu を開く:
    • Mac: Cmd + K（公式推奨）または Cmd + / / Cmd + P
    • Windows: Ctrl + K（公式推奨）または Ctrl + / / Ctrl + P
  2. 検索ボックスに以下のいずれかを入力:
    • Figma の UI 言語が日本語の場合: 表示 / 非表示 / ui
    • Figma の UI 言語が英語の場合: show or hide
  3. 候補から「UI の表示/非表示」または「Show/Hide UI」を選んで実行

Actions menu は Figma のほぼ全ての操作を検索できる仕組みで、ショートカットを覚えていない操作にもアクセスできます。コマンド名は UI 言語に合わせて翻訳される ため、検索文字列も UI 言語に合わせる必要がある点に注意してください。

元に戻す

UI を非表示にした状態で同じショートカットをもう一度押すと、UI が元通り表示されます。トグル動作なので、覚えるのは 1 つだけで済みます。

UI 全体を隠すほど思い切らずに、必要な操作領域は残したまま作業エリアを広げたい場面では Minimize UI が便利です。

実行すると何が起きるか

パネル動作
左サイドバー最小化されて、ファイルアイコン / ファイル名 / 「UI を最小化」アイコン（元に戻すボタン）の 3 要素だけが小さなメニューバーとして残る
右サイドバー中の項目はそのまま、見た目がページ右端のフローティング UI に変化（表示領域は実質変わらず）
Toolbar / 画面右上のコントロールそのまま残る

「左パネルだけが大幅に最小化」+「右パネルは見た目だけフローティング化」という非対称な変化です。実質的に左サイドバーの幅が空く分、キャンバスが広く使えるようになります。

確実な実行方法（優先度順）

  1. 左サイドバー上部の「UI を最小化」アイコン をクリック — 全環境共通で動作（最も推奨）
  2. Actions menu（Cmd + K / Ctrl + K）から 最小化 で検索して実行 — 全環境共通
  3. ショートカット — レイアウト依存:
環境ショートカット
Windows JIS（日本語配列）Ctrl + Shift + @
Windows US 配列 / Mac US 配列Shift + \
その他のレイアウト? アイコンで自分の環境を確認

→ Figma のショートカットは US QWERTY 配列前提 で設計されているため、JIS Windows をはじめ非 US レイアウトでは別のキーが割り当てられます。Show/Hide UI と同じパターンです。

元に戻す

最小化された左サイドバー内の 「UI を最小化」アイコン（最小化に使ったのと同じアイコン）をクリックすると元のレイアウトに戻ります。ショートカットを使った場合は同じショートカットがトグル動作します。

左サイドバーだけ / 右サイドバーだけ非表示にしたい

「Properties panel だけ縮めて Layers は見たい」「Layers だけ縮めて Properties panel は使いたい」というケースもあります。残念ながら、左右どちらか片方だけを完全に非表示にする専用ショートカットは Figma に用意されていません（Figma Forum で機能要望として継続的に挙がっています）。

現状の代替手段は以下です。

  • Minimize UI を使う — 前節の Minimize UI で 左サイドバーをほぼ最小化 + 右サイドバーは見た目のみフローティング化 できる。「左パネルだけほぼ消したい」用途には最も近い挙動
  • 片方のサイドバーの幅を最小まで縮める — サイドバー右端（または左端）の境界をドラッグして幅を縮める。完全な非表示ではないが、表示面積を最小化できる
  • Show/Hide UI で全部隠して、必要なときだけ表示 — 全 UI（左右サイドバー + Toolbar + 画面右上のコントロール）を一気に隠すか、すべて表示するかの 2 択で運用する

幅調整は記憶される

サイドバー幅をドラッグで調整すると、その幅は次回ファイルを開いたときも保持されます。常に細めの Properties panel で作業したい人は、一度幅を調整しておけば毎回調整する必要はありません。

📂 左サイドバーの File / Assets タブを切り替える

左サイドバーには File タブ と Assets タブ の 2 つがあり、用途に応じて行き来します。

File タブの中身

File タブには以下の 2 セクションがあります。

  • Pages — ファイル内のページ一覧。デザインを論理的に分割する単位で、ページごとに独立したキャンバスを持つ
  • Layers — 現在開いているページ内のレイヤー / フレーム / グループの階層構造

Pages セクションは File タブの上部にあり、クリックでページ一覧を展開できます。Layers セクションは Pages の下に常に表示されていて、選択中のページの中身を表示しています。

Assets タブの中身

Assets タブには、そのファイル内のコンポーネントと、有効化済みのチームライブラリのコンポーネントが一覧表示されます。検索ボックスがあり、コンポーネント名で絞り込めます。Assets からキャンバスに直接ドラッグするとインスタンスを配置できます。

タブ切り替えのショートカット

File / Assets タブの切り替えにはキーボードショートカットが用意されています。

タブMacWindows
File タブを開くOption + 1Alt + 1
Assets タブを開くOption + 2Alt + 2

コンポーネントを大量に配置するときや、Layers と Assets を頻繁に行き来する場面では、マウスでクリックするより手早く切り替えられます。

⋯ 3 点リーダー（⋯）の挙動と省略表示

Figma の UI には、所々に ⋯（3 点リーダー / overflow menu） が表示されています。これはコンテキストやサイドバー幅に応じて、表示しきれないコマンドを格納するための省略 UI です。

よく見かける場所

  • Properties panel の各セクション右上 — そのセクションに関する追加コマンド（例: 塗りセクションの ⋯ → 塗りスタイルとして保存 など）
  • レイヤー右クリックメニュー内 — 階層が深いメニューで一部が ⋯ に集約されることがある

開き方

⋯ アイコンをクリックすると、隠れているコマンドが展開されます。マウスホバーだけでは開かないので、必ずクリックが必要です。

「探していた機能が見つからない」と感じたら

Properties panel で「以前はあったはずのボタンが見つからない」と感じる場面の多くは、パネル幅が狭くなって ⋯ に格納されているケースです。サイドバー幅を広げる、もしくは ⋯ をクリックして隠れたコマンド一覧を確認すると見つかることが多いです。

それでも見つからない場合は、Actions menu（Cmd + K / Ctrl + K）で機能名を検索するのが確実です。

🎥 プレゼンモードでの全画面表示

プレゼンや顧客提案でデザインを見せるときは、Figma の プレゼンモード（Presentation view） が便利です。UI を完全に非表示にして、デザインだけを画面に映せます。プロトタイプを設定している場合は、リンクをクリックして遷移する動作も再現されます。

起動方法

  • 画面右上の Present ボタン（▶ アイコン）をクリック
  • または ショートカット:
    • Mac: Cmd + Option + Enter
    • Windows: Ctrl + Alt + Enter

別ウィンドウまたは別タブでプレゼンモードが開きます。

フルスクリーン化

プレゼンモードが開いたあと、さらに完全フルスクリーンにしたい場合は F キー を押します。ブラウザ UI も含めて画面いっぱいにデザインが表示されます。

終了する

  • フルスクリーンの解除: F キー（toggle）または Esc
  • プレゼンモード自体を閉じる: ウィンドウまたはタブを閉じる

プレゼンモードはプロトタイプ再生も兼ねる

Figma のプレゼンモードは、純粋なフルスクリーン表示だけでなく、プロトタイプ接続を設定している場合は インタラクション再生 の役割も担います。XD のプレビュー機能と似た位置づけですが、Figma ではキャンバス編集と同じファイル内でショートカット 1 つで切り替えられます。

⌨️ Mac / Windows のショートカット比較表

本記事で扱った UI 操作を、Mac と Windows のショートカットで一覧化しておきます。

操作MacWindows
UI 全体を隠す 1レイアウト依存レイアウト依存
Minimize UI 2US: Shift + \US: Shift + \ / JIS: Ctrl + Shift + @
File タブを開く 3Option + 1Alt + 1
Assets タブを開く 4Option + 2Alt + 2
Actions menu 5Cmd + K / Cmd + /Ctrl + K / Ctrl + /
プレゼンモード起動 6Cmd + Option + EnterCtrl + Alt + Enter
プレゼンモードのフルスクリーン 7FF
フルスクリーン終了 8Esc / FEsc / F

注釈:

  1. JIS は @ 単独、US は Ctrl + \ 等。? アイコンで自分の環境を確認
  2. 左パネル最小化 + 右パネルフローティング化。レイアウト依存、? アイコンで確認
  3. Layers / Pages を表示
  4. コンポーネント一覧を表示
  5. 全コマンド検索の入口（旧 Quick actions）
  6. 画面右上の ▶ ボタンと同じ動作
  7. プレゼンモード起動後に使う、toggle 動作
  8. どちらでも解除できる

🛠️ 用途別の使い分け Tips

本記事で扱った操作を、実際の作業シーン別に組み合わせる例を挙げます。

ピクセル単位の細かい調整に集中したいとき

  • Minimize UI で左サイドバーを最小化（左サイドバー上部のアイコン、または Actions menu から 最小化、ショートカットは US: Shift + \ / JIS: Ctrl + Shift + @）
  • 画面下部の Toolbar は残るのでツール切り替えは可能
  • Properties panel は最小化されているので、数値を見たいときだけドラッグで戻す

スクリーンショットを綺麗に撮りたいとき

  • Show/Hide UI で UI 全体を非表示（環境ごとのキーは ? アイコンで確認、または Actions menu から 表示 / 非表示 / ui（日本語 UI）/ show or hide（英語 UI））
  • キャンバスとデザインだけが残る
  • スクリーンショットを撮ったあと、同じ操作で戻す

顧客プレゼンや画面共有でデザインを見せるとき

  • 画面右上の Present ボタン（▶ アイコン）、または Cmd/Ctrl + Option/Alt + Enter でプレゼンモード起動
  • 続けて F でフルスクリーン化
  • ブラウザの UI まで全部消えるので、デザインだけがディスプレイ全面に表示される
  • 終わったら Esc で全画面解除、ウィンドウを閉じてプレゼンモード終了

コンポーネントを大量に配置したいとき

  • 左サイドバーを Assets タブ に切り替え（Option + 2 / Alt + 2）
  • 検索ボックスでコンポーネント名を絞り込み、ドラッグで配置
  • Properties panel が広く感じる場合は、サイドバーの境界をドラッグで幅調整する（Minimize UI は左パネル最小化 + 右パネルフローティング化なので、右パネルだけ縮めたいときはドラッグが適切）

隠れたコマンドを探したいとき

  • まずは UI 内の ⋯ をクリックして展開コマンドを確認
  • 見つからなければ Cmd + K / Ctrl + K で Actions menu を開き、機能名で検索

❓ FAQ

Q1. ショートカットを覚えるのが大変です。最低限どれを覚えればよい？

2 つだけ覚えれば日常作業はほぼカバーできます。

  • Cmd + K / Ctrl + K（Actions menu、迷ったら開く）
  • Minimize UI（左サイドバー上部のアイコン or Actions menu から 最小化、ショートカットは環境依存で US: Shift + \ / JIS: Ctrl + Shift + @）

UI 全体トグル（Show/Hide UI）は環境ごとにキーが違うため、? アイコンで確認するか、Actions menu から 表示 / 非表示 / ui（日本語 UI）または show or hide（英語 UI）で実行するのが確実です。Actions menu さえ覚えれば、忘れたショートカットも全てそこから検索できます。

Q2. 「右サイドバーだけ非表示」のショートカットはありますか？

専用のショートカットはありません。Figma Forum で機能要望として継続的に挙がっていますが、執筆時点では実装されていません。代替として、Properties panel の幅をドラッグで縮める（完全な非表示ではないが表示面積を最小化できる）か、Show/Hide UI で UI 全体を一旦非表示にする（必要なときに同じショートカットで戻す）方法があります。

なお、Minimize UI は 左サイドバーを最小化 する機能で、右サイドバーはフローティング化されたまま残るため、「右だけ非表示」用途には適しません。

Q3. Show/Hide UI のショートカットが動きません

Show/Hide UI のショートカットは OS × キーボードレイアウト で割当てキーが大きく変わります。Web の記事で見た Ctrl + \ や Cmd + . が動かないのは普通のことです。

確実な対処:

  1. 画面右下の ? アイコン をクリックして Keyboard Shortcuts パネルを開く
  2. 「Show/Hide UI」項目に表示されているキー組み合わせが、自分の環境で動く正しいショートカット

主なレイアウトの例:

  • Windows JIS（日本語配列）: @ キー単独
  • Windows US 配列: Ctrl + \
  • Mac US 配列: Cmd + \ または Cmd + .
  • Mac 欧州系: Cmd + .

ショートカット自体を使わない代替手段:

  1. Actions menu（Mac: Cmd + K / Windows: Ctrl + K）を開いて 表示 / 非表示 / ui（日本語 UI）または show or hide（英語 UI）で検索
  2. 右クリックメニュー（キャンバス上）から「Show/Hide UI」を実行

Q4. レイヤーパネルが見当たりません

公式の「Layers タブ」は存在せず、Layers は File タブの中 にあります。左サイドバーが Assets タブになっている場合は、File タブをクリックしてください。サイドバーが最小化状態の場合は、左サイドバー上部の「UI を最小化」アイコン（最小化時のメニューバー内）をクリックすると元に戻ります。

Q5. ⋯（3 点リーダー）を完全に展開しておく方法はありますか？

⋯ はサイドバー幅やコンテキスト次第で表示されるので、常時すべて展開する設定は提供されていません。Properties panel の ⋯ は サイドバー幅を広げると一部が自然と展開 されることがあります。レイヤー右クリックメニュー内の ⋯ は各セクション固有の追加コマンドなので、必要なときにクリックして開く運用になります。

Q6. プレゼンモードでフレームが画面に収まりません

プレゼンモードのスケール設定が「Actual size (100%)」になっていると、画面より大きなフレームははみ出します。プレゼンモード上部の歯車アイコンから「Fit width and height」に変更すると、フレーム全体が画面に収まるように表示されます。

公式の Scale options は Actual size (100%) / Responsive / Fit width / Fit width and height / Fill screen の 5 種類です。プレゼンモード中に Z キーを押すと、これらを順に切り替えられます。

Adobe XD から Figma への移行を始める Figma Community から無料でインストール

Figma Communityから1クリックで追加できます

🎯 まとめ

Figma の UI 操作 Tips は、覚えてしまえばどれも数秒で実行できる小さな操作ばかりです。それでも作業中の累積時間で見ると、ショートカットを使えるかどうかで集中の途切れ方がかなり変わってきます。本記事で扱った内容を簡潔に振り返ります。

  1. UI 全体を一括で隠す → 環境依存（? アイコンで確認、または Actions menu から 表示 / 非表示 / ui）
  2. Minimize UI で左パネル最小化 + 右パネルフローティング化 → 左サイドバー上部のアイコン or Actions menu、ショートカットは環境依存（US: Shift + \ / JIS: Ctrl + Shift + @）
  3. 左サイドバーは File タブと Assets タブで構成 — Pages は File タブ内
  4. 右サイドバーは Properties panel — Design / Prototype の 2 タブ構造
  5. ⋯ は UI 幅やコンテキスト次第の省略表示 — 見つからない機能は Actions menu で検索
  6. プレゼンモード → Cmd/Ctrl + Option/Alt + Enter → F でフルスクリーン

困ったときの最終手段は Actions menu（Cmd + K / Ctrl + K） です。ショートカットを忘れていても、機能名で検索すれば実行できるので、まずはここを覚えておくと安心です。

XD からの移行直後は、Figma の UI 構造そのものが新しく感じられるはずです。File タブ / Assets タブ / Properties panel の 公式名 で覚えておくと、Figma 公式ドキュメントやコミュニティの情報を調べたときにも素早く理解できるようになります。

Pixel Fine Converter をインストール Figma Community から無料

Figma Communityから1クリックで追加できます

関連記事