Figmaの使い方は5分で3つだけ覚えればOK【初心者向け】画像で説明

デザインツールFigmaの使い方を、5分で初心者向けに1番わかりやすく解説します。

Figmaの他の解説ブログは、あまり使わない枝葉末節まで説明しているので、絶対使う部分だけ効率よくマスターしましょう。

Figmaの使い方を知る前に、特徴を知ろう

Figmaは有名なデザインツールであるPhotoshopよりも簡単にデザインができるツールで、今デザインツールの中で注目されているツールの一つです。

すでに知っている人は飛ばしてOKです。

まずFigmaのサイトに飛んで、右上にある緑色の「sign up」ボタンを押して、必要事項を記入してください。

左上のマーク→Frameをクリック

グリッド線を引くことで、レイアウトの位置関係がわかりやすくなります。

右にある「Layout Grid」の「＋」をクリックします。

次に「Grid」を選択すると、色の変更やマス目の変更ができます。

デフォルトの10pxで大丈夫です。

次に、画面の上部のツールバーからFigmaのデザインをしていきます。

テキストの日本語フォントは以下４つのみを使うことができます。

下2つは特徴的な装飾フォントなので、基本的には上2つのみを使っています。プラグインを入れることで日本語fontの数は増やせるようです。

英語フォントはGoogleフォントなら大体使えます。

テキストのフォントをFontawesomeに変えて、FontawesomeのCheet Seatからアイコンをコピペすればアイコンも使うことができます。

右上の「Share」をクリックすると、リンク取得画面があらわれます。リンクをシェアしたい人に送りましょう。

Figmaは5分で使い方が分かるような超簡単なツールです。

特にデザインに細かな決まりがないときなどは、ぱぱっと作って共有しやすいです。

Figmaの他に、Adobe XDというデザインツールもオススメです。こちらは日本語フォントが豊富でオススメです。

Adobe XDの最低限のデザイン方法を初心者向けに紹介！プラグインなし