FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。デザイナー、コーチ、ディレクター / 井川

.

Memo

です・ます調の文章でなくすみません。

当初の名残りです..pets

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

TinyImage Compressorプラグインとは?

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

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

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をインストール。

インストール方法。

インストールは上部メニューの「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(グレースケールで書き出した場合の画像。

画像の軽量化の方法。

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

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

例)

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

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

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

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

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

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

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

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

Drawing: Norihisa Igawa


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

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

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

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


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

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

Figma 関連メモ。

デザインツールFigmaのロゴ。
使い方 & プラグインなど。

免責事項について

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