Amazon10/19まで!プライム感謝祭開催中!セール会場へ

Figmaのサムネイル設定方法|1920×1080のカバー作成と解除

Figma Designのファイル一覧に表示するサムネイルは、ファイル内のフレームを右クリックしてSet as thumbnail(サムネイルとして設定)を選ぶと指定できます。公式推奨の作成サイズは1920×1080、比率は16:9です。

これはカバー用フレームの寸法です。ファイル一覧に1920×1080の大きさで表示されるという意味ではありません。短い案件名や制作物名を大きく配置しておくと、小さな一覧でも見分けやすくなります。

目次

あなたはどっち?利用環境に合わせた最適プラン判定フロー

サムネイルを設定するまでの順番を、先に確認しておきます。内容は、この記事の説明にもとづく目安です。記事内の画像は2024年4月の掲載作例で、現在のUIの撮影画像ではありません。最新の手順は、Figmaの公式ヘルプで確認してください。

  1. カバー用のフレームを作る。Fでフレームツールを選び、1920×1080(16:9)のフレームを作成する。これはカバー用フレームの寸法で、ファイル一覧に1920×1080の大きさで表示されるという意味ではない。
  2. ファイル名・案件名・作業段階など、一覧で区別したい情報を配置する。重要な文字やロゴには、端から余白を設け、縮小した状態でも読めるか確認する。
  3. フレームを選択し、キャンバスで右クリックして、Set as thumbnailを選ぶ。フレームにサムネイルのアイコンが付いたことを確認する。
  4. ファイル一覧へ戻り、見切れや、文字の読みやすさを確認する。
  5. 設定にはファイルの編集権限が必要。画像レイヤーやグループを選んでメニューが出ない場合は、フレームの中に配置してから、フレームを選び直す。
  6. 解除したいときは、指定中のフレームを右クリックして、Restore default thumbnailを選ぶ。

カバー用フレームを削除する必要はありません。解除してから同じフレームを編集し、別のサムネイルとして再設定できます。

カバーのサイズと作り方

  1. Fでフレームツールを選び、1920×1080のフレームを作成します。
  2. ファイル名・案件名・作業段階など、一覧で区別したい情報を配置します。
  3. 重要な文字やロゴには端から余白を設け、縮小した状態でも読めるか確認します。

プリセットを使う場合は、右サイドバーのFigma Community内にあるPlugin / file coverから作成できます。公式のカバー作成例

たとえば「店舗サイト」「モバイルアプリ」のような短いタイトルに、ワイヤー・デザイン・納品などの状態を添えます。本文の小さなスクリーンショットを全面に貼るより、一覧で必要な識別情報を優先する作例です。

フレームをサムネイルに設定する

  1. カバー用フレームを選択します。
  2. キャンバスで右クリックし、Set as thumbnailを選びます。
  3. フレームにサムネイルのアイコンが付いたことを確認します。
  4. ファイル一覧へ戻り、見切れや文字の読みやすさを確認します。

設定にはファイルの編集権限が必要です。Figma Designではフレームを指定します。画像レイヤーやグループを選んでメニューが出ない場合は、フレームの中に配置してからフレームを選び直します。公式の設定手順と権限

作成したフレームを右クリックしてコンテキストメニューからサムネイルとして設定を選択する操作手順。
2024年4月の掲載作例。現在のUIの撮影画像ではありません。
サムネイルに設定されたフレームの左上にカバーアイコンが表示されている状態。
2024年4月の掲載作例。現在のUIの撮影画像ではありません。
カバーを設定したファイル一覧の2024年4月の表示例。
2024年4月の掲載作例。現在のUIの撮影画像ではありません。

上の画像は2024年4月の作例で、カバーは700×420です。新しく作る際は、公式推奨の1920×1080を基準にします。

設定を解除してデフォルトに戻す

指定中のフレームを右クリックし、Restore default thumbnail(デフォルトのサムネイルを復元)を選びます。Figma Designのデフォルトは、ファイルの最初のページの内容をもとにした表示です。解除とデフォルト表示の公式説明

設定中のフレームを右クリックしてデフォルトのサムネイルを復元を選択し、解除する操作手順。
2024年4月の掲載作例。現在のUIの撮影画像ではありません。

カバー用フレームを削除する必要はありません。解除してから同じフレームを編集し、別のサムネイルとして再設定できます。

設定できない・見切れる場合の確認

状態確認すること
Set as thumbnailが見つからない編集権限と、選択した対象がフレームか
文字やロゴが切れる16:9のフレームか、端に寄せすぎていないか
一覧でタイトルが読めない短いタイトルと十分な文字サイズにする
初期表示へ戻したい指定中のフレームからRestore default thumbnail

ページ構成を整理したい場合はページの作成と管理、同じページ内で画面をまとめる場合はセクションの使い方を参照してください。

よくある質問:Figmaのサムネイル設定で迷ったときのチェックリスト

Figmaのサムネイルは、どう設定しますか?

ファイル内のフレームを右クリックして、Set as thumbnail(サムネイルとして設定)を選ぶと指定できます。設定にはファイルの編集権限が必要です。

サムネイルの推奨サイズは?

公式推奨の作成サイズは1920×1080、比率は16:9です。これはカバー用フレームの寸法で、ファイル一覧に1920×1080の大きさで表示されるという意味ではありません。

Set as thumbnailが見つからないときは?

編集権限と、選択した対象がフレームか確認します。Figma Designではフレームを指定します。画像レイヤーやグループを選んでメニューが出ない場合は、フレームの中に配置してからフレームを選び直します。

文字やロゴが切れるときは?

16:9のフレームか、端に寄せすぎていないか確認します。重要な文字やロゴには、端から余白を設け、縮小した状態でも読めるか確認します。

サムネイルを元に戻すには?

指定中のフレームを右クリックし、Restore default thumbnail(デフォルトのサムネイルを復元)を選びます。Figma Designのデフォルトは、ファイルの最初のページの内容をもとにした表示です。

一覧で、タイトルが読めないときは?

短いタイトルと、十分な文字サイズにします。記事では、本文の小さなスクリーンショットを全面に貼るより、一覧で必要な識別情報を優先する作例を紹介しています。

サービス

Service

デザイン制作に関心がありましたら、ぜひ詳細をご覧ください。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

Figmaのおすすめ書籍

Figma用PCの選び方

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次