You drag an AVIF file into Figma and get an error: "Unsupported file format."

This is expected: Figma Design only accepts JPG, PNG, HEIC, WebP, GIF, and TIFF (Safari only). AVIF isn't on that list, despite being supported by every major browser since 2022 and used widely for web image optimization.

The image.to.design plugin fills this gap. Drop your AVIF file in, click import, and it appears on your canvas.

Quick Guide

1. Open your Figma file and run image.to.design
2. Drag and drop your AVIF file into the plugin window (or click Browse)
3. Select your import preference: as an image or as editable layers
4. Click Import
5. Your AVIF image appears on the canvas, ready to use

Step-by-Step Tutorial

Step 1: Install and Run image.to.design

Open the Figma file where you want to add your AVIF image. Go to the Resources menu (the icon in the toolbar) and search for "image.to.design" in the Plugins tab.

You can also find the plugin directly in the Figma Community and click "Open in..." to add it to your workspace.

Alternatively, if you've used the plugin before, press Ctrl/Cmd + / to open the quick actions menu and type "image.to.design" to launch it directly. The plugin window opens as a modal overlay on your Figma canvas.

Step 2: Upload Your AVIF File

With the plugin open, drag your .avif file directly into the plugin window. You can also click the Browse button to select the file from your computer's file system.

The plugin interface shows a preview of your file once it's loaded, confirming the upload was successful before you proceed with the import.

Step 3: Choose Your Import Method

image.to.design offers two ways to import your image:

As an image (Free): Your AVIF file is converted and placed on the canvas as a standard image fill. This preserves the original visual exactly as-is and works identically to how Figma handles natively-supported image formats. The image appears as a rectangle layer with the image applied as a fill—you can then resize it, apply effects, crop it, or use it as a fill for other shapes.

As editable layers (Credits required): The plugin uses AI to analyze your image and recreate it as editable Figma elements. This option works best when your AVIF contains UI screenshots, app interfaces, or design mockups that you want to modify. The AI identifies components, text elements, and layout patterns, then generates editable Figma layers with proper structure and naming.

For photography, illustrations, and most asset imports, choose the image import option. Reserve the editable layers option for UI screenshots you actually intend to modify or iterate on.

Step 4: Import and Use Your Image

Click Import. The plugin converts your AVIF file and places it on your Figma canvas within seconds. Your image appears as a rectangle layer with the image set as the fill, just like any other image in Figma.

The imported image behaves like any native Figma image: you can resize it using the handles, double-click to enter crop mode, adjust exposure and saturation in the image properties panel, use it as a fill for shapes and frames, or place it within components and design systems.

If your original AVIF image exceeds 4096 x 4096 pixels, Figma automatically scales it down proportionally so its longest dimension is 4096 pixels or fewer. This is a standard Figma limitation for all images, not specific to the plugin or AVIF format.

What is AVIF?

AVIF stands for AV1 Image File Format. It's a modern, open-source image format based on the AV1 video codec, developed by the Alliance for Open Media—a consortium that includes companies like Google, Mozilla, Netflix, and Apple. The AVIF specification was finalized in February 2019, with version 1.1.0 following in April 2022.

The format stores images compressed with the AV1 codec inside a HEIF (High Efficiency Image File Format) container—the same container structure used by HEIC, but with different underlying compression. This gives AVIF access to modern container features while benefiting from AV1's compression efficiency.

Browser support for AVIF has matured significantly: Chrome added full support in version 85 (August 2020), Firefox in version 93 (October 2021), and Safari in iOS 16 and macOS Ventura (September-October 2022). Microsoft Edge added support in version 121 (January 2024). This broad browser adoption means AVIF images are now common on the modern web.

Operating system support has followed a similar path. Apple's iOS 16, iPadOS 16, and macOS Ventura include native AVIF support—you can view AVIF files directly in Finder, Quick Look, and the Files app. Major creative software has also added AVIF compatibility: GIMP added import and export in October 2020, Adobe Illustrator added support in May 2022, Adobe Lightroom in October 2023, and Adobe Photoshop in June 2025.

Key characteristics of AVIF:

• Compression: Delivers significantly smaller file sizes compared to JPEG and WebP at equivalent visual quality. Netflix's testing showed better compression efficiency than JPEG with better detail preservation and fewer compression artifacts.
• Color depth: Supports 8-bit, 10-bit, and 12-bit color for high-fidelity image data
• HDR support: Handles high dynamic range images with wide color gamuts (WCG), allowing brighter highlights, deeper shadows, and a wider range of colors approaching what the human eye perceives
• Transparency: Full alpha channel support like PNG, making it suitable for UI elements and images requiring transparent backgrounds
• Animation: Can store animated image sequences, offering an alternative to GIF with much greater visual fidelity
• Metadata: Stores EXIF camera data, ICC color profiles, and XMP editing history

WordPress added native AVIF support in version 6.5, and CDNs like Cloudflare and Vimeo support AVIF image delivery.

Why Import AVIF into Figma?

Work with Web-Optimized Assets

AVIF is a common format for web images. Without a way to import these files directly, you'd need to convert them externally before bringing them into Figma.

Future-Proof Your Workflow

AVIF adoption continues to grow. WordPress 6.5 added AVIF support, and major browsers have supported it since 2020-2022. The format is backed by the Alliance for Open Media and royalty-free.

Use Cases

1. Web design projects: A developer sends you optimized hero images and product photos in AVIF format from the production site. Import them directly to mockup new layouts using the actual production assets.
2. Design system maintenance: Your team's CDN serves AVIF images to users. Import these files to audit how images appear at various sizes and compression levels within your design system documentation.
3. Competitive analysis: You've captured screenshots from competitor sites that use AVIF. Import them into Figma to annotate and reference during design reviews.
4. Photography workflow: A photographer delivers high-quality images in AVIF to save on file transfer sizes. Import them directly into your mood boards and presentation decks in Figma.

Benefits of Using image.to.design

Direct import path: No need to convert files externally using desktop apps or online converters. Drop your AVIF into the plugin and it appears in Figma.

No quality loss from double conversion: Avoid the quality degradation that comes from converting AVIF to another format before importing. The plugin handles the conversion in one step.

Format flexibility: Beyond AVIF, image.to.design handles HEIC, WebP, JPEG XL, BMP, TIFF, and other formats that Figma doesn't support natively. One plugin covers all your image format needs.

AI-powered editing option: When you need to modify a UI screenshot saved as AVIF, the editable layers import converts it to actual Figma objects you can manipulate.

Conclusion

Figma doesn't import AVIF files directly—but image.to.design fills that gap in seconds. Whether you're handling web assets, developer handoffs, or modern image formats from any source, the plugin makes the import process straightforward.

Search for "image.to.design" in the Figma Community and try it on your next AVIF file.

For more import solutions, visit anything.to.design to discover plugins for PDFs, Office documents, Adobe files, and 30+ other file formats.

FAQ

Q: Does Figma support AVIF natively?

A: No. Figma Design supports JPG, PNG, HEIC, WebP, GIF, and TIFF (Safari only) according to Figma's documentation. AVIF is not included in this list, which is why a plugin like image.to.design is necessary.

Q: What happens to image quality when importing AVIF through the plugin?

A: The plugin converts your AVIF file and places it in Figma while preserving the visual content. If your original image exceeds 4096 x 4096 pixels, Figma will automatically scale it down—this is a Figma limitation that applies to all image imports, not specific to AVIF or the plugin.

Q: Can I import animated AVIF files?

A: AVIF supports animation, but the plugin imports images as static files.

Q: What other image formats does image.to.design support?

A: The plugin supports AVIF, BMP, GIF, HEIC, JPEG, JPEG XL, PNG, SVG, SVGZ, TIFF, and WebP—covering most image formats you'll encounter in design workflows.