figma-how-to-set-as-thumbnail
公開日: 2022.06.24  | 更新日: 2022.06.24

Figmaのファイルのサムネイルを設定・解除する方法

今回はFigmaやFigJamのカードビューのファイル一覧で表示されるサムネイルを設定する方法を紹介します。デフォルトではファイル内の描画領域がプレビュー表示されますが、統一したフォーマットでサムネイル設定することで目的のファイルを見つけやすくなるのでおすすめです。

この記事のターゲット

  • Figmaのチームやプロジェクトで複数のファイルを管理している方

  • Figmaのファイルの一覧性を改善したい方


サムネイルを適用する方法

サムネイルに設定するには、Frameを使用します。

まず、ツールバーから「Frame」を選択し、任意のサイズで作成し、Frame内にサムネイルに表示したいものを配置します。

thumbnail1

この状態ではファイル一覧にはまだサムネイルは適用されず、描画領域のプレビューが表示されています。

thumbnail8

表示内容の準備ができたら、Frameを選択して右クリックしメニューから「Set as thumbnail」を選択すると、サムネイルに適用されます。

サムネイルが適用されたFrameには、四角いウインドウのようなアイコンが表示されます。

thumbnail2

サムネイルが適用されると、ファイル一覧でサムネイルが適用されていることがわかります。

thumbnail7

サムネイルの推奨サイズは「1900x960px」となっており、公式のヘルプページにも表記されています。

「1900x960px」に設定することで、カードビュー表示時のサムネイルで上下左右がトリミングされない最適なサイズになります。

以下のデモは、プラグイン「Unsplash」で画像を適用したFrameを「1900x960px」に設定しサムネイルを適用する様子になります。

thumbnail4
thumbnail5

また、この「Set as thumbnail」はFigJamでも設定可能です。

FigJamではフレームサイズの指定ができないため、Figmaファイルでで1900x960pxのフレームを作成し、FigJamにコピーすれば指定サイズのサムネイルを設定できます。

FigmaファイルでFrameを選択しCtrl+Cなどでコピーし、FigJamファイル内でCtrl+Dなどでペーストすると貼り付け可能です。

thumbnail6

サムネイルを適用解除する方法

サムネイルが適用されているFrameを右クリックし、メニューから「Restore default thumbnail」を選択するとサムネイルが解除されます。

解除されると、描画領域のプレビューが表示されるようになります。

thumbnail3

この記事を読んだ方におすすめの記事

Figma初心者が使い方に困った時に試してほしいTips

今回は、納品されたり引き継いだFigmaのデザインデータを、修正・変更して再利用しようとした時によく発生するトラブルと、その対応方法をいくつか紹介したいと思います。 ... 続きを読む

figma-beginners-tips

Figmaでおすすめの写真・画像加工のTipsまとめ

今回はFigmaで写真や画像を加工するときにおすすめの方法を目的別に紹介します。Figmaの基本機能でできることから無料のプラグインを使用する方法など、当サイトでも人気の解説記事をまとめましたので、参考にしてみてください。 ... 続きを読む

figma-plugins-for-image-processing

FigJamの初心者におすすめのTipsまとめ

今回はFigJamの基本的な機能や便利な使い方を目的別に紹介します。FigJamの基本機能でできることから無料のプラグインを使用する方法など、当サイトでも人気の解説記事をまとめましたので、参考にしてみてください。 ... 続きを読む

figjam-beginners-tips

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告