Export WebP files from Figma for Web, Android, and iOS

Features

• Export any selected Figma node as WebP
• Android densities supported: mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi
• Automatically generates the correct folder structure for Android or Web projects
• The uplifting feeling of having made the project a little better

Export Structure

Android output:

drawable-mdpi \    1x
    image.webp
drawable-hdpi \    1.5x
    image.webp
drawable-xhdpi \   2x
    image.webp
drawable-xxhdpi \  3x
    image.webp
drawable-xxxhdpi \ 4x

Web output:

image \
    image_1x.webp
    image_1_5x.webp
    image_2x.webp
    image_3x.webp
    image_4x.webp

iOS (limited WebP support)

Uses Apple's asset catalog convention:

image \
    image.webp    1x
    [email protected] 2x
    [email protected] 3x

[!WARNING]
iOS does not support WebP in asset catalogs natively (as of now), so a small helper is needed.

SwiftUI: WebP Image Loader

If you want to load WebP images in SwiftUI, add something like this (images must be bundled with your app):

extension Image {
    init?(webp name: String) {
        // Determine current screen scale (1x / 2x / 3x)
        let scale = Int(UIScreen.main.scale.rounded())
        let candidates = [
            "\(name)@\(scale)x",
            "\(name)@3x",
            "\(name)@2x",
            name
        ]

        for fileName in candidates {
            if let url = Bundle.main.url(forResource: fileName, withExtension: "webp"),
               let data = try? Data(contentsOf: url),
               let uiImage = UIImage(data: data, scale: CGFloat(scale)) {
                self = Image(uiImage: uiImage)
                return
            }
        }
        return nil
    }
}