FigmaからWebPで書き出しす方法。Olive Pressの使い方。 / いがわ

.

Memo

FigmaからWebPで書き出す。Olive Pressの使い方。

Figmaのプラグイン「Olive Press」とは?

FigmaからWebPで書き出せる。

Olive Press

画像ファイルをWebPの形式で使うことが増えている。

現時点、FigmaやIllustratorなどのソフトはデフォルトでWebPは書き出せないが、画像形式を変換できるWebサイトはネット上に多々ある。

また、Figmaのプラグイン「Olive Press」は、Figmaから直接.webp形式で書き出すことができる。

Figma(フィグマ)からWebPで書き出しす方法。Olive Pressプラグイン。

作者:Alex Vale
プラグインサイト:Olive Press – Image Compression


Olive Pressの保存と使い方。

Olive Pressの入れ方。

入れ方は簡単。数ステップで。pets

Olive Pressを検索。

プラグインはツールバー >「Actions(アクション)」から、「Plugins(プラグイン)」のパネルを開き、「Olive Press」で検索する。(小文字でも可。)

新しいインターフェイスのUI3では、ツールバーは画面下部に移動しています。)
Resources(リソース)はActions(アクション)に名称が変わっています。)

Figma(フィグマ)からWebPで書き出しす方法。Olive Pressの入れ方。

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

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

Olive Pressの入れ方。

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

プラグインを保存しない場合。

保存をせずに使用する場合は、「Olive Press」パネルの「Run(実行)」をクリック。

FigmaからWebPで書き出しす方法。Olive Pressの入れ方。


「Olive Press」パネルの開き方。

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

FigmaからWebPで書き出しす方法。Olive Pressの入れ方。

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


「Olive Press」のパネルでWEBPを選択する。

書き出したい画像を選択し、「Olive Press」のパネル左下のプルダウンメニューで「WEBP」を指定する。

ここでJPGなどにすると書き出し時に.webpにならないので注意。)

FigmaからWebPで書き出しす方法。Olive Pressの使い方。


右上の「歯車」のマークから「Settings」を開く。

JPGやPNG、WEBPの項目がある。スライダーや左下のプルダウンメニューから圧縮の具合を調整する。

その後、「Save」をクリック。

ファイルが保存されるというわけではなく、設定が保存される。)

FigmaからWebPで書き出しす方法。Olive Pressの使い方。


左下の「+」マークをクリックすると、「Files」の項目にファイル名が表示される。

ここで、レスポンシブ用に書き出す画像サイズ(1×や2×など)を決めることができる。

FigmaからWebPで書き出しす方法。Olive Pressの使い方。

サイズや書き出し形式(WEBP)を確認後は、「Compress」のボタンをクリックする。

左下の表示は「WEBP」でなくてもよい。

仮に左下がJPGでも、「Files」の項目の右側が「WEBP」であれば.webp形式で保存される。)

FigmaからWebPで書き出しす方法。Olive Pressの使い方。

すると、WebPファイルがダウンロードされる。

FigmaからWebPで書き出しす方法。Olive Pressの使い方。

今回は「1234 × 1766」の画像サイズで、「1×」、「Medium」を選択。その結果わずか42KBだった。

メインビジュアル的の用途としては画質が粗いが、サムネイルには使えるだろう。

ちなみにJPGやPNG、WebPなどWeb用の画像形式は約1670万色の色数を扱えるが、絵画の場合、厳密な色の再現は難しい。)

画像出典:Wikipedia – 『真珠の耳飾りの少女』1665年頃。マウリッツハイス美術館(ハーグ)。


補足。Figmaのグループ化と、著作権について。

グループ化。

Figmaで編集した写真や画像を書き出す際は、Olive Pressに限らずグループ化が必須となっている。

グループ化は、ショートカットや右クリックメニューから可能。

ショートカット。
  • Mac:「command」 + 「G」
  • Win:「Ctrl」 + 「G」

FigmaからWebPで書き出しす方法。Olive Pressの使い方。

著作権について。

Johannes Vermeer(ヨハネス・フェルメール)の絵画は著作権が切れており、今回使用させていただいた「真珠の耳飾りの少女」はパブリックドメインとなっているので自由に使える。(作者への敬意を忘れずに、常識の範囲内で。)

Picasso(ピカソ)やDalí(ダリ)、レオナール・フジタ (藤田嗣治)、Warhol(ウォーホル)などは著作権が切れていないので注意が必要。

(基本的に作者の没後70年間は著作権が保護される。保護期間は2018年12月29日までは50年だったので気をつけなければならない。)

FigmaからWebPで書き出しす方法。Olive Pressの使い方。

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


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

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

Figma 関連メモ。

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

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


免責事項について

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