WebP Generator Plugin for Figma
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 \ 4xWeb output:
image \
image_1x.webp
image_1_5x.webp
image_2x.webp
image_3x.webp
image_4x.webpiOS (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
}
}Check out the plugin at Figma.