デザインツールFigmaの使い方を、5分で初心者向けに1番わかりやすく解説します。
Figmaの他の解説ブログは、あまり使わない枝葉末節まで説明しているので、絶対使う部分だけ効率よくマスターしましょう。
YouTubeでも同じ内容の動画を発信しています。
目次
Figmaの使い方を知る前に、特徴を知ろう
Figmaは有名なデザインツールであるPhotoshopよりも簡単にデザインができるツールで、今デザインツールの中で注目されているツールの一つです。
すでに知っている人は飛ばしてOKです。
Figmaのメリット
- 無料
- 簡単にパワポを使う要領でデザインが出来る
- 動作が軽い
- オンライン上でデザインができるので安心して保存できる
- 複数人で同時にデザインが出来る
- オンラインでデザインを共有できる
Figmaのデメリット
- 日本語フォントが少ない（プラグインを使えば増やすことができるようです）
- Web制作会社に就職する、制作会社からの受託案件を行う場合はFigmaだけのスキルではダメ（PhotoshopやIllustratorのスキルも必要）
Figma以外のデザインツールのデメリット
- 有料（sketchやPhotoshop）
- 動作が重い（Photoshopやillustrator）
- 使い方が難しい（Photoshop）
- オンライン共有が出来ないので送付に時間がかかる（Photoshopやillustrator）
5分でわかるFigmaの使い方
Figmaの使い方は３ステップ
- Figmaの新規登録を行う
- アートボードを作成し、中身を入れてデザインをする
- Webデザインを見てもらいたい人へ共有する
1.Figmaのサイトで新規登録
まずFigmaのサイトに飛んで、右上にある緑色の「sign up」ボタンを押して、必要事項を記入してください。
2. アートボードを作成しデザイン
アートボードの作成
左上のマーク→Frameをクリック
グリッド線を引く
グリッド線を引くことで、レイアウトの位置関係がわかりやすくなります。
右にある「Layout Grid」の「＋」をクリックします。
次に「Grid」を選択すると、色の変更やマス目の変更ができます。
デフォルトの10pxで大丈夫です。
中身のデザインをしていくデザイン
次に、画面の上部のツールバーからFigmaのデザインをしていきます。
Figmaの上部のツールバーにある各ボタンの説明
- □ボタン：図形を作成する
- /ボタン：線を作成する
- →ボタン：矢印を作成する
- Tボタン：テキストを入力する
- 吹き出しボタン：デザインにコメントを入力します。共有してコメントをチェックしてもらえます。
Figmaのデフォルト設定でデザイン出来る日本語フォントは4つ
テキストの日本語フォントは以下４つのみを使うことができます。
- Noto Sans JP
- Noto Serif JP
- Nico moji
- Nikukyu
下2つは特徴的な装飾フォントなので、基本的には上2つのみを使っています。プラグインを入れることで日本語fontの数は増やせるようです。
英語フォントはGoogleフォントなら大体使えます。
テキストのフォントをFontawesomeに変えて、FontawesomeのCheet Seatからアイコンをコピペすればアイコンも使うことができます。
3.デザインを見てもらいたい人に共有する
右上の「Share」をクリックすると、リンク取得画面があらわれます。リンクをシェアしたい人に送りましょう。
Figmaの使い方まとめ
Figmaは5分で使い方が分かるような超簡単なツールです。
特にデザインに細かな決まりがないときなどは、ぱぱっと作って共有しやすいです。
Figmaの他に、Adobe XDというデザインツールもオススメです。こちらは日本語フォントが豊富でオススメです。
Webデザインを独学で最短マスターする方法もどうぞ
