Figmaのプロジェクトのサムネイルをイイ感じにする方法

f:id:kudakurage:20190820184515p:plain

最近ではSketchを使いつつも、Figmaを仕事で使うことが多くなってきています。段々とFigmaを使うプロジェクトが増えてきてFigma上でのプロジェクトの見え方もうちょっとなんとかならんのかいと思っていたので、ちょっとハック的な感じで対応しました。

本当にちょっとしたことですが、やってみると仕事をするときにガッカリ感を感じないのでオススメです。

具体的には、Figmaを普通に使っているとこんな感じ↓のサムネイルが並ぶことになると思います。

f:id:kudakurage:20190820184926p:plain
細々としたArtboardが表示されている残念なサムネイル

これをこんな感じ↓にイイ感じにわかりやすく見せるためのTipsです。

f:id:kudakurage:20190820185204p:plain
わかりやすくてイイ感じのサムネイル

1. サムネイル用のPageをつくる

f:id:kudakurage:20190820221536p:plain プロジェクトのページの一番上にサムネイル用のPageを作ります。 ページの名前はなんでもいいです。

2. 680x320pxのアートボードをつくる

f:id:kudakurage:20190820224954p:plain サムネイル用のPageに1つ680x320pxのアートボードを作ります。 アートボードの名前はなんでもいいです。

残念ながらこのアートボードがそのままサムネイルにはなりません。 周りの余白も含めてキャプチャされ、サムネイルとして使用されます。

3. わかりやすく大きな文字などでプロジェクトのサムネイルをデザインする

f:id:kudakurage:20190820225052p:plain 縮小されてしまうのでテキストの場合は大きな文字にしましょう。 ロゴを配置するとかでも良いと思います。

4. Frameの背景色を透明にし、Canvasの背景色を設定する

f:id:kudakurage:20190820222049p:plain
左がちゃんと処理した例。右はFrameとCanvasの背景色が異なっているときのサムネイル
FrameとCanvasの色が違うと枠がついたような感じになってしまうので、FrameとCanvasの色を同色にするか、Frameの背景色を透明にしCanvasの背景色を設定するとイイ感じになります。

必然的に背景は単色にする必要がありますね。オブジェクトを置く場合も枠を目一杯使うような配置やはみ出す感じの表現はできません。

(つまりこの記事の一番上の画像にあるようなサムネイルは実質不可能ですね。だましてすみません。)

まとめ

ということで、お試しください。 気分が上がるぐらいのことですけどね。