【Figma】縦長画像の画質が荒くならないようにする方法

2024/09/30

Figma

こんにちは。FigmaをつかってWebデザインのレビューやPDFにエクスポートしたいとき、縦長キャプチャを撮ってFigmaで読み込んだら、画質が悪くなって「ファ!?」っとなったことはありませんか?
今回、ついに私も我慢の限界を迎え、なんとかしようと戦ってみたので皆さんにも共有します。

まずは普通にキャプチャを貼り付けてみる

今回はこちらのページ全体をキャプチャしていきます。
https://corporate.irori.dev/postshttps://corporate.irori.dev/posts

こんな感じで文字が潰れちゃうんですよね。。
2024-09-30-6.jpg

ちなみに元ファイル(右画像)はちゃんとキレイです。
2024-09-30-7.jpg

プラグインで解決!

結論、Insert Big Imageというプラグインを入れると解決しました。
2024-09-30-8.jpg

プラグインさえ入れてしまえばあとは簡単で、ポップアップ画面から画像を指定するだけで出来てしまいます。
2024-09-30-9.jpg

比較すると一目瞭然ですね!

▼Before
2024-09-30-10.jpg

▼After
2024-09-30-11.jpg

「なんだ。プラグイン入れるだけか」という話ではありますが、キャプチャを取る方法を疑ったり色々試行錯誤していると結構時間食っちゃうので、地味に知ってて得するTipsかなーと思っています。
それではまた〜