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:
- 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.
- 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.
- 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.
