EcoSimulateur

About this plugin

🌱 Figma Plugin “EcoSimulateur by Adveris”: Environmental Analysis from the Design Phase

EcoSimulateur by Adveris is a Figma plugin developed by the agency Adveris to integrate web eco-design principles from the very beginning of a digital project. It enables users to predict the EcoIndex score — the reference indicator developed by GreenIT / ecoindex.fr to measure the environmental impact of a web page — based on a wireframe or a graphic mockup created in Figma.

🔍 Plugin Objective

The goal is simple: provide an estimate of a web page’s EcoIndex (environmental footprint) before development even starts, helping to guide design decisions towards more sustainable alternatives.

🧠 How it Works

The plugin automatically analyzes the structure and graphical content of a Figma mockup, and extrapolates the future EcoIndex score of the final HTML page based on correlations drawn from past real-world web projects.

Specifically, the plugin estimates the three components of the EcoIndex:

1. DOM Complexity: by analyzing the number and types of layers in the mockup, it estimates the complexity of the expected HTML code.
2. Number of HTTP Requests: number to be entered by yourself (if new website: default number is GreenIT median / if existing website redesign: enter the current number)
3. Page Weight: an estimate of the total weight (in KB) of the resources that will be generated from the mockup (based on images/videos area and average weight/px2). In "Options", you can customize weight/px2 and addvideo weight.

🛠️ A Decision-Support Tool for Designers

The plugin is preventive and educational: it helps designers spot areas in their mockup that are likely to generate a heavy or complex webpage, and therefore one with a poor environmental performance.

For example:

“Your current mockup could result in a page with an EcoIndex score of E. By simplifying some components and reducing resource usage, you could aim for a C or better.”

This immediate feedback allows adjustments early in the design process, instead of making costly corrections after development.

✅ Key Benefits

1. Anticipation: predict a site’s environmental impact before it’s even coded.
2. Design Optimization: steer design choices towards more lightweight and efficient solutions.
3. Seamless Integration: the plugin is directly usable within Figma without disrupting the workflow.
4. Team Education: raise awareness among designers about eco-design with concrete indicators.

🔗 Reference: The EcoIndex from GreenIT.fr

The EcoIndex is an evaluation method developed by the GreenIT.fr collective. It assigns a grade from A (very good) to G (very poor) to a webpage based on three factors:

1. Page Weight (in KB)
2. Number of HTTP Requests
3. DOM Complexity (HTML structure)

These indicators reflect the consumption of digital resources and are translated into estimated environmental impacts (CO₂ emissions and water consumption).

💡 In Summary

This "EcoSimulateur" Figma plugin by Adveris is a simple yet powerful tool for embedding eco-design principles into the design process. It turns every mockup into a lever for environmental performance, empowering designers to act right from the earliest stages to create a more sustainable web.