Figma レベル3: DesignFile作成・Pin留め・複製・削除・リネーム、JamFileの説明

こんにちは、アプリエンジニアの田中佑です。

今日はDesignFileの作成とJamFileの説明、ファイルのPin留め・複製・削除・リネームです。
これができればあなたも一人前のFigmaデザイナー。
嘘です、まだ初歩にも至ってないです。笑
備忘録なのでおやつでも食べながら見てください！

Design File とは

Figmaには2021/09現在 Design File と Jam File(beta) が用意されています。
Jam File は後述するとして、Design File というものがデザインのファイルになります。
そのままだった。笑
普通にデザインを作っていくときは Design File で大丈夫です。
ではどういった単位で Design File を作れば良いのか。
また別の機会に詳しく書きますが、実は Design File 内にも Page という概念があり、さらにデザインを分けることができます。
この事を踏まえると、Design File は役割単位で作ると良いかもしれません。
例えば、

WebサービスA [ Design File ]
　∟ コンポーネントをデザインするページ [ Page ]
　∟ サービスをデザインするページ [ Page ]
　∟ LPをデザインするページ [ Page ]
　∟ モバイル版をデザインするページ [ Page ]

のような感じ。
この方式ではないにしても、各プロダクトに見あった分け方を Page ありきで考えた方が良さそうです。

Jam File とは

2021/09 現在betaとして公開されている Jam File というものがあります。
これは「ホワイトボード」のようなもので、Design File がベクター主体でPageやレイヤー・グループなどのまとまりを持つのに対し、Jam File は線画やテキスト・画像などをより単純に扱えるフリースペースのようなものになっています。
よく比較対象として miro というサービスが挙げられるように、ミーティングの際などにメンバー全員で同時編集して、ホワイトボード代わりに利用するのが主な目的のようです。
通常のデザイン作業では使わないので、今回は詳しいことは割愛します。

Design File の作成

Design File を作成するには、まず作成したいチームとプロジェクトを左側のペインから選択します。

続いて右上にある「＋ New」ボタンをクリックし、Design File を選択します。

するとすぐに「Untitled」という名前の新しい Design File が立ち上がり、選択状態になります。

左上のホームボタンからチームのプロジェクトに戻ると、下記のようにファイルが追加された状態になっています。

ファイルのPin留め

さて、この様にいくつも Design File を作成していくと、どれが作業中のファイルか分からなくなったりします。
そこで便利なのがファイルの Pin留め です。
とりあえずやってみましょう🙆‍♂️
まずは任意のファイルを右クリックします。
すると「Pin to Project」という項目があるのでクリックしてみましょう。

すると、プロジェクトの各ファイルの上に、Pin留め したファイルがレコメンドされるようになります。

これで自分にとって大事なファイルが一目瞭然ですね！
ちなみに Pin留め から外したい時は、Pinned に追加されているファイルを右クリックし、「Remove from Pinned」を選択すれば除外されます。

ファイルの複製

さてさて、プロジェクトを進めていくと「これ他のバージョンも見てみたいなぁ。。」「このファイルとほぼ同じだから使い回したいなぁ」というシーンが出てきます。
そんな時は Design File をそのまま複製してしまいましょう。
複製したいファイルを右クリックし、Duplicate を選択します。

するとプロジェクト内に コピー元の名前(copy) というファイルが作成されっます。

このファイルの中身はコピー元のものと全く同一ですので、ここから使い回すなり編集するなりしてみましょう💪

ファイルの削除

「てやんでぇーぃ！もうこんなファイルお役御免だぜぇい！」という状況になったらファイルの削除を行いましょう。
削除方法は今まで同様、ファイルを右クリックし「Delete」を選択するだけです。

Delete をクリックすると、すぐにファイルは消えてしまいます。
「えええ！やばい！これ必要だった、まずいまずいまずい、、」と思ったら焦らずに画面下部を確認してください。
「Undo」のボタンがしばらく表示されますので、こちらをクリックしてもらえたら、削除の取り消しが可能です。
ふぅぅ、、危なかったですね。。w

ファイルのリネーム

ファイルのリネームには2種類の方法があります。
一つ目はファイルを右クリックし「Rename」を選択する方法です。

Rename をクリックするとファイル名にカーソルが当たるので、そのまま変更できます。
もう一つの方法は Design File 編集時のヘッダから変更する方法です。
まず Design File を開きます。
開いたらヘッダのファイル名をダブルクリックしましょう。

すると下記のようにファイル名を変更できるようになります。

以上、 DesignFile作成・Pin留め・複製・削除・リネーム、JamFileの説明でした。
レベル4では今回触れなかった「シェア」についてまとめます。

ではまた。