「Webデザインを勉強したいけど、Photoshopは高いし操作も難しそう…」
そんな風に感じている初心者にぴったりなのがFigma（フィグマ）です。
Figmaは無料で使えて、ブラウザからすぐに始められるデザインツール。
操作もシンプルで、Webデザインの学習を始めたばかりの人でも安心して取り組めます。
この記事では、Figmaをこれから使ってみたい方に向けて、登録方法から基本操作を分かりやすく解説します。
Figmaとは？初心者に人気の理由
Figmaは無料で使えるデザインツール
Figmaは、基本的な機能をすべて無料で利用できます。
有料プランもありますが、学習や個人制作であれば無料版で十分です。
バナー作成から、Webサイトやアプリのプロトタイプ作成もできたり、ブレストするときのホワイトボードとしても活躍します。
もしPhotoshopやCanvaなど、別のデザインツールを使っている方であれば操作が分かりやすいと感じるかもしれません。
Figmaはツールバーなどが非常にシンプルで操作性がいいです。
ブラウザでもアプリでも使える手軽さ
アプリをインストールしなくても、Google ChromeやSafariなどのブラウザ上で動くのがFigmaの大きな特徴です。
チームで共同作業しやすい
Googleドキュメントのように、複数人で同時編集が可能です。
将来的に案件やチーム制作をする時にも役立ちます。
Figmaと似たようなツールでAdobe XDがありますが、XDは有料で、かつ更新しないと編集内容が反映されないのに対し、Figmaは基本的に無料で、リアルタイムに編集内容が更新されます。
FigmaとFigJamの違い
Figmaの中にはFigJamと呼ばれるツールも入っています。
- Figma：UIデザイン（Webサイトやアプリのプロトタイプ）や、バナー作成に使う
- FigJam：チームでアイディアを出し合って整理するときに使うオンラインホワイトボードとして使う
イメージとしては、Figmaという大きな箱の中に、デザイン作成用のツールとホワイトボードが入っているような感じです。
Figmaの始め方
Figmaのアカウント作成方法
- 公式サイト にアクセス
- 「アカウントを作成」からアカウントを作成（Googleアカウントで登録すると簡単）
- 登録したメールアドレスに届いたメールの「確認する」をクリックする
- 名前を登録する
- アンケートに回答する
- プランをスターターにする
- アカウント作成完了✨
アプリのダウンロード方法
- Figmaダウンロードページからお使いのOSに適したアプリをダウンロードする
- Windowsの場合はダウンロードフォルダに格納されるので開く、Macの場合はダウンロードフォルダからFigmaのファイルをクリックして、Applicationへドラッグして移動させる
Figmaの構成
Figmaのホーム画面はこのようにチームが階層のトップとなっています。
▼階層が分かりやすい画像を作成しました。
チームの中にプロジェクト、プロジェクトの中にファイルが格納されています。
チームは共同編集するためのスペース、プロジェクトはチームで使うフォルダのような役割です。
スタータープランだと、プロジェクト１件、ファイル３件まで無料の範囲で使用することができます。
また、これとは別に個人のみ更新できるドラフトフォルダがあり、ドラフトはいくつでも作成可能です。
Figmaの基本操作をマスターしよう
新しいファイルを作成する
ダッシュボードからドラフト＞「デザイン」をクリック。
これがデザイン作成のスタート画面になります。
フレーム（アートボード）の使い方
Figmaでは「フレーム」がキャンバスの役割を果たします。
PC用、スマホ用など、デバイスに合わせたサイズを選べます。
画像では適当に左上から右下にむかってドラッグしてフレームを作成してますが、デバイスごとのサイズに作りたい場合は、右上の「フレーム▼」からお好みのものを選んでください。
オブジェクトを配置する方法
長方形や円などのオブジェクトは、下のツールバーから配置したいものを選択し、ドラッグして描きます。
Shiftキーを押しながらドラッグすると、きれいな正方形や円が描けます。
オブジェクトが選択された状態で右下の塗りからお好きな色に変更することができます。
画像を挿入する方法
ドラッグ＆ドロップで配置可能です。
コンポーネントの設定方法
コンポーネントとは繰り返し使用するボタンやパーツを管理するための便利な機能です。
例を紹介します。
画像の四角形３つは一見同じグレーの塗りでそれぞれ作成しているように見えます。
左側の四角形はコンポーネント化して、右下のインスタンスは左の四角形をコピーしたような状態になっています。
試しにコンポーネントの塗りを変更してみましょう。
このように、コンポーネントと連動しているインスタンスの四角形も塗りが変更されました。
コンポーネントは、オブジェクトを右クリックで選択して「コンポーネントを作成」と簡単な作業で作成できます。
作成したコンポーネントはアセットタブに保存されます。
アセットから配置したいコンポーネントをクリックしてインスタンスを挿入します。
インスタンスが複数あっても、コンポーネント側で変更した点はインスタンス全てに反映されるので、例えばWebサイトやアプリの中のボタンをコンポーネント化しておけば、クライアントから色を変更したいと要望があってもすぐに対応できる優れた機能です。
まとめ
Figmaは無料の範囲内で十分制作を進められるので、ひとまずWebデザインをやってみたいという方におすすめです。
まずは手を動かしてみて、バナーなどの簡単なものから作成してみてはいかがでしょうか？
私もFigma学習中なので一緒に頑張っていきましょう～♪
