Figma Library外科手術
この記事は「フルリモートデザインチーム Goodpatch Anywhere Advent Calendar 2022」の10日目の記事です。
フリーランス&Goodpatch Anywhereで、グラフィックやUIデザインなど見た目周りを専門にデザインしているハマダナヲミと申します。文字とビールが好きです。(フェスではハイネケンに乾杯し、W杯では自宅からバドワイザーを応援し、ご飯を食べに行ったお店にモレッティがあれば迷わず注文します。)
みなさまFigma使ってますか！かつてPhotoshopと添い遂げるんやとばかり思っていたAdobe派だった私ですが、今ではすっかり「ツールのご指定なければFigmaでいいですか？」と積極的にFigma布教をする派になりました(Adobeももちろん好きです)。Figmaのどこが好きかというとOTFの特性をフルに活かしたフォントパネルにあるのですがそれはまた別の機会に…。
複数人で作業しているとあっという間にファイルが肥大化して黄色いバーとか出始めますよね。慌ててバックアップ用のファイルをこしらえてFrameを移動しても「あれどこ行った？」で後から大混乱。
今回のNoteは、割と初期からメモリ食い過ぎやぞみたいなエラー吐き続けられて「怒られてきた……」反省から学んできた、Figmaデータと上手に付き合うコツをご紹介します。
昨日の初実戦チャレンジはFigmaで多人数プレゼン作成、多人数プレゼン発表、登壇中に片耳AirPodsでDiscord接続でした。このまま次元を越えよう。リアルな空間ではできない事をしよう。 #GoodpatchAnywhere #figmatokyo
— Keita Saito / Goodpatch Anywhere🕴 (@qnoub) November 14, 2019
#figmatokyoイベントで44万レイヤーでみたことないUIが出たのをネタにさせていただいたやつ(懐かしい…)
こんなお困りありませんか？
このようなお悩みをお持ちの皆様へのヒントになれば幸いです。
Slackで昔共有したフレームのURLが該当箇所に飛ばない！Fileの先頭に飛ばされる！あの時共有された画面のデザインはどれ！
納品したFigma、コメントが全部なくなってる！
重たくなってきたのでLibraryとデザインのFileを分けたい！でもコンポーネントだけ別のFileにするってどうやるの…(本題)
FileとURLの概念
オンラインツールということもあり、Figmaファイルの概念はちょっと特殊です。取っ付きっづらい点もありますが、仕様を理解していると困らず正しく扱うことができます。
＊文中で使用している英表記はFigmaのUIと揃えています。日本語版をお使いの方は脳内変換かけていただけると🙏
＊本稿は2022年12月時点の内容です。仕様の変更には対応できないかもしれませんが、間違っている点があれば対応したいのでご指摘いただけると嬉しいです
File
ファイルは固有のIDを持っています。FileのURLを見るとこのような構造になっていることが確認できますね。
例：https://www.figma.com/file/ファイルID/ファイル名や属するTeamやProject、Frameなどの情報
Projectを移動してもURLは変わらない、末尾のパラメーター(AやBの部分)が変化する
FileをDuplicateした場合はIDは新規、完全に独立したFileになる
VersionHistoryやLibraryも基本的にFileに紐づくため、FileのDuplicate＝新たなIDを持ったFileになる
figデータに保存したFileをImportした場合、IDは新規で生成される
Frame
具体のデザインデータを画面単位で作っていくときに活用するのがFrameではないでしょうか。FrameもFile同様、下記のようなルールを持っています。
File同様、固有のURLを持つ
FrameのURLはFileの親URLに紐づく
URLを維持したままFileをまたぐことは現状の仕様ではできない
Fileが変わる＝親URLが変わるのでURLも変更することになる
Copy&Paste
FrameのURLは新たに生成される
Move to Page
指定先のPageの同じ座標にURLを保ったまま移動する
はい、上記を理解した上で先述の問題を見ると、混乱はURLの仕様を正しく理解しないが故に発生していました。
Slackで昔共有したフレームのURLが該当箇所に飛ばない！Fileの先頭に飛ばされる！あの時共有された画面のデザインはどれ！
コピー&ペーストで別のページにデザイン自体が移動しており、整理の中で元Frameが削除されていた
→Move to Pageを活用するなど、元Frameが変わらない運用をする
納品したFigma、コメントが全部なくなってる！
コメントはFileのIDに紐づくURLを持っているので、DuplicateしたFileをProject移動してもコメントは引き継げない
→コメントが必要ならDuplicate元のFileを指定Projectに移動して納品する
重たくなってきたのでLibraryとデザインのFileを分けたい！でもコンポーネントだけ別のFileにするってどうやるの…
詳細は次セクションにて！
重たくなってきたのでLibraryとデザインのFileを分けたい！でもコンポーネントだけ別のFileにするってどうやるの…の、具体の方法
お待たせしました、ここからが本題です。
デザインデータとしてFigmaを長期間運用していると、フェーズごとにFileを分割したり、共有するメンバーにあわせてFileを管理したいということも出てくるのではないでしょうか。FigmaのFileを分割したい、特にLibraryを分離したい…！でもどれが一番いい方法なのか。というお悩み別に、下記2パターンをご紹介します。
元ファイルにLibraryを残してデザインを分離
デザインデータのURLが変わってもいい時はこちらが手軽でおすすめです。
ファイルAのTeam LibraryをPublishする
Libraryの名称自体に固有の名前はつけられないので、ファイルAはMain componentやLibraryなどわかりやすい名称にするのがおすすめです
Fileを新規作成、ファイルBとする
元のFileからデザイン部分(Frame)だけコピペで移す
ファイルAのLibraryをファイルB側でEnableにするとファイルBからLibrary全量が利用できるようになります
Pageの移動はできないので、同名のPageを作成した上でFrameをペーストしましょう
ファイルAのデザイン部分は削除する
はい、これでファイルA＝Library、ファイルB＝デザインデータ(Frame)という関係が実現しました。ここではコピペでFrameを移動しているので、ファイルAの時のURLとは変わっていますし、コメントもファイルBには移せません。
元ファイルにデザインを残してLibraryを分離
デザインデータのURLが変わると困る時(コメントが膨大にある、コンフルに画面のURLを貼りまくっているetc…)はこちらの方法を。
ファイルAをDuplicateしてファイルBとする
ファイルBのTeam LibraryをPublishする
ファイルAのLibraryからファイルBのTeam LibraryをOnにする
ファイルAのLibraryをファイルBとSwapする
何か一つでもファイルBのLibraryを使用していないとSwapできないようなので、ファイルAの任意のStyleかComponentをファイルBから適用しておきましょう
ファイルBのデザイン部分、ファイルAのLibraryを削除する
できましたか？ちなみにMissing要素があるとSwapできないようなので、必ずMissingを解決してからSwapしましょう。
設計思想を活かした運用をすると幸せになれる
ここまでの内容で、下記のようなFigmaの設計思想が浮かび上がってきます。
いずれのオブジェクトもURLを持っており、Frame、Library、Comment、StyleはFileに属する
Fileを跨いで共有できるのはLibraryのみ
LibraryはSwap可能だが単体として切り出すことはできない。必ずFileに紐づく
Frameはいかなる場合もFileを超えることはできない
閲覧権限をコントロールする目的で作業用のFileと関係者への共有用のFileを分けるという運用もありそうですが、FrameはFileを移動することができないという前提を考慮すると、同一Fileでの運用を模索する方が良さそうです。
Business以上のプランで利用可能なBranching機能において、コピペで移動したFrameはAddとみなされます。つまり、他で作業したものを持ってくるという運用ではなく、作業時にブランチを作成し、レビューの終わったデザインをマージする。のように、単一のFrameを育てる前提で考えていく必要があります。
Frameの変動が激しい場合でも、下記のような運用だと混乱も少なく済みそうです。
File内に目次を作る
文字列に対してFrameのURLをペーストするとリンクが作れるので、「ここを見て！(これ以外は見ないで！)」を示す
Frame内に⌘+V&⌘+Shift+G
親のFrameは何があっても変更しない。中にペーストしたものをグループ解除して、親のFrameは絶対に変更しないことでURLを維持する
Version historyを活用する
Branchingを活用する
作業の経過を共有することは怖いことではありません。経過であることを示し、結果ここに至った(ここを見てほしい)と示すことがキーだと私は考えています。
Figmaの思想を端的に理解できる、大好きなページを紹介して終わりにします。読んだ時本気でほろりとしました。今年読んだ文章で一番好きなメッセージです。
みなさま来年もFigmaで楽しいデザインライフを！