【Figma入門①】Figmaの無料プラン登録・操作画面の構成を解説 - はじめてのWEBデザイン
Webデザイン、UIデザインツールとして世界的なシェアを誇るFigma（フィグマ）。無料でも高性能なデザイン機能が使えるので、気になっている方も多いかと思います。
本記事では「これからWebデザインを学んでみたい」「デザインツール自体未経験だから、使えるか不安」という方向けに、Figmaのはじめかた、操作画面の見方・基本的な使い方を解説します。
Figma（フィグマ）とは
Figmaはアメリカ発、ブラウザベースのデザインプラットフォームです。
OSを問わずに使用・共同編集ができることもあり、ワイヤーフレームやWebデザイン、UIデザインの作成に世界的に使われています。You Tubeなどのサムネイル作成、プレゼン用のスライドを作るのに使用している方もいますね。
日本国内だと「Sketch使えないWindows勢用」みたいな言われ方をしていた時期もありますが、2020年前後から人気が上昇。2022年には日本語にも対応し、アップデートで便利な機能もどんどん追加されています。
デザインツールの比較サイト“UX Tools”によると、2023年時点でFigmaのシェアは圧倒的1位。
Adobe XDはずっと低空飛行かつ徐々に低下、一世を風靡したSketchも急速にダウンしていること考えると「これから学習するならFigmaが良い」と紹介されるのも納得です。
Figmaの何が良いの？
Figmaの利点として様々なことが挙げられていますが、大きいところでまとめると以下の6つかと思います。
- OS関係なく使える（Windows、Chrome、Mac、Linux）
- インターフェイスがわかりやすい
- リアルタイムでデザインを共有・共同編集できる
- ノンデザイナーの方でもビジネスツールとして使える
- デザインルールを一貫したデザインを作りやすい
- 無料プランがある
コーディングさせて頂く機会の多い人間としては、デザインルールが本当重要。同じ色のボタン見えて実はカラーコードが違う、余白の設定がバラバラ……と、デザインなのか、単に仕事が雑なのか、判別に困るデザイン渡されること結構あります。
インターフェイス（操作画面）の分かりやすさやデザイン性能は、使ってみないとわからない・感じ方に個人差がある部分でもあります。そこで大事なのが、無料で使える範囲。
無料プランは実質ほとんど使えないサービスもあるなか、Figmaは無料だけでも十分仕事ができるくらいの機能が使えます。無料で使える日数（期間）制限もありません。
極端な話、自分に合わないと思ったら放置して忘れてもOK。「Figmaってどんな？」「Figma勉強したほうが良い？」と、ずっと記事や動画を見続けているくらいなら、とりあえず触ってみたほうが効率が良いです。
Figmaのはじめかた方
無料アカウントの作成
Figmaの公式サイトにアクセスしましょう。
[無料で始める] もしくは [始める] のボタンをクリックして下さい。
下図のようなウィンドウが表示されます。
Googleアカウントを使ってFigmaにログインするか、メールアドレスとパスワードを入力してFigmaのアカウントを作成するかを選んで下さい。
以下は [Googleで続行] を選んだ場合の表示です。
どちらを選択た場合も、画面に表示される指示通り進めば問題ありません。
Googleアカウントとの連携、もしくはアカウント作成を進めると、Figmaの初期設定画面が表示されます。Figma上でのあなたの表示名を決め、Figmaを使う目的などを選択して進めていきましょう。
回答を進めていくとプラン選択の画面が表示されます。
無料の『Starter』を選択して下さい。
プランのアップグレードはいつでも出来るので、必要になった時に切り替えましょう。
Continueで進めると、最初にどっちを使う？という選択画面が出てきます。
よくわからない場合は、『Design with Figma』 の方を選択して下さい。
Finishで、初期設定画面を完了させましょう。
以下のような、Figma basicsとなっている画面が開いたら、登録作業は完了です。
ごちゃごちゃ色々なものが表示されているし、英語だし、「難しそう」「よくわからない」と思ってしまうかもしれません。
ですが、この画面はデザイン制作画面のデモ・見本のようなもの。いきなり、この画面からデザインを作っていく必要はありません。
Figmaを日本語表示に設定にする（任意）
Figmaは日本語表示に対応していますが、最初の画面だと英語になっていること多いです。日本語表示に切り替える場合は、以下の操作を行って下さい。
右下に表示されている「？」のアイコンをクリック。
表示されるメニューから [Change Language...] を選択します。
日本語を選択してSave。
画面がリロードされ、日本語表示に切り替わります。
Figmaの画面構成と機能を把握する
1. ファイルブラウザ
先程、Figma basicsはデザイン制作画面のデモのようなもの、と紹介しました。
ここから自分の作りたいデザインに改変したりするのは、逆に面倒です。
一旦、Figmaのファイルブラウザを開いてみましょう。
ログイン直後に表示されるページをFigmaではファイルブラウザ（file browser）と呼びます。アプリによって、ホーム画面やトップ画面と呼ばれるページに該当します。
画面左上にある、Figmaのアイコン（メインメニュー）をクリック。
メニューの一番上にある [ファイルに戻る] を選択して下さい。
ファイルブラウザの画面が開きました。
簡単に、ファイルブラウザ画面の構成を見ていきましょう。
ドラフト（Drafts）とチーム（Team）
サイドバー部分の一番上にある、アカウントが表示されている部分では、自分の表示名やプロフィール写真を追加・変更したり、Figmaテーマの変更ができます。
赤線と青線で囲った部分が、ちょっと紛らわしい部分。
赤線部分の『自分のチーム』というのは自分だけが編集できるファイルを指します。下の表示も「下書き」となっていますが、制作から書き出しまで、特に制限なく行うことが出来ます。Figmaでは、誰にも共有していないファイル＝下書き（ドラフト）として扱っているわけです。
青線部分の『チーム』は、他者と共同編集が可能な共有ファイルです。
無料のStarterプランでは、以下のような条件があります。
- Figmaエディタ
- 3個のコラボレーション用デザインファイル
- 個人用ドラフト数無制限
他人と共有するデザインファイルは、3個が上限。
下書き（ドラフト）のファイルは無制限で作成できますし、共有が必要な場合はドラフトからチームへ移動も出来ます。ですので、今すぐ仕事で使う、という方以外は、当面、チームは触らずにおいてOKです。
デザインとFigJam
では、自分のチーム > 下書き を開いてみましょう。
ここでは下書き＝自分のみが編集できるファイルの一覧が確認できます。登録してすぐの状態だと、2つのファイルが表示されています。
最上部の [+デザインファイル] と [+FigJamボード] は、新規ファイル作成のボタンです。
Figmaには“Figmaデザイン”と“FigJam”という2つの機能があります。
- Figmaデザイン：デザインツール（AdobeXDやSketchのような機能）
- FigJam：オンラインホワイトボード（JamboardやCacooのような機能）
Webデザイン/UIデザインで、単に「Figma」と呼ばれて使われているのはFigmaデザインです。アイキャッチやバナー制作で使用するのもデザインの方ですね。
一覧表示に表示されるアイコンで、Figmaデザインファイルか、FigJamファイルか、判別することが出来ます。
先程はFigma basicsが開かれていましたが、デザインファイルを新規作成してみましょう。
[+デザインファイル] のボタンを押して下さい。
まっさらなデザインファイルが作成されました。
ファイル名横のを開くと、名前の変更やプロジェクトへの移動（共同編集ファイルにする）ができます。せっかくですので、ファイル名を付けておきましょう。
2.デザイン画面
これから最も使用するであろう、デザイン画面の基本構成を見ていきましょう。
デザイン画面は大きくツールバー、 左サイドバー、キャンバス、右サイドバーの4つに分かれています。
①ツールバー
ツールバーではメインメニューや、ツールの持ち替え、表示倍率の変更などができます。
大まかに、以下5つのグループに分かれている、と考えると把握しやすいです。
それぞれがついているものは、クリックすると展開できます。マウスホバーでツール名なども表示されますから、よくわからないところはマウスカーソルを重ねてみる・展開してみると良いでしょう。
真ん中、ピンクの“ファイル名/アクション”部分は、選択しているレイヤーの種類によって表示が変わります。何も選択されていないときは、上図のようにファイル名が表示されています。
Figmaでは、ツール名や操作名の右横に、OSに合わせたショートカットキーも表示されています。自分がよく使う、よくクリックしているなぁ、と思うものは、表示されているショートカットキーを使うようにすると、自然と操作も早くなりますよ。
②左サイドバー
左のサイドバーでは、レイヤー、アセット、ページの確認・選択ができます。
白紙紙状態だと、ちょっとわかりにくいですね。
シェイプツールの長方形を使って四角を一つ書いてみましょう。ツールを持ち替えて、ドラッグすると描画できます。
レイヤーの下にRectangleという表示が増えました。
最上部のタブで“レイヤー”が選択されているときはレイヤーパネル、“アセット”が選択されていればアセットパネル、という呼び方をする場合もあります。
表示されているキャンバス上にあるアイテムはレイヤーパネルで確認できます。
作業に応じて、ロックして動かないようにしたり、非表示にしたりすることも可能。
レイヤーパネルとカンバスは対応しており、どちらで選択しても、もう一方もハイライト表示されます。
選択状態でDeleteやBackSpaceキーを押すと、選択しているアイテムを削除できます。
一時的に見えなくしたい場合は非表示、不要なものは削除していきましょう。
なお、アセットパネルには“コンポーネント”を作成すると、そのアイテムが表示されます。
コンポーネント機能は、色やテキストは違うけれど、統一したデザインの要素（ボタンなど）を設定したい時に使います。
③キャンバス
キャンバスは、デザインを作成するための作業空間です。
マウス操作の場合はスペースキーを押した状態でドラッグ、トラックパッドの場合は2本指ドラッグすると、表示している範囲を移動できます。
表示倍率の変更（拡大縮小）もショートカットキーが使えると便利。
ホイール付きマウスならCtrlもしくはCommandキー + ホイールの上回転で拡大、下回転で縮小できます。トラックパッドの場合はピンチイン、ピンチアウトすればOKです。
キーボードのみで操作する場合はCtrl / Command + +キーで拡大、Ctrl / Command + -キーで縮小ができます。
また、キャンバス内には、Adobe製品でいうアートボードを配置することも出来ます。
Figmaでアートボードツール的な役割を果たしてくれるのが、フレームツールです。フレームツールを選択すると、右サイドバーに主要デバイスのサイズが表示されます。そこから選択するか、カンバス上でドラッグして好きなサイズに設定して下さい。
④右サイドバー
画面右側にあるサイドバー。こちらも左サイドバーと同じく、上部のタブでデザインとプロトタイプに大きく分かれています。
デザインのタブでは、選択しているオブジェクトのプロパティ確認・変更などができます。詳細設定のようなものと考えて下さい。プロトタイプは案件により使う場合も、使わない場合もあります。使用頻度が高いのは、デザインのタブの方になるでしょう。
プロトタイプタブは、プロトタイプ機能（ユーザーが実際に操作した場合の挙動を再現する機能）の設定に使います。このボタンをクリックすると次のページが開く、とか、モーダルウィンドウが出現する、といった設定をするわけです。
デザインタブも、プロトタイプタブも、表示内容は選択しているレイヤーやツールによって異なります。ここまでの操作でも、以下のようにデザインタブの表示が変わっていました。
これらのプロパティは、最初から全部把握しておく必要はありません。
キャンバス上に置くアイテムごとに、設定していけば自然と覚えられます。
デザインファイルの保存について
Figmaでは、ファイルの更新は自動で保存されています（※無料版は保存期限30日間）。
自分で保存操作をする必要はありませんが、下図のように自動保存の履歴が並んでしまうと、戻したいところがどこか探すのは大変ですよね。
そのため[バージョン履歴を追加]という機能が用意されています。これは、何のために保存したか、タイトルやメモを付けておける機能と考えてくだい。
以下のショートカットキーで使用できます。
バージョン履歴を追加
- Windows :Ctrl + Alt + S
- Mac OS :⌘ + Option + S
表示されるウィンドウを使って、何のための保存かを入力します。
バーション履歴はメインメニュー、もしくはファイル名の横のから開けます。
一覧表示されているバージョン名をクリックで、そのバージョンのプレビューが表示されます。復元したいときは、バージョン名右横のから選択してください。
作業の区切りが良いところ・変更などを試す前など、重要なポイントは手動追加でわかりやすくしておくと良いですね。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
5月5日まで