BIG
Figma

How to export images in WebP from Figma?

BIG linden / Support Docs / How to export images in WebP from Figma?
Last edit: January 23, 2023
(3 days ago)

Figma

How to export images in WebP from Figma?

Q:

We are using .webp images on our website, but Figma doesn’t seem to have an export option for exporting to WebP images. Do you have any good ideas on how to make this workflow possible and allow us to export WebP from Figma?

Issue

The client needs to know the most efficient way to export WebP images from inside Figma to save their organization time.

Possible solution

3 Ways to Export WebP (.webp) images from Figma

Figma does not have an export option for WebP images, just yet. However, there are some plugins and tools that you can use to easily accomplish this in your Figma workflow:

  1. Use a third-party image converter such as Cloud Convert and manually upload your exported components as PNG files into those platforms to convert them into .webp.
  2. Use a Figma plugin to enable the functionality. There are numerous options that make this possible. It really makes us wonder why this hasn’t yet made it into a release of Figma, but thankfully the community has stepped up and filled the need for everyone.
  3. If you’re comfortable using code, write scripts in NodeJS that will allow you to read PNG/ JPEG files from disk (generated by exporting out of Figma), compress them automatically with cwebp’s API endpoints, rename the newly generated webps according your naming conventions – all within seconds!

These solutions provide better compression capabilities than most traditional image formats such as JPEG or PNG while also reducing storage space requirements. Webp is faster loading for websites due to the improved compression capability; thus making it an ideal choice.

What is .Webp about? Why should we be using this format?

WebP is an image format developed by Google that provides better compression and quality compared to most traditional image formats such as PNG or JPEG.

WebP images are smaller in size, so they load faster on your website. Plus, because of the improved compression capability, WebPs require less storage space than other image formats.

Figma Plugins to Export .WebP from Figma

Here are a couple of different plugin options that enable WebP exporting from inside Figma. We’ll update this as we find additional options.

WebP Exporter by Felix and Tobias

This awesome little free Figma plugin lets you “Export .webP files from Figma for Web or Android.”

WebP Features

  • Export any image from Figma as .webP
  • Supported resolutions include xxxhdpi, xxhdpi, xhdpi, hdpi, mdpi
  • Folder structure is easy to match your Android project

Arya Kagathara said about it in December 2022: @aryakagathara “Awesome Plugin, Great Work :)”

Learn more about this Figma plugin on the official Figma plugin community page.

TinyImage by Hypermatic

TinyImage is a plugin for Figma that allows users to export compressed images directly from the platform and reduce file sizes by up to 95%.

It supports JPG, PNG, SVG, WebP, AVIF GIF and PDF files. TinyImage also provides advanced features such as image compression control settings with customizable defaults; layer downsizing; animated GIF or MP4 creation capabilities; PDF optimization for huge savings on exported filesize; and support for custom naming formats.

Features

  • Exports images up to 95% smaller than the default exports from Figma
  • Create and export animated GIFs, WebPs, WebMs or MP4 videos from selected layers
  • Add .mp3 audio files to MP4 video exports
  • Resulting images are perfect WebP for uploading to WordPress or other CMS
  • Downsize and compress your Figma image fills to their layer size
  • Built-in ICC color profile support for PNG exports
  • Convert JPG and PNGs to WebP, AVIF or Progressive JPEG
  • Use percentage based compression, or maximum KB file size targets
  • Set specific compression level overrides per image on export
  • Merge and export PDFs from Figma frames into a single compressed PDF file
  • Add passwords to exported PDF file
  • Export PDFs as RGB, CMYK or Greyscale for any need
  • Automatically save batch export of images as a .zip file

The Pro version of the software offers additional features like unlimited compressions/downsizes/exports in addition to premium customer support. A free trial period of 15 days is available before reverting back to the Free version which can be used forever.

Android WebP Generator by Jia Sen Wu

This older plugin we found in the Figma community claims it “converts any selected object into a webP file” and is “specifically meant to be used for android development”. So, if you’re working on an Android project, this might just be the perfect tool to export WebP from Figma.

The objects are saved into the default android resource folders:
1x – drawable-mdpi
1.5x – drawable-hdpi
2x – drawable-xhdpi
3x – drawable-xxhdpi
4x – drawable-xxxhdpi

There are some recent reports of bugs, but maybe this is with users working on non-Android projects (i.e. websites, Apple app development, etc.).

Learn more about this plugin at the official Figma plugin community page.

Additional reading

  • Here’s a recent conversation about this on the Figma support community discussing possible implementations for future .WebP support natively in Figma. Since April 2021, there have been 59 users advocating for WebP support in Figma. From Sketch to Photoshop and Illustrator, many people are having difficulty exporting images in this format. TinyImage is a 3rd party plugin mentioned a lot in the thread that can do it but it isn’t free, and the subscription is kind of expensive. People are hoping Figma supports this feature natively soon so they don’t have to go back to using other platforms such as Sketch or Adobe programs like Photoshop and Illustrator.

More articles about Figma

More articles related to .

Capabilities related to Figma: