その他

2023.12.29

FigmaでWebPが書き出せるようになった話

Figmaの書き出し機能といまだにあまり仲良くなりきれてないコーダー、オガワです。

サイトスピードの改善などで使う頻度が上がってきた「WebP」。
デフォルトの機能で書き出せるツールはまだまだないので、WEBの変換ツールを使ってました…。
画像の数が多いとそれが結構手間になってくるので、FigmaでもWebPが書き出せたら良いなぁ〜と思っていたところ、Xでプラグインがあるとの情報が!

今回はそのプラグインを紹介したいと思います!

その名は「WebP Exporter」

FigmaからWebPを書き出せるようにしてくれる神のようなプラグイン「WebP Exporter」。

使い方は書くことがないレベルでかなり簡単です。
WebP Exporterを開いた状態で書き出したいコンテンツを選んで「Export」ボタンを押すだけ!
「Preferences」からは書き出しサイズなどの詳細を設定することも可能なので、2倍のサイズにしておきたい時にも対応できます。

ショートカットキーがあればもっといいなぁ…とは思いますが、変換ツールを使うことに比べたら普通のエクスポートと同じ感覚でできるのでかなり楽だと思います。

まとめ

コーディングツールは拡張機能で自分の使いやすいようにカスタマイズしているのですが、Figmaもそれができるのでツールを変えたことでコーディングがかなりしやすくなったなぁと思ってます。

今回のWebPのプラグインもそうですが、コーディングの効率をよくできるプラグインはまだまだありそうですね!

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2022.01.24

    効率的なCSS記述になる!inherit の使い方

    その他

  • 2021.04.09

    コーディング作業に役立つサイト5選

    その他

  • 2021.10.19

    HTMLでメールを送る「mailto:」の使い方【注意点も解説】

    その他

TAG

×