管理栄養士と個人開発者の夫婦ブログ

ABOUT
おまめ
にゃんちゅう
料理・栄養
プログラミング
雑記
デザイン
ホテル・お店
コスメ
ブログ運営

【アカウント作成から解説】Figmaにコメント欲しいとデザイナーに言われたら

2021-09-18デザイン5851

現役10年のデザイナーが、今一番人気なデザインツールのFigma(フィグマ)の使い方を解説します。

今回は、初めてアカウント作成するところから、コメント入力して返信きたら気付けるようになるところまで丁寧に解説します。

モチベーション:Figmaでコメントできれば制作の時短に。

デザイン制作において、依頼人とデザイナー二者間のコミュニケーションに最も時間がかかります。 MTGや電話は欠かせませんが、細かな修正点を伝えようとすると、紙に印刷して赤ペン入れて写真を送りつけて・・・と、どうしても時間がかかってしまいます。 Figmaなら、具体的にデザイン個所に対してコメントを残せるため時間効率が良いです。

すでにWEBやAPPなどデジタル領域ではAdobeを抜いて一番人気で、デザイナーにとって便利な機能が多いため、これからもFigmaは使われるでしょう。今のうちにFigmaに触れておくことをオススメします。

ステップ①アカウント作成はGoogleアカウントでOK

まず最初にFigmaでアカウントを作りましょう。 こちらのURLからFigmaを開いてください。 http://figma.com/

右上からアカウントを作成ください。

1figma-top

Googleアカウントでも登録できます。「Create Account」で登録して次へ。

2figma-signup

Figmaのホーム画面、ファイルの一覧が表示されます。 teamの入力や色々とチュートリアルが始まりますが、一旦無視してOKです。

「Do this later(後でやる)」

3figma-welcome1

「I'll get started on my own(自分のペースで始める)」

4figma-welcome2

ホーム画面はデザイナーが使うものになりますが、過去に開いたデザインデータはここに表示されるので、覚えておくと良いでしょう。

5figma-home2files

ステップ②Figmaのリンクを開く

デザイナーから共有されたFigmaのリンクを開きましょう。 もし「File is not found」などデザインが見れなかった場合は、先ほど作成したアカウントでログインしてください。

6figma-error

デザインの画面を開けたでしょうか?

6figma-file

画面の見方ですが、基本的には丈夫のツールバーと、真ん中のキャンバスのみ使います。 ちなみに左がレイヤーパネル、右がプロパティーパネルですが、コメントを記入するだけなら無視でOK。

6figma-screen

ステップ③スワイプ・ピンチでデザインを見る

デザインデータが開けたら、デザインをチェックしましょう。 今回は、当ブログのロゴを制作依頼した場合を想定してます。

スマートフォンと同様に、パソコンのトラックパッドをスワイプすれば、キャンバスの見れる範囲が移動します。 ピンチイン・アウトで拡大縮小ができます。 この操作で、Figmaのキャンバスの好きな部分を見ることができます。

例えば小さくしたい時。全体像を引きで見たい場合です。ピンチインしましょう。

7figma-file1pinch

例えば大きくしたい時。ディテールを見たい場合です。ピンチアウトしましょう。

7figma-file2pinch

ステップ④コメント機能は「Comment」の「C」

デザインを見て、どういったコメントをするか考えられましたか?気になった部分にコメントしてみましょう。 使うのは「コメントツール」だけ。キーボードの「C」を押しましょう。CommentのCです。

上部のツールバーの吹き出しアイコンの色が変わり、マウスカーソルがピンに変わったのが分かるかと思います。これでコメントを入力できるモードになりました。

あとはコメントしたい箇所にピンを置くため、クリックしてみましょう。

8figma-comment

「Add a comment」「Cancel」「Post」と読めると思います。 Add a commentをクリックして選択。文字入力できます。 文字を入力すると「Post」の色が変わります。クリックすることでコメントの投稿が完了できます。

9figma-comment4emoji

ステップ⑤返ってきたコメントを確認する

初めてコメントを投稿すると、「Notifications」が右上に表示されます。 デザイナーや他の人のコメントを、どこまで通知するか決めることができます。 自分が関係ないコメントを通知したくない時は、「Only yours」を選びましょう。 これでメールが飛ぶようになります。

11figma-mail

メールだけでなく、Figmaでもコメントを確認できます。コメントツール(C)を利用しているときに、画面右に履歴が表示されます。未読なものは青色に変わります。

12figma-comment-history

メール通知を辞めたい場合は、一度ホーム画面に戻って設定変更します。

①ホーム画面に戻るには、左上のfigmaのロゴをクリック→「Back to files」で戻れます。 figma back to files

②ホーム画面の右上、自分のアイコンをクリック→「Settings」

figma settings

③File Notification 「Comments from other users」のチェックを外すと、メール通知が止まります。

figma settings mail

いかがだったでしょうか?

Figmaでコメントして、デザイナーと二人三脚、より良いものを生み出していきましょう。

この記事をシェアする

デザイン」のおすすめ記事も
読んでいってね!

【アカウント作成から解説】Figmaにコメント欲しいとデザイナーに言われたら

2021-09-18 | おまめ
おまめ
おまめ
夫。個人開発者・ブロガー・デザイナー。夫婦でサイドFIRE目指してます。