Crunch Image Optimization
Optimize your images for production directly in Dev Mode
Plugin Preview
About this plugin
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.
- Source: Choose between the source* image or the layer itself
- Scale: Adjust the scale you want the image to be optimized in
- Quality: Adjust quality to fine-tune your image
- Inspect: Pinch zoom on trackpads or ctrlKey + scroll to zoom image or drag your image around to see inspect the optimization.
- 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
Plugin Details
| Version | 2 |
|---|---|
| Created | June 28, 2023 |
| Last Updated | July 10, 2023 |
| Category | Software development |
| Creator | Dan Gavin |
| Stats | 98 installs, 12 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:{"main": "dist/ui.main.html", "dashboard": "dist/ui.dashboard.html"}
- main:dist/code.js
- Network Access:
My plugin uses a blob: web-worker for optimizing images
- Editor Types:dev
- Allowed Domains:
- *
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI
SkewDat
Skew any layer or group with all layers preserved to edit.