デザインの確認などレビューする人向けに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）：コメントを挿入するツールです。
- ドキュメントタイトル：表示しているドキュメント名が表示されます。すぐ右の下向きの矢印アイコンをクリックすると、ドキュメントに関するメニューを表示できます。（今回の記事では扱いません）
- ドキュメントを見ているユーザー：現在ドキュメントを開いているユーザーが表示されます。
- ファイルの共有：共有モーダルダイアログが表示され、共有リンクの取得やドキュメントにアサインされているユーザーを確認できます。
- プロトタイピング開始：ドキュメントにプロトタイピングが設定されている場合、再生が可能です。
- 画面の拡大率：拡大率をはじめとした、画面表示に関するメニューが表示されます。
公式ヘルプ：Access design tools from the toolbar
左サイドバー（ページとレイヤー）
左のサイドバーにはページとレイヤーの一覧があります。
ページリストはデフォルトで折りたたまれており、ページ名をクリックすると展開します。
レイヤーリストは、配置されているオブジェクトの一覧ですが、デザイン確認で使うことはおそらくないでしょう。
公式ヘルプ（ページ）：Create and manage pages
キャンバス
中央はキャンバスで、ここにいわゆる“デザイン”が並びます。
右サイドバー（コメント・インスペクター・書き出し）
右にサイドバーがありコメント関連の操作やドキュメント・オブジェクトの情報の確認、画像の書き出しが実行できます。
公式ヘルプ：Design, prototype, and inspect (right sidebar)
Figmaのドキュメントに招待されたら
Figmaのホーム画面（ログイン直後の画面）に通知やアカウントのメールアドレスに招待状が届きます。
通知から承諾する場合は、ホーム画面右上の通知アイコンから一覧を開き、Acceptしてください。
Figmaで既に別のドキュメントを開いている場合は、メニューから「Back to files」を選択するとホーム画面に戻れます。
メールの場合、『「共有したユーザー」 has invited you to view the file "「共有されたファイル名」"』というメールが届きますので、メール中にある［Open in Figma］をクリックして開きます。
画面を動かしたい（スクロールしたい）
Hキーを押すとハンドツールに切り替わり、ドラッグすると画面をつかんだように移動できます。ムーブツールに戻す場合は、escキーを押してください。
またSpaceキーを押している間は、一時的にハンドツールへの切り替えも可能です。
マウスホイールやトラックパッドでスクロールの設定をしている場合、その操作でも画面をスクロールできます。
全体を見渡したい/表示を100%にしたい
キャンバス全体を表示したり、選択しているオブジェクトをセンターに表示したりできます。
公式ヘルプ：Adjust your zoom and view options
全体を表示する
キャンバスに置かれているオブジェクトがすべてて見えるように、表示の拡大率を調整します。
- メニュー：View → Zoom to fit
- ショートカット：shift + 1
画面の拡大率を100%にする
ピクセル倍率が100%になるように表示されます。（いわゆるデバイスで使われる論理解像度）
- メニュー：View → Zoom to 100%
- ショートカット：shift + 0
選択しているオブジェクトをセンターに表示する
ムーブツールで選択しているオブジェクトが、画面いっぱいに収まるように表示されます。
- メニュー：View → Zoom to Selection
- ショートカット：shift + 2
いずれも、「メニューのView」の代わりに、ツールバーの画面の拡大率から選択できます。
画面の拡大率をちょうどいい感じに調整したい
いくつかの方法で画面の拡大率を変更できます。
公式ヘルプ：Adjust your zoom and view options
ズームツールでざっくり調整する
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」は任意の名前がつけられるため、別の名称になっている可能性があります。
公式ヘルプ：Present designs and prototypes
画面遷移の接続線を表示/非表示したい
オブジェクトにアクションが設定されていれば、接続線である水色矢印の表示と非表示をshift + Eで切り替えられます。
接続線を表示すれば、プロトタイピングを再生しなくても、どのように遷移するかざっと把握が可能です。
公式ヘルプ：View prototype connections
アートボードを一意に指定する
FigmaではオブジェクトごとにURLが発行されています。テキストでやりとりする際に、同じような名前のアートボードがあっても、URLを伝えることで一意に指定が可能です。
URLを取得したいアートボード名の上で右クリックし、メニューの「Copy/Paste as」の中から、「Copy link」を選択しリンクをコピーします。
他のユーザーのカーソルを表示/非表示にしたい
Figmaは複数のユーザーが編集・閲覧できる仕組みになっており、ドキュメントにアクセスしているユーザーのカーソルも表示されます。
メニューのView → Multiplayer cursorsを選択するか、ショートカット：cmd + option/alt + \で切り替えができます。
確認したい場所にカーソルがかぶっている、他のユーザーの動きを追う必要がない場合などは非表示にするとよいでしょう。
ブラウザではなくデスクトップアプリケーションとして使いたい
ブラウザで使っていると、タブがどこかに行ったり「戻る」をしてしまったりと少しストレスになることがあります。 Windows版とMac版のデスクトップアプリが提供されているので、アプリが自由にインストールできるのであれば、こちらの利用をお勧めします。
日本語化したい
ホーム画面の右上にあるアバターからメニューを開き、Settingを選択します。
モーダルダイアログが表示されるので、Accountタブ内にあるLanguageの「Change Languages」をクリックします。
「日本語」を選択して［Save］ボタンをクリックしてください。
アプリ版・ブラウザ版ともに、すでに開いている別タブがある場合、再読み込み（ブラウザのリロードやファイルの閉じて再度開くなど）をすると設定が反映されます。
公式ヘルプ：Change your language preference
最後に
1つのツール上でほとんどのことが完結してしまうため、便利な世の中になりましたね（ジジイ）。これ以外にも使える機能があるので、機会が訪れたら紹介したいと思います。
間違いがあったり、これが入ってないじゃないとかあれば、優しく教えてください。
では素敵なFigmaライフを！
