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では今回触れなかった「シェア」についてまとめます。
ではまた。
この記事が気に入ったらサポートをしてみませんか?