Figma入門！基本構成をわかりやすく解説します。

Webデザインには「Figma」が便利って聞いたけど実際に使うにはどうしたらいいの？

無料で使えるの？

kentos

Figmaは個人利用であれば無料で充分に使えるデザインツールです！

本記事で詳しく解説していきます。

▼今回のポイント

FigmaはWebサイトやアプリの制作に特化したデザインツール
チームやプロジェクト等の基本構成を理解すると無料で充分に利用できる
複数のメンバと共同でデザインを制作することができる

▼記事を書いたひと

都内でシステムエンジニアをしているkentos(@kento_jpn)と申します。Web制作やプログラミングの情報発信を幅広く行っております。

1. Figmaを無料でインストールする
2. Figmaの基本構成要素を学ぼう！
3. まとめ

1. Figmaを無料でインストールする

早速Figmaをインストールしてみましょう！
1つ１つ画像を用いて丁寧に解説させていただきます。

なおFigmaには有料プランがありますが、
今回の記事で紹介する内容では料金は一切かかりませんのでご安心ください。

1.1. ユーザ登録

まずはFigmaの公式サイトにアクセスして、
トップページの「Figma for free」をクリックします。

続いてメールアドレス、パスワードの入力画面が表示されるので入力して
「Create account」をクリックします。

次に名前と用途の入力を求められますが、
何でもいいので私は「Design」と「Personal use」を選択しました。

完了すると入力したメールアドレスに認証メッセージが届きますのでメール内の
「Veryfy email」をクリックしましょう。

ブラウザで下記の様な画面が表示されたら利用するための登録は完了です。
チーム名の入力を求められますがこちらは後ほど解説いたしますので
「Do this later」をクリックしましょう。

次画面も同様に「I’ll explore by myself」を選択

1.2. デスクトップ版のインストール

FigmaはWebブラウザ上で稼働するアプリケーションですが
通信環境によって不安定であったり、一部機能が利用できなかったり
しますのでデスクトップ版のインストールをお勧めしております。

公式サイトトップの上段メニュー「Products > Downloads」をクリック

一番左の「Desktop app」よりご自身のOSに合ったものをダウンロードしてください。
※筆者はmacOSを使用しますが、本記事の内容においてはWindowsの方も問題なく読み進められるかと思います。

デスクトップ版のインストールが完了したらアプリを起動して
先ほど登録したアカウントでログインをしましょう。

2. Figmaの基本構成要素を学ぼう！

インストールが終わったのでここからはFigmaの基本構成要素をご説明します。

kentos

ここは少し難しいですが知っておくと今後の理解が深まると思いますのでぜひご覧ください！

2.1. 基本構成

Figmaの基本ファイル構成を図にまとメルト下記の様になります。
１つ１つみていきましょう。

team
要素をまとめる一番大きな単位です。
複数人で作業する場合にteamに作業者が参加して制作を進めていきます。
一人で利用する際は基本１つで問題ないためあまり意識する必要はございません。
project
teamの次に大きな単位です。例の通り「○○会社のプロジェクト」といった感じでわけます。
file
実際に製作したファイルを保存する単位です。

page
実際の作業スペース。fileをノートに例えるとpageはその中の1ページです。

これらをFigmaの実際の画面に紐づけるとこの様になります。

fileを開くことで下記の様な編集画面が表示されます。
真ん中グレーの箇所にデザインを書いていきます。

kentos

難しいと思った方はとりあえず1fileに1page構成で
作成することをオススメします！
規模が大きくなってきたらわけることを検討しましょう！

2.2. draftとは

さて、続いては構成図の右側にあった「draft」について解説していきます。
こちらはその名の通り下書き用フォルダです。

draft配下にはprojectと同様にfileを置くことができますが、
teamやprojectで分けることができません。

とりあえず入れておくフォルダの様なものと捉えていただければOKです。