更新日: 2024 / 10 / 16

Figmaでルーラー(定規)を表示する方法とガイド線の作り方

カテゴリー: 初心者のFigma入門

Figmaでルーラー(定規)を表示する方法とガイド線を作る方法に加え、非表示にする方法やガイド線を個別に削除する方法を紹介します。

FigmaでもPhotoshopのようにガイド線を引くことができるのでページのレイアウトなどに使用することができます。

  1. Figmaでルーラー(定規)を表示する方法
  2. Figmaのルーラー(定規)を非表示にする方法
  3. Figmaでガイド線を出す方法
  4. Figmaでガイド線を非表示にする方法
  5. Figmaのガイド線を削除する方法
  6. まとめ

Figmaでルーラー(定規)を表示する方法

Figmaでルーラー(定規)を表示するには次の2つの方法があります。

  • Figmaのメニューの「表示」から「定規」を選択
  • キーボードで、Shift+Rで表示

メニューから表示するには、左上のメニューの「表示」から「定規」を選択します。

Figmaでルーラー(定規)を表示する方法

キーボードショートカットでShift+Rでも定規を表示可能です。

定規を表示するとデザイン画面の上と左に目盛が表示されるようになります。

Figmaでルーラー(定規)を表示する方法 表示

Figmaのルーラー(定規)を非表示にする方法

表示したルーラーを非表示にするには表示と同じやり方で表示/非表示を切り替えることができます。

  • ショートカットのShift+Rで非表示にする
  • Figmaのメニューの「表示」から「定規」のチェックをはずして非表示にする
  • ルーラー上で右クリックメニューから非表示にする

ルーラーを非表示にするには表示と同じくショートカットやFigmaメニューから非表示にできます。

ルーラー上で右クリックして削除メニューを表示させることもできます。

Figmaでルーラー(定規)を非表示にする方法

Figmaでガイド線を出す方法

Figmaでガイド線を作成するには、ルーラー(定規)を表示した後マウスを目盛に持っていって、目盛をドラッグすればガイド線を出すことができます。

Figmaでガイド線を出す方法

ガイド線は出した後も移動することができます。複数のガイド線を出してレイアウトのガイドを作成できます。

また、ガイド線をクリックして有効化すると線が青色になり、その状態でキーボードの矢印キーを押すと上下や左右に細かく微調整することもできます。

Figmaでガイド線を出す方法

Figmaでガイド線を非表示にする方法

作成したガイド線はルーラーと同じ方法で非表示にできます。

  • ショートカットのShift+Rで非表示にする
  • Figmaのメニューの「表示」から「定規」のチェックをはずして非表示にする

ガイド線はルーラーと同じ方法で非表示にできます。

非表示にしたガイドは削除されるわけではなく、ルーラーを表示させると元に戻すことができます。

Figmaのガイド線を削除する方法

非表示ではなくガイド線を削除するには、削除したいガイド線を選んでバックスペースか右クリックメニューから削除することができます。

  • ガイド線の上で右クリックメニューから削除を選択
  • ガイド線をクリックして有効にした状態でキーボードのバックスペースで削除する

Figmaのガイド線を削除する方法

削除したガイド線はルーラーの再表示でも元に戻りません。

元に戻すには、Figmaのメニューの「編集」から「元に戻す」を選ぶか、command + zで戻すことができます。

まとめ

Figmaを使ってデザインすることが多くなってきましたが、ちょっとした作業ならPhotoshopやイラレよりもサクサク作業できるのでかなり快適。

ルーラーやガイド線を利用して細かいレイアウトの調整もできるのでぜひ活用してみてください。