Figma のカバーテンプレートを設計した話
増え続けるFigmaファイル、探せない問題。カバーテンプレートを設計してチームのファイル管理を標準化しました。
ファイルが見つからない
Figma のファイルが増えてくると、「あのファイルどこだっけ？」が頻発します。
サムネイルが全部同じような見た目だと、ファイル名を読まないと中身がわからない。ファイル一覧をスクロールして探す時間が、地味にストレスになっていました。
カバーテンプレートという解決策
Figma のファイルには「カバー画像」を設定できます。ファイル一覧で表示されるサムネイルのこと。
これを、ファイルの種類ごとにテンプレート化しました。一目で「これは UI デザインだな」「これはワイヤーフレームだな」と判別できるようにする。
作ったテンプレート
全9種類。ファイルの用途ごとに分類しました。
テンプレート | 用途 |
|---|---|
UX Design | ユーザーリサーチ、ジャーニーマップ |
UI Design | 画面デザイン |
Design System | デザインシステム、コンポーネント |
WireFrame | ワイヤーフレーム |
DTP | 印刷物（名刺、チラシ等） |
Template | 汎用テンプレート |
Movie | 動画・モーション |
KPT | 振り返り（Keep / Problem / Try） |
Archived | アーカイブ済み |
デザインの構成
テンプレートのレイアウトは共通構造にしました。
- 左端のアクセントストライプ — 種類を色で識別
- バッジ — ファイル種別を文字で表示
- タイトルエリア — プロジェクト名（大きめのフォントサイズ）
- サブタイトル — 補足情報
- メタ情報 — デザイナー名、更新日
- デコレーションエリア — 種類ごとのビジュアル要素
カラー
全テンプレート共通のカラーベース。
- 背景：薄い青紫
- アクセント：ブルー系
- テキスト：ダークブルー
「どのテンプレートも同じブランドのファミリーに見える」ことを意識しました。
タイポグラフィ
全体を Noto Sans JP で統一。タイトルは大きく太く、メタ情報は小さく控えめに。情報の優先度をサイズで表現しています。
使い方
- テンプレートを複製
- タイトル・サブタイトルを編集
- デザイナー名と日付を更新
- Figma のカバー画像に設定
慣れれば1分もかからない作業です。
テンプレートを作って変わったこと
探す時間が減った
ファイル一覧を見た瞬間に種類がわかるので、スクロールして探す時間が激減。特にアーカイブ済みファイルが一目でわかるのは大きい。
ファイルの整理が習慣化した
カバーを設定する＝ファイルの種類を意識する、ということ。新しいファイルを作るたびに「これは何のファイルか」を考えるので、曖昧なファイルが減りました。
時間が経っても迷わない
数ヶ月前に作ったファイルでも、カバーを見れば中身がすぐわかる。「これ何のファイルだっけ？」と開いて確認する手間がなくなりました。
小さな仕組みが大きな効果
カバーテンプレートは、派手な施策ではありません。でも、毎日何十回も目にするファイル一覧の見え方が変わると、全体の生産性に効いてきます。
デザインシステムは画面の中だけのものではなく、Figma の運用自体にも適用できる。そういう視点を持てたのは、この取り組みの副産物でした。
