Sustainalyzer

About this plugin

Sustainalyzer helps you evaluate the ecological impact of your Figma designs. It detects design elements that conflict with the Web Sustainability Guidelines (WSG) and scientific research on digital sustainability.

The plugin checks for the following sustainability issues:

1. Avoid videos, particularly autoplay or background media
2. Minimize image use, especially large or excessive images
3. Optimize images for size, format, and scaling
4. Avoid third-party services (e.g. embeds, maps, social widgets)
5. Avoid decorative elements that add visual weight without purpose
6. Limit font variants to reduce font file size
7. Prefer system fonts over custom fonts
8. Reduce complexity by limiting the number of elements
9. Disable animation autoplay to reduce processor load
10. Consider older devices, avoiding effects that degrade performance or compatibility
11. Use a design system to support reuse and reduce redundancy
12. Choose energy-efficient colors, especially for large UI areas

Each guideline is tagged with an impact level—high, medium, or low—indicating its potential contribution to emissions. You can filter the results by impact level to focus on the most critical issues.

To use Sustainalyzer, simply select the elements you want to analyze and run the plugin.