Figmaのファイルブラウザ画面を把握する
前回のレッスンで開いた、以下のようなFigmaのファイルブラウザ（file browser）画面。 Figmaにログインし直した場合も、こちらの画面が開きます。
このファイルブラウザ画面は、Figmaで作成するファイルの一覧や、自分のアカウント・参加しているチームなどが確認できます。 簡単に機能と、Figmaにおける区分を見ていきましょう。
アカウント設定
サイドバー部分の一番上にある、アカウントが表示されている部分。 クリックすると、自分の表示名やプロフィール写真の変更、アカウントの切り替えなどができます。
ドラフト（Drafts）とチーム（Team）
サイトバーのメイン部分、赤線と青線で囲ったところが、Figma特有の区分。 ちょっと紛らわしいところがあるので、それぞれ見ていきましょう。
赤線部分の『自分のチーム』は、自分だけが編集できるファイルを指します。 下の表示が「下書き」と紛らわしいのですが、制作から書き出しまで、特に制限なく行うことが出来ます。 Figmaでは、誰にも共有していないファイル＝下書き（ドラフト）として扱っているわけです。
青線部分の『チーム』は、他者と共同編集が可能な共有ファイルです。 無料のStarterプランでは、以下のような条件があります。
- Figmaエディタ
- 3個のコラボレーション用デザインファイル
- 個人用ドラフト数無制限
他人と共有するデザインファイルは、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つのグループに分かれている、と考えると把握しやすいです。
それぞれ下矢印（）がついているものは、クリックすると展開できます。 マウスホバーでツール名なども表示されますから、よくわからないところはマウスカーソルを重ねてみる・展開してみると良いでしょう。
真ん中、ピンクの“ファイル名/アクション”部分は、選択しているレイヤーの種類によって表示が変わります。 何も選択されていないときは、上図のようにファイル名が表示されています。
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
表示されるウィンドウで、何を保存したかを入力します。 保存ボタンで、バージョン履歴に追加します。
バーション履歴はメインメニュー、もしくはファイル名の横の下矢印（）から開けます。
一覧表示されているバージョン名をクリックで、そのバージョンのプレビューが表示されます。 復元したいときは、バージョン名右横のメニューから選択してください。
作業の区切りが良いところ・変更などを試す前など、重要なポイントは手動追加でわかりやすくしておくと良いですね。