How to Convert and Import Images into Figma
Figma is the industry standard for UI design, but its image import capabilities have specific format requirements. Dragging an unsupported format into a Figma canvas results in nothing happening, with no error message or feedback. If you are working with HEIC photos, AVIF images, or other formats that Figma does not recognize, you need to convert first.
This guide covers Figma's supported image formats, how to convert incompatible files, and best practices for working with images in Figma designs.
Step-by-Step Instructions
- Know Figma's format support
Figma supports JPG, PNG, GIF, SVG, and WebP for import. It does not support HEIC, AVIF, TIFF, BMP, or PSD. For design assets, SVG is preferred since it scales without quality loss. For photographs and raster graphics, PNG gives the best quality for design work.
- Choose the optimal format for your use case
Use SVG for icons, logos, and vector illustrations. SVG elements are fully editable in Figma. Use PNG for screenshots, photos used as design references, and raster graphics where lossless quality matters. Use JPG for placeholder photos and content images where file size matters more than pixel perfection.
- Convert your images
Open imageconvert.co and convert incompatible images to PNG for maximum quality or JPG for photographs. For HEIC photos from an iPhone that you need in a Figma mockup, converting to JPG at 90% quality preserves more than enough detail for design purposes.
- Import into Figma
Drag and drop your converted images directly onto the Figma canvas, or use the menu: Main menu > File > Place image. You can also paste images from your clipboard with Cmd+V or Ctrl+V. Figma imports the image as a fill on a rectangle, which you can resize and mask.
Working with Images in Figma
When you import a raster image into Figma, it becomes a fill property on a shape. This means you can apply masks, adjust the fill mode (fill, fit, crop, tile), and apply image effects like blur and saturation directly in Figma. Understanding this behavior helps you work more efficiently with imported images.
For best results, import images at their intended display resolution. Figma does not resample images on import, so a 200x200 pixel image placed on a 1000x1000 frame will look pixelated when exported at full size.
SVG Import Tips
SVG files import into Figma as fully editable vector objects. This makes SVG the ideal format for icons, logos, and illustrations that you want to modify in Figma. However, not all SVGs are created equal. SVGs with embedded raster images, complex filters, or CSS styling may not render correctly in Figma.
For the cleanest import, use SVGs with inline styles, minimal filters, and no external references. If an SVG does not look right in Figma, try converting it to PNG as a fallback and importing the raster version.
Exporting from Figma
Figma exports in PNG, JPG, SVG, and PDF. When exporting designs that contain imported images, Figma reprocesses the images at the export resolution. For the best export quality, start with high-resolution source images. Exporting at 2x scale produces retina-ready assets.
Frequently Asked Questions
Can Figma open HEIC files?
No, Figma does not support HEIC import. Convert HEIC photos to JPG or PNG before importing into Figma.
What is the best format for importing photos into Figma?
PNG for the highest quality, JPG for smaller file sizes. If the photo is a design element that needs to look sharp at any zoom level, use PNG. If it is a placeholder or content image, JPG at 90% quality is fine.
Does Figma compress imported images?
Figma stores imported images at their original quality within the file. However, images are displayed on the canvas at screen resolution and only exported at full quality when you use the Export function.
Convert images to SVG-ready PNG