Figmaのファイルブラウザ画面、デザイン画面の構成を把握する

• Figmaのファイルブラウザ画面を把握する
• アカウント設定
• ドラフト（Drafts）とチーム（Team）
• FigmaデザインとFigJam
• Figmaのデザイン画面
• ①ツールバー
• ②左サイドバー
• ③キャンバス
• ④右サイドバー
• デザインファイルの保存について

Figmaのファイルブラウザ画面を把握する

前回のレッスンで開いた、以下のようなFigmaのファイルブラウザ（file browser）画面。
Figmaにログインし直した場合も、こちらの画面が開きます。

このファイルブラウザ画面は、Figmaで作成するファイルの一覧や、自分のアカウント・参加しているチームなどが確認できます。
簡単に機能と、Figmaにおける区分を見ていきましょう。

アカウント設定

サイドバー部分の一番上にある、アカウントが表示されている部分。
クリックすると、自分の表示名やプロフィール写真の変更、アカウントの切り替えなどができます。

ドラフト（Drafts）とチーム（Team）

サイトバーのメイン部分、赤線と青線で囲ったところが、Figma特有の区分。
ちょっと紛らわしいところがあるので、それぞれ見ていきましょう。

赤線部分の『自分のチーム』は、自分だけが編集できるファイルを指します。
下の表示が「下書き」と紛らわしいのですが、制作から書き出しまで、特に制限なく行うことが出来ます。
Figmaでは、誰にも共有していないファイル＝下書き（ドラフト）として扱っているわけです。

青線部分の『チーム』は、他者と共同編集が可能な共有ファイルです。
無料のStarterプランでは、以下のような条件があります。

• Figmaエディタ
• 3個のコラボレーション用デザインファイル
• 個人用ドラフト数無制限

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

他人と共有するデザインファイルは、3個が上限。
下書き（ドラフト）のファイルは無制限で作成できますし、共有が必要な場合はドラフトからチームへ移動も出来ます。
ですので、今すぐ仕事で使う、という方以外は、当面、チームは触らずにおいてOKです。

FigmaデザインとFigJam

では、自分のチーム > 下書き を開いてみましょう。
ここでは下書き＝自分のみが編集できるファイルの一覧が確認できます。
登録してすぐの状態だと、2つのファイルが表示されています。

Figmaには“Figmaデザイン”と“FigJam”という2つの機能があります。
最上部にある+ デザインファイルと+ FigJamボードは、それぞれの新規ファイル作成ボタンです。

• Figmaデザイン：デザインツール（AdobeXDやSketchのような機能）
• FigJam：オンラインホワイトボード（JamboardやCacooのような機能）

Webデザイン/UIデザインで、単に「Figma」と呼ばれて使われているのはFigmaデザインの方です。
アイキャッチやバナー制作で使用するのも、デザインの方を使うことが多いと思います。

一覧表示に表示されるアイコンで、Figmaデザインファイルか、FigJamファイルか、判別することが出来ます。

先程はFigma basicsが開かれていましたが、デザインファイルを新規作成してみましょう。
+ デザインファイルのボタンを押して下さい。

まっさらなデザインファイルが作成されました。

ファイル名横の下矢印（）を開くと、名前の変更やプロジェクトへの移動（共同編集ファイルにする）ができます。
名前を変更で、ファイル名をわかりやすく変えておきましょう。

Figmaのデザイン画面

これから最も使用するであろう、デザイン画面の基本構成を見ていきます。
デザイン画面は大きくツールバー、 左サイドバー、キャンバス、右サイドバーの4つに分かれています。

①ツールバー

ツールバーではメインメニューや、ツールの持ち替え、表示倍率の変更などができます。
大まかに、以下5つのグループに分かれている、と考えると把握しやすいです。

それぞれ下矢印（）がついているものは、クリックすると展開できます。
マウスホバーでツール名なども表示されますから、よくわからないところはマウスカーソルを重ねてみる・展開してみると良いでしょう。

真ん中、ピンクの“ファイル名/アクション”部分は、選択しているレイヤーの種類によって表示が変わります。
何も選択されていないときは、上図のようにファイル名が表示されています。

②左サイドバー

左のサイドバーでは、レイヤー、アセット、ページの確認・選択ができます。

白紙紙状態だと、ちょっとわかりにくいですね。
シェイプツールの長方形を使って四角を一つ書いてみましょう。ツールを持ち替えて、ドラッグすると描画できます。

レイヤーの下にRectangleという表示が増えました。

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

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

レイヤーパネルと、カンバス上のアイテムは繋がっています。
どちらで選択しても、もう一方もハイライト表示されます。

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

なお、アセットパネルは“コンポーネント”を作成すると、作成したアイテムが表示されます。

コンポーネント機能は、色やテキストは違うけれど、統一したデザインの要素（ボタンなど）を設定したい時に使います。
後のレッスンでも、使い方を解説します。

③キャンバス

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

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

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

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

また、キャンバス内には、Adobe製品でいうアートボードを配置することも出来ます。
Figmaでアートボードツール的な役割を果たしてくれるのが、フレームツールです。

フレームツールを選択すると、右サイドバーに主要デバイスのサイズが表示されます。
そこから選択するか、カンバス上でドラッグして好きなサイズに設定して下さい。

④右サイドバー

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

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

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

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

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

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

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

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

以下のショートカットキーで使用できます。

バージョン履歴を追加

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

表示されるウィンドウで、何を保存したかを入力します。
保存ボタンで、バージョン履歴に追加します。

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

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

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