![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F2d1b8c905c1d447eb649028ca07253a8%2F0aae16c21c9d41f2858e8ffc3c013691%2Fthumb-figma-review.jpg&w=2048&q=90&dpl=dpl_8SWrMdzCU8komafoUR9UbcFbWkkm)
更新日
非デザイナーがFigmaでデザインの確認時に抑えておきたいポイント
人気ですよね、Figma。デザイナーではないけど、デザインのレビューをする立場の人も、この頃何かと話題のFigmaが気になっているのではないでしょうか。今回はデザイナーからFigmaのファイルが共有されたけど、何をすればわからない!という人向けに、デザインのレビュー時にこれだけは抑えておきたいというFigmaの設定の流れや機能を紹介します。
Figma を使うメリット
Figmaは世界的にも大人気の、無料で使えるデザインツールです。人気の理由は、主に以下のような共同作業のしやすさがあげられます:
- インストールする必要がない
- コメントの共有がしやすい
- バージョン管理ができる
デザイナーであれば自分の持っている PC や Mac に Figma のアプリをインストールして利用したほうが使いやすいかな、と思いますが、サクッと確認するだけであれば、いつも使っているブラウザーだけで閲覧やコメントの書き込み、ファイルの編集も可能です。
また、チーム間で作業をするのに必須でもあるコメント機能や、Web サイト制作やアプリ開発ではおなじみの Git のようなバージョン管理もできちゃいますよ。
まずは Figma のアカウントを登録
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/4d1d61f85f514383a43e137fc64f658a/figma-1.jpg)
Figma の公式サイトから「始める」ボタンをクリック。
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/817a11353cea4cb4baa5a245f9ca898d/figma-2.jpg)
メールアドレスとパスワードを入力して「アカウントを作成」。Google アカウントから登録も可能です。
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/61c426245cb645d7bc9ea907e32ad362/figma-3.jpg)
登録したメールアドレス宛にメールが届きます。「メールを確認する」ボタンをクリックして登録完了です。画面が切り替わるので、必要事項を入力していきましょう。
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/969b848c31de406c8ad581682d7022a3/figma-4.jpg)
名前や利用目的を選択したり、
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/095531c223dd476c86d5a544fe25c9a9/figma-5.jpg)
共同作業するコラボレーターを招待したり。不要であれば、フォームの下の「後で」をクリックしてスキップします。
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/2cec2a234c014c13b58ea1edbf164f76/figma-6.jpg)
プランはひとまず無料で利用できる「スターター」を選択しましょう。
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/0a03615c1e844b259878eb62b2cfd2eb/figma-7.jpg)
最後に「Figma でデザイン」を選んで、Figma を開始できます!
Figma を日本語化する
Figma の日本語サイトから登録したなら、画面も日本語になっているはずですが、もし英語になっている場合は、画面の右下にある「?」マーク →「Change languages」から設定できます。
Figma:Figmaが日本語に対応!画面の右下にある?マーク→Change languages から設定できます。 https://t.co/WiM5pEWDiH pic.twitter.com/DJC87BTKlu
— Webクリエイター ボックス (@webcreatorbox) July 27, 2022
画面の操作
Figma を使う環境が整ったら、さっそく共有された Figma ファイルを開いてみましょう!
画面の切り替え
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/2e4f35ccf2b8408d9e743f162500f7d0/canvas-1.jpg)
言われるがままに Figma のファイルを開いたものの、どこから見ればいいのやら?と、途方に暮れているそこのあなた。まず見るべき場所は画面左上の「ページ」の部分です。多くの Figma ファイルで、複数のページが用意されているはずです。ページの名前部分をクリックし、レビューする必要のある画面を選択しましょう。
画面を移動する
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/9594f82a97ee4abb92590dc7ac668b94/canvas-2.jpg)
見たい画面が開けたら、次は画面を移動して全体を見てみましょう。マウスホイールやトラックパッドを利用している場合は、スクロール操作で画面の移動ができます。
また、画面上部にある手のひらのアイコンをクリックすると、カーソルが手のひらにかわり、ドラッグして画面を移動できるようになります。別のツールを選択している場合でも、スペースキーを押している間は一時的に手のひらに切り替えられて便利ですよ。
画面を拡大縮小する
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/d3d75277419145eeb07bd6ef4df17b66/canvas-3.jpg)
画面右上から直接倍率を入力したり、ズームイン・アウトを選択できます。
マウスホイールやトラックパッドを利用している場合は、 ⌘ (Windows は Ctrl )キーを押しながらスクロール操作で画面を拡大・縮小できるので便利です。キーボードの操作なら、 ⌘ (Windows は Ctrl )と + や - キーも使えます。
コメントをする
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/c05cdd63e468419fb81f882d002029b7/comment-1.jpg)
ファイルにコメントを残してザインへのレビューをしたり、デザイナーとのやり取りが行えます。コメントを投稿するには、上部のツールバーにある吹き出しアイコンの「コメントの追加」をクリックして、コメントモードに切り替えます。
続いて、キャンバス上のコメントを追加したい箇所をクリックし、コメントを入力しましょう。「@」アイコンをクリック、または入力して、メンバーにメンションをつけられます。
投稿されたコメントは、ユーザーアイコンをマウスオーバーしたり、クリックして閲覧できます。
コメントに返信する
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/3d2476b5cd7e40c0bcbe7893caba4e8d/comment-2.jpg)
投稿されたコメントには、スレッド形式で返信したり、スタンプでリアクションできます。
コメントを完了する
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/96a943f8c39b44d995dedb029fafd0ed/comment-3.jpg)
コメントにて指摘された対応が完了したら、丸いチェックのアイコンをクリックして「解決」としてコメントを非表示にできます。
誤って「解決」アイコンをクリックしてしまったり、再度確認するコメントがある場合は、コメントモードで右側のメニュー上部にあるフィルターアイコンから「解決済みのコメントを表示」を選択して表示したり、「未解決」に戻せます。
コメントを表示・非表示にする
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/a7e67712c4ac424aadd67785fe993b14/comment-4.jpg)
一度ついたコメントアイコンは上記のとおり「解決」していないと表示されたままです。レビューや作業をする時には非表示にしておいた方が集中できますよね。コメントの表示・非表示の切り替えはコメントツールの右サイドバーの設定アイコンから切り替えられます。ショートカットキーの Shift + C を覚えておくと便利です。
バージョン管理
Figma では常に自動で保存してくれますが、キリのいいところで現在のバージョンを残しておくと管理しやすくなります。
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/09c071b35865488aa638200bea6cf881/ver-1.jpg)
ツールバーから Figma のアイコン →「ファイル」→「バージョン履歴に保存」をクリックし、タイトルや変更内容を入力して保存すれば、現在の状態をバージョン履歴として記録できます。
バージョン履歴を見る
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/3cb0494b997f432e9d66e880b402270a/ver-2.jpg)
「以前はどんなデザインだったっけ?」「あの後どこを変更したんだっけ?」という時は、過去のバージョンを確認してみるといいでしょう。ツールバーの Figma のアイコン →「ファイル」→「バージョン履歴の表示」をクリックすると、右サイドバーに履歴が表示されます。
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/dc6f628aa995403d9ec03545182d76c6/ver-3.jpg)
画面上部中央の、ファイル名の右側にある小さな下矢印アイコンからでも「バージョン履歴を表示」が選択できます。
各バージョンをクリックすると、その時の状態が表示されますよ。
過去のバージョンに戻す
![](https://images.microcms-assets.io/assets/2d1b8c905c1d447eb649028ca07253a8/d0b84e6bc5b140d79263ffca404e9171/ver-4.jpg)
サイドバーに表示されたバージョン履歴を右クリックし、「このバージョンを復元」を選択すると、そのバージョンに戻されます。が、きちんと最新のバージョンを保存しているのか、チームメンバーにも確認した上で復元を実行しましょう。過去のバージョンの確認だけであれば、上記のようにクリックすれば OK。復元までは必要ありません。
これでひとまずデザインのレビューはできるようになっているはずです!Figma は他にも便利な機能が多く搭載されているので、少しずつ慣れていくといいですね!