デザインチームでFigmaを運用していると、ファイルがどんどん増えていき、目的のファイルを見つけにくいことがあります。
今回は、一覧画面で判別しやすいように、ファイルにサムネイルを設定する方法をご紹介します。あわせて、私たちJ.B.Goodeでの運用ルール（アレンジ）も載せていますので、良かったらご覧ください🏄
手順
1. サムネイル用のフレームを作成する
まずはフレームツール（F）を使って、サムネイル用のフレームを作成します。
サイズは推奨されている「1600 × 960px」に設定しました。
2. サムネイルの内容を作成する
作成したフレームの中に、サムネイルとして表示させたい情報を配置していきます。
私たちは「クライアント名」「プロジェクト名」「対応時期」の3つを基本セットとし、プロジェクトの性質に応じて要素や色を調整する運用にしています。
3. サムネイルとして設定する
最後に、Frameを右クリックして「サムネイルとして設定（Set as thumbnail）」を選択します。
Frame名の左側にサムネイルアイコンが表示されれば、設定は完了です。
ファイル一覧画面に戻ると、このようにサムネイルが適用されています。
もうひと手間
左側にあるFigmaのページパネルを整理すると、より使いやすいファイルになります。私たちは、以下のようにページを構成しています。
１、サムネイルを置いたページを「🖼️Cover」と名付けます。
２、新規ページ作成時に「—（半角ハイフン3つ）」と入力し、罫線（区切り線）を作成します。
３、できた罫線をドラッグして、「🖼️Cover」の上に配置します。
４、罫線の上に、実際の作業を行う「Design」ページなどを追加します。
このように区切り線を入れることで、「カバー画像用のページ」と「作業用のページ」が明確に分かれ、他の人がファイルを見たときにも構造が把握しやすくなります。
サムネイルの設定やファイルの管理には色々な方法があるので、ひとつの運用例として参考になれば幸いです /
他にもFigmaのナレッジをいくつか書いていますので、良ければぜひご覧ください🌱
J.B.Goode株式会社
デザインや技術を表層だけではなく、その奥にある「構造」まで考え、形にするクリエイター集団です。
◆ チーム・採用について
私たちのカルチャーやものづくりに興味を持っていただけたら、まずは気軽にお話ししませんか？お互いのこだわりについて、カジュアルに話せたら嬉しいです。
🔗 https://www.jbgoode.jp/recruit/
◆ お仕事のご相談
「AIを導入したいが現場の課題が残っている」「既存のWebサイトやシステムではしっくりこない」など、なかなか解決しないお悩みがあればぜひご相談ください。
🔗 https://www.jbgoode.jp/contact/