Crunch Image Optimization

Optimize Groups, Layers, and Images before adding them to your sites.

We all know that keeping up with image optimization can fall off the radar really fast when you are cycling through design and approval. Leaving a lot on the developer to clean-up. Thankfully with Dev Mode you can now optimize your images right in Figma. No more need to export images, run to another program or the web, then upload to your site or development flow.

Optimize and review your designs right in Dev Mode by using JPEG or PNG image compression.

1. Source: Choose between the source* image or the layer itself
2. Scale: Adjust the scale you want the image to be optimized in
3. Quality: Adjust quality to fine-tune your image
4. Inspect: Pinch zoom on trackpads or ctrlKey + scroll to zoom image or drag your image around to see inspect the optimization.
5. Optimized images will be displayed in the lower section of the Inspect Panel.

*Your fill needs to be the top-most fill in the Fill panel