話題の記事

デザインの確認などレビューする人向けにFigmaの使い方をまとめました。

Figmaを使ってレビューすることが増えましたね。そんなレビューする人に向けて、とりあえずの使い方をまとめました。

レビュー等でデザインの確認を目的とした、主にViewer権限を持ったユーザー向けのFigmaの使い方についてまとめました。

Viewer権限でも細かく見ていくとざまざまな機能がありますが、ここでは必要な機能+知っていると便利になる機能を紹介しています。

この記事では次の点にご注意ください。

  • ショートカットの表記でcmd/ctrlのようにスラッシュで区切られている場合、スラッシュの前がMac、後ろがWindowsの修飾キーを表します。
  • ショートカットはUSキーボードを基準としているため、JISキーボードだとキーコンビネーションが異なるかもしれません。(筆者はUSキーボードユーザーのため、JISでの確認はしていません)。
  • ブラウザ版の利用を想定しています。
  • Figmaアカウントは取得済みとしています。

とりあえずこれだけは覚えておくこと

お急ぎであれば、まずは次の4+1つを覚えるとよいでしょう。

  • Spaceキーを押しっぱなしにしてドラッグすると、画面をつかんで移動できる(→詳細
  • shift + 0で100%表示、shift + 1で全体を表示できる(→詳細
  • Cキーを押すと、コメントを挿入できる(→詳細
  • 何かあったらとりあえずescキーを連打する
  • 日本語化は、ホーム画面右上のアカウント内にあるSettingsを開き、Accountタブ内にある「Language」で変更する(→詳細

ではここから詳しく見ていきます。

Figmaの画面構成

まずはおさらいとして、Figmaの画面構成を確認しておきます。

Figmaのウィンドウは大きく、ツールバー・左サイドバー・キャンバス・右サイドバーの4つのエリアに分かれています。

ツールバー

上部のツールバーでは、メニューやツールの切り替えなどを行います。左から次のような機能を持ちます。

  • メニュー:Fimgaのアプリケーションメニューを開きます。
  • ムーブツール(Move):オブジェクトを選択するツールです。名前は「移動」ツールですが、Viewer権限だと移動はできません。
  • ハンドツール(Hand tool):画面をつかんで移動させるためのツールです。
  • コメントツール(Add comment):コメントを挿入するツールです。
  • ドキュメントタイトル:表示しているドキュメント名が表示されます。すぐ右の下向きの矢印アイコンをクリックすると、ドキュメントに関するメニューを表示できます。(今回の記事では扱いません)
  • ドキュメントを見ているユーザー:現在ドキュメントを開いているユーザーが表示されます。
  • ファイルの共有:共有モーダルダイアログが表示され、共有リンクの取得やドキュメントにアサインされているユーザーを確認できます。
  • プロトタイピング開始:ドキュメントにプロトタイピングが設定されている場合、再生が可能です。
  • 画面の拡大率:拡大率をはじめとした、画面表示に関するメニューが表示されます。

左サイドバー(ページとレイヤー)

左のサイドバーにはページとレイヤーの一覧があります。

ページリストはデフォルトで折りたたまれており、ページ名をクリックすると展開します。

レイヤーリストは、配置されているオブジェクトの一覧ですが、デザイン確認で使うことはおそらくないでしょう。

キャンバス

中央はキャンバスで、ここにいわゆる“デザイン”が並びます。

右サイドバー(コメント・インスペクター・書き出し)

右にサイドバーがありコメント関連の操作やドキュメント・オブジェクトの情報の確認、画像の書き出しが実行できます。

Figmaのドキュメントに招待されたら

Figmaのホーム画面(ログイン直後の画面)に通知やアカウントのメールアドレスに招待状が届きます。

通知から承諾する場合は、ホーム画面右上の通知アイコンから一覧を開き、Acceptしてください。

Figmaで既に別のドキュメントを開いている場合は、メニューから「Back to files」を選択するとホーム画面に戻れます。

メールの場合、『「共有したユーザー」 has invited you to view the file "「共有されたファイル名」"』というメールが届きますので、メール中にある[Open in Figma]をクリックして開きます。

画面を動かしたい(スクロールしたい)

Hキーを押すとハンドツールに切り替わり、ドラッグすると画面をつかんだように移動できます。ムーブツールに戻す場合は、escキーを押してください。

またSpaceキーを押している間は、一時的にハンドツールへの切り替えも可能です。

マウスホイールやトラックパッドでスクロールの設定をしている場合、その操作でも画面をスクロールできます。

全体を見渡したい/表示を100%にしたい

キャンバス全体を表示したり、選択しているオブジェクトをセンターに表示したりできます。

全体を表示する

キャンバスに置かれているオブジェクトがすべてて見えるように、表示の拡大率を調整します。

  • メニュー:View → Zoom to fit
  • ショートカット:shift + 1

画面の拡大率を100%にする

ピクセル倍率が100%になるように表示されます。(いわゆるデバイスで使われる論理解像度)

  • メニュー:View → Zoom to 100%
  • ショートカット:shift + 0

選択しているオブジェクトをセンターに表示する

ムーブツールで選択しているオブジェクトが、画面いっぱいに収まるように表示されます。

  • メニュー:View → Zoom to Selection
  • ショートカット:shift + 2

いずれも、「メニューのView」の代わりに、ツールバーの画面の拡大率から選択できます。

画面の拡大率をちょうどいい感じに調整したい

いくつかの方法で画面の拡大率を変更できます。

ズームツールでざっくり調整する

Zキーを押している間はズームツール(ズームアップ)に切り替わり、クリックした場所を中心にズームインします。ズームアウトする場合は、Zキーに加えてOption/altキーを押してクリックしましょう。

またズームツール中にドラッグすると、囲った場所が画面いっぱいに表示されるように拡大できます。

ショートカットでざっくり調整する

ズームインのショートカットはcmd/ctrl + +、ズームアウトのショートカットはcmd/ctrl + -です。

マウスホイールで細かく調整する

cmd/ctrl + マウスホイールで微調整可能です。

任意の値を入力する

ツールバーの「画面の拡大率」からメニューを開き、任意の数値を入力します。

コメント関連

コメントを入れたい

Cキーを押すと、マウスポインタがコメントツールに替わり、クリックした場所にコメントを挿入できます。クリックする場所を間違えた場合、escキーで取り消せます。

カーソルをムーブツールに戻す場合は、escキーを押してください。

「@」を入力して通知を飛ばすユーザーの指定も可能です。

改行はshift + enter、送信はenterです。

コメントを編集したい

確定後も、コメント右の「…」から「Edit…」を選択して編集できます。

コメントを共有したい

SlackなどFigma外でやりとりする場合に、任意のコメントをURLとして共有可能です。

コメントウィンドウ上部の「…」を押下して「Copy link」を選択してURLをコピーできるので、貼り付けて共有しましょう。

コメントに返信する

返信したいコメントをクリックし、「Reply」エリアにタイプして返信できます。

コメントのバルーンを表示/非表示にしたい

コメントが多くなってくると、バルーンが邪魔になることがあります。メニューのView → Commentsを選択して表示と非表示の切り替えができます。

ショートカットはshift + C です。

プロトタイピングを再生したい

Figma ではプロトタイピングとして、画面遷移をシミュレートする機能があります。

ドキュメントにプロトタイピングが設定されている場合、ウィンドウ右上にある再生アイコン(右向きの三角)で再生できます。

プロトタイピングのリンク線を表示している場合は、開始のアートボードの左上にある再生アイコンをクリックしても再生可能です。

画像の「Flow 1」は任意の名前がつけられるため、別の名称になっている可能性があります。

画面遷移の接続線を表示/非表示したい

オブジェクトにアクションが設定されていれば、接続線である水色矢印の表示と非表示をshift + Eで切り替えられます。

接続線を表示すれば、プロトタイピングを再生しなくても、どのように遷移するかざっと把握が可能です。

アートボードを一意に指定する

FigmaではオブジェクトごとにURLが発行されています。テキストでやりとりする際に、同じような名前のアートボードがあっても、URLを伝えることで一意に指定が可能です。

URLを取得したいアートボード名の上で右クリックし、メニューの「Copy/Paste as」の中から、「Copy link」を選択しリンクをコピーします。

他のユーザーのカーソルを表示/非表示にしたい

Figmaは複数のユーザーが編集・閲覧できる仕組みになっており、ドキュメントにアクセスしているユーザーのカーソルも表示されます。

メニューのView → Multiplayer cursorsを選択するか、ショートカット:cmd + option/alt + \で切り替えができます。

確認したい場所にカーソルがかぶっている、他のユーザーの動きを追う必要がない場合などは非表示にするとよいでしょう。

ブラウザではなくデスクトップアプリケーションとして使いたい

ブラウザで使っていると、タブがどこかに行ったり「戻る」をしてしまったりと少しストレスになることがあります。 Windows版とMac版のデスクトップアプリが提供されているので、アプリが自由にインストールできるのであれば、こちらの利用をお勧めします。

ダウンロードページ

日本語化したい

ホーム画面の右上にあるアバターからメニューを開き、Settingを選択します。

モーダルダイアログが表示されるので、Accountタブ内にあるLanguageの「Change Languages」をクリックします。

「日本語」を選択して[Save]ボタンをクリックしてください。

アプリ版・ブラウザ版ともに、すでに開いている別タブがある場合、再読み込み(ブラウザのリロードやファイルの閉じて再度開くなど)をすると設定が反映されます。

最後に

1つのツール上でほとんどのことが完結してしまうため、便利な世の中になりましたね(ジジイ)。これ以外にも使える機能があるので、機会が訪れたら紹介したいと思います。

間違いがあったり、これが入ってないじゃないとかあれば、優しく教えてください。

では素敵なFigmaライフを!