【Figma入門①】Figmaの無料プラン登録・操作画面の構成を解説 - はじめてのWEBデザイン

Webデザイン、UIデザインツールとして世界的なシェアを誇るFigma(フィグマ)。無料でも高性能なデザイン機能が使えるので、気になっている方も多いかと思います。

本記事では「これからWebデザインを学んでみたい」「デザインツール自体未経験だから、使えるか不安」という方向けに、Figmaのはじめかた、操作画面の見方・基本的な使い方を解説します。

Figma(フィグマ)とは

Figmaはアメリカ発、ブラウザベースのデザインプラットフォームです。
OSを問わずに使用・共同編集ができることもあり、ワイヤーフレームやWebデザイン、UIデザインの作成に世界的に使われています。You Tubeなどのサムネイル作成、プレゼン用のスライドを作るのに使用している方もいますね。

https://www.figma.com/ja/

日本国内だと「Sketch使えないWindows勢用」みたいな言われ方をしていた時期もありますが、2020年前後から人気が上昇。2022年には日本語にも対応し、アップデートで便利な機能もどんどん追加されています。

デザインツールの比較サイト“UX Tools”によると、2023年時点でFigmaのシェアは圧倒的1位。
Adobe XDはずっと低空飛行かつ徐々に低下、一世を風靡したSketchも急速にダウンしていること考えると「これから学習するならFigmaが良い」と紹介されるのも納得です。

画像元:2023 Design Tools Survey - UI Design | UX Tools

Figmaの何が良いの?

Figmaの利点として様々なことが挙げられていますが、大きいところでまとめると以下の6つかと思います。

  • OS関係なく使える(Windows、Chrome、Mac、Linux)
  • インターフェイスがわかりやすい
  • リアルタイムでデザインを共有・共同編集できる
  • ノンデザイナーの方でもビジネスツールとして使える
  • デザインルールを一貫したデザインを作りやすい
  • 無料プランがある

コーディングさせて頂く機会の多い人間としては、デザインルールが本当重要。同じ色のボタン見えて実はカラーコードが違う、余白の設定がバラバラ……と、デザインなのか、単に仕事が雑なのか、判別に困るデザイン渡されること結構あります。

インターフェイス(操作画面)の分かりやすさやデザイン性能は、使ってみないとわからない・感じ方に個人差がある部分でもあります。そこで大事なのが、無料で使える範囲。

画像元:Figmaの無料プラン、プロフェッショナルプラン、およびビジネスプランの価格設定。

無料プランは実質ほとんど使えないサービスもあるなか、Figmaは無料だけでも十分仕事ができるくらいの機能が使えます。無料で使える日数(期間)制限もありません。

極端な話、自分に合わないと思ったら放置して忘れてもOK。「Figmaってどんな?」「Figma勉強したほうが良い?」と、ずっと記事や動画を見続けているくらいなら、とりあえず触ってみたほうが効率が良いです。

Figmaのはじめかた方

無料アカウントの作成

Figmaの公式サイトにアクセスしましょう。
[無料で始める] もしくは [始める] のボタンをクリックして下さい。

https://www.figma.com/ja/

下図のようなウィンドウが表示されます。
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個のコラボレーション用デザインファイル
  • 個人用ドラフト数無制限

引用元: Figmaの無料プラン、プロフェッショナルプラン、およびビジネスプランの価格設定

他人と共有するデザインファイルは、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という表示が増えました。

最上部のタブで“レイヤー”が選択されているときはレイヤーパネル、“アセット”が選択されていればアセットパネル、という呼び方をする場合もあります。

表示されているキャンバス上にあるアイテムはレイヤーパネルで確認できます。
作業に応じて、ロックして動かないようにしたり、非表示にしたりすることも可能。

レイヤーパネルとカンバスは対応しており、どちらで選択しても、もう一方もハイライト表示されます。

選択状態でDeleteBackSpaceキーを押すと、選択しているアイテムを削除できます。
一時的に見えなくしたい場合は非表示、不要なものは削除していきましょう。

なお、アセットパネルには“コンポーネント”を作成すると、そのアイテムが表示されます。
コンポーネント機能は、色やテキストは違うけれど、統一したデザインの要素(ボタンなど)を設定したい時に使います。

③キャンバス

キャンバスは、デザインを作成するための作業空間です。

マウス操作の場合はスペースキーを押した状態でドラッグ、トラックパッドの場合は2本指ドラッグすると、表示している範囲を移動できます。

表示倍率の変更(拡大縮小)もショートカットキーが使えると便利。
ホイール付きマウスならCtrlもしくはCommandキー + ホイールの上回転で拡大、下回転で縮小できます。トラックパッドの場合はピンチイン、ピンチアウトすればOKです。

キーボードのみで操作する場合はCtrl / Command + +キーで拡大、Ctrl / Command + -キーで縮小ができます。

また、キャンバス内には、Adobe製品でいうアートボードを配置することも出来ます。
Figmaでアートボードツール的な役割を果たしてくれるのが、フレームツールです。フレームツールを選択すると、右サイドバーに主要デバイスのサイズが表示されます。そこから選択するか、カンバス上でドラッグして好きなサイズに設定して下さい。

④右サイドバー

画面右側にあるサイドバー。こちらも左サイドバーと同じく、上部のタブでデザインとプロトタイプに大きく分かれています。

デザインのタブでは、選択しているオブジェクトのプロパティ確認・変更などができます。詳細設定のようなものと考えて下さい。プロトタイプは案件により使う場合も、使わない場合もあります。使用頻度が高いのは、デザインのタブの方になるでしょう。

プロトタイプタブは、プロトタイプ機能(ユーザーが実際に操作した場合の挙動を再現する機能)の設定に使います。このボタンをクリックすると次のページが開く、とか、モーダルウィンドウが出現する、といった設定をするわけです。

デザインタブも、プロトタイプタブも、表示内容は選択しているレイヤーやツールによって異なります。ここまでの操作でも、以下のようにデザインタブの表示が変わっていました。

これらのプロパティは、最初から全部把握しておく必要はありません。
キャンバス上に置くアイテムごとに、設定していけば自然と覚えられます。

デザインファイルの保存について

Figmaでは、ファイルの更新は自動で保存されています(※無料版は保存期限30日間)。
自分で保存操作をする必要はありませんが、下図のように自動保存の履歴が並んでしまうと、戻したいところがどこか探すのは大変ですよね。

そのため[バージョン履歴を追加]という機能が用意されています。これは、何のために保存したか、タイトルやメモを付けておける機能と考えてくだい。
以下のショートカットキーで使用できます。

バージョン履歴を追加

  • Windows :Ctrl + Alt + S
  • Mac OS : + Option + S

表示されるウィンドウを使って、何のための保存かを入力します。

バーション履歴はメインメニュー、もしくはファイル名の横のから開けます。

一覧表示されているバージョン名をクリックで、そのバージョンのプレビューが表示されます。復元したいときは、バージョン名右横のから選択してください。

作業の区切りが良いところ・変更などを試す前など、重要なポイントは手動追加でわかりやすくしておくと良いですね。

まずは無料で14講座から始めましょう!

ハイクオリティな14講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。
無料申し込み期限
4月28日まで

募集 人数
100名 (残りわずか)

こちらもオススメ

×