FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。 / いがわ

.

Memo

FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。

TinyImage Compressorプラグインとは?

圧縮だけでなく、印刷用やWeb用などにも。
TinyImage Compressor

TinyImage Compressorは、Figmaからエクスポートするファイルを軽量化してくれるプラグイン。

CMYKや、WebPへの変換も。

Figmaでは現時点サポートされていないCMYKに変換したり、画像形式をWebPなどに変換してくれる。

印刷用にしたい場合はCMYKでPDFのエクスポート、Web用にしたい場合はRGBでWebPに、というように使い分けることができる。

作者の方(Hypermaticさん)が日本好きなのか、アニメやカタカナ、プラグインサイトには日本の写真やKyoto(京都)やMatcha(抹茶)の文字、デザインにも日本の伝統文様である青海波が見られる。

FigmaでCMYKやWebP。TinyImage Compressorのプラグインページ。

作者:Hypermatic
プラグインサイト:TinyImage Compressor

印刷物用は、

PDFで、CMYKでのエクスポートが可能。

  • PDF

場合によってはJPGも可。

Web用の場合は、

主要なファイル形式は圧縮、変換可能。

  • JPG
  • Progressive JPEG
  • PNG
  • SVG
  • WebP
  • AVIF
  • GIF
アニメーションは、

アニメーションにも対応している。

  • GIF
  • MP4
  • WebM

など、主要な形式はOK。

無料プランと有料プランあり。

フル機能はパワーユーザー、組織向けとなっているが、15回までの試用や、機能限定の無料プランもある。

TinyImage Compressorのプランのスクショ。

日本語へ翻訳。

TinyImage Compressorのプランのスクショ。(日本語に翻訳)

開発元のサイト:TinyImage for Figma | Export compressed images from Figma and reduce file sizes by up to 95%. – Hypermatic


TinyImage Compressorの保存と使い方。

TinyImage Compressorの入れ方。

TinyImage Compressorを検索。

プラグインは上部メニューの「Resources(リソース)」から、「Plugins(プラグイン)」のパネルを開き、「TinyImage Compressor」で検索する。

「TinyImage Compressor」が表示されたら、クリックすると画面が切り替わる。

TinyImage Compressorの入れ方。

右横の三点リーダーから「Save(保存)」ができる。

以前は三点リーダーからでしたが、現在はブックマークからに変わっています。)

TinyImage Compressorの入れ方

右クリックメニュー、または、プラグインの配布サイトTinyImage Compressorからでも保存可能。

プラグインは保存しなくても使用できる。
保存しない場合。

保存をせずに使用する場合は、「TinyImage Compressor」のパネルが表示されたら、「Run(実行)」をクリック。

TinyImage Compressorの入れ方。


「TinyImage Compressor」パネルの開き方。

「Main menu(メインメニュー)」 > 「Plugins(プラグイン)」 > 「TinyImage Compressor」で開く。

右クリックメニューからでも可。

FigmaでCMYKやWebP。TinyImage Compressorプラグインの使い方。

再起動などは不要で、そのまますぐに使うことができる。


今回の使用画像。
Diana Hさんによる絵画。

Photo and Painting by Diana H


CMYKへの変換、エクスポート方法。

現在のところ有料プランの機能だが、15回までは無料プランで使用可能。

  1. フレームを作成し、画像を配置する。
  2. CMYK化したい画像を選択する。
  3. 「TinyImage Compressor」のパネルを開く。
  4. パネルの上部メニューから、「Create PDF」を選択。
  5. パネル左下のプルダウンメニューから、「CMYK(For Print)」を選択。
  6. パネル左側の「Export PDF」をクリック。
  7. 設定したPDFファイルがダウンロードされる。

という流れとなる。

例)

TinyImage CompressorでのCMYKの設定方法。

画像サイズとフレームサイズを合わせる。
dpiのスライダーは、300、150、72の3択となっている。

画像サイズとフレームサイズを合わせなかった場合。

画像とフレームサイズが合わない場合、間に余白ができてしまうので注意。

画像サイズとフレームサイズを合わせずにエクスポートした画像。
Grayscale(グレースケールで書き出した場合。)

カラー画像をグレースケールで書き出すことも可能。

Grayscale(グレースケールで書き出した場合の画像。

画像の軽量化の方法。

ダウンサイズして書き出す。

レイヤーのダウンサイズはカジュアルユーザー向けの無料プランでも無制限で利用可能。

  1. 軽量化したい画像を選択する。
  2. 「TinyImage Compressor」のパネルを開く。
  3. パネルの上部メニューから、「Downsizer」を選択。
  4. 「Size Target」で軽量化するサイズを調整。(今回の例では200KB)
  5. 右上の「Export」から書き出し。
  6. 軽量化されたファイルがダウンロードされる。

例)

TinyImage Compressorでの画像軽量化の設定方法。

最初行った際にはうまくいったが、あたらめてスクショを撮りながら進めていると、「Export」ボタンがグレーアウトのままで書き出しができなかった。

プラグインが頻繁に更新がされているようなので、もしかしたらその影響なのかもしれない。

軽量化された画像。
ペン画。

下記は、うまくいったときの画像。試しに200KBの設定をして書き出したところ、ほぼ想定通りの197KBと軽量化がされている。

この場合はCMYK化の場合と違い、フレームを作る必要がなかった。

また、上記のカラフルな色の画像ではなく元々白黒のペン画の画像だが、うまくいったいかなかったの原因に、色は関係ないと思われる。

TinyImage Compressorで軽量化された画像スクショ。Drawing: 井川宜久。

Drawing: Norihisa Igawa


アニメーションにも対応している。

今回は行わなかったが、「TinyImage Compressor」はアニメーションGIFやWebMに対応している。

その場合は、Figmaを使用するブラウザがChromeかBraveでなければならないとのこと。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

Figma 関連メモ。

デザインツールFigmaのロゴ。

使い方 & プラグインなど。


免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。