Even after a detailed design is finalized in Figma, the process of coding it into HTML/CSS demands significant time and effort. Manual coding inevitably involves numerous specification checks and adjustments to perfectly translate the design intent into a working browser view.
To address this inefficient process that most people in web production face, we have developed the low-code/no-code tool, Esprit Code.
We are excited to announce that we are on track to make Esprit Code available to users within the next few months. In this first post, we will introduce the core value of Esprit Code and how it aims to streamline your web production workflow.
The Core Value of Esprit Code: Boosting Production Speed
In traditional web production, a time-consuming manual barrier always existed between “Design” and “Coding.” The primary goal of Esprit Code is to provide a “fast track” to overcome this obstacle and significantly enhance the initial speed of your production.
Feature 1: Instant HTML/CSS Generation
With a single click, your Figma design is converted into the fundamental HTML and CSS that form the structure and style of your website.
Value: The need for manual markup of the basic website structure is eliminated. This allows you to drastically reduce the initial launch time for prototypes and landing pages (LPs).
Note on Speed: While image downloads via the API (depending on the design size) might take some time, the overall gain in efficiency is significant compared to writing code from scratch.
Regarding Fidelity: Esprit Code is not intended to guarantee 100% pixel-perfect replication of complex web applications. Our primary goal is the acceleration of prototype and LP development. Final design refinement and complex feature implementation will still require customization by developers. Our tool aims only to reduce the heavy lifting of the initial coding effort.
Feature 2: Advanced Design Support
Esprit Code handles complex Figma features that are typically challenging to convert:
- Auto Layout & Grid: Automatically converts Figma’s Auto Layout and Grid systems into CSS Flexbox and Grid
- Masks & Effects: Supports Alpha Masks, Luminance Masks, and Vector Masks with proper CSS rendering
- Gradients & Blend Modes: Preserves visual effects including complex gradients and blend modes
- Multi-frame Export: Export multiple frames at once, each generating its own HTML/CSS pair
Feature 3: Code Preview and Explorer
Before exporting, you can:
- View Generated Code: Review the HTML and CSS that will be generated for each frame
- Explore Frame Structure: Navigate through your design’s frame hierarchy
- Selective Export: Choose which frames to export
The name “Esprit Code” is inspired by the French word esprit, meaning “witty, spirited, or clever code.” Our tool is dedicated to allowing you to allocate more time to creative and essential design/planning tasks by accelerating the initial phase of web production.
Who Is It For, and What Can It Do? Practical Use Cases
Esprit Code provides powerful support for “streamlining the production process” for those facing the following challenges:
For Web Directors & Marketers
When you need to launch a new LP prototype or a test page quickly, you can generate the HTML/CSS foundation directly from your design data.
For Designers
When you want to publish your own work, such as a portfolio site or event page, the burden of coding knowledge is reduced, speeding up the process of bringing your designs to life.
For Front-End Developers
By offloading the initial repetitive HTML/CSS markup tasks to the tool, you free up time to focus on more complex and critical feature development.
A Message from the Development Team: Growing with Our Users
We are currently in the final stages of development, aiming for a general release of Esprit Code within the next few months.
Our initial objective is to have a few dozen early users actively use the tool. The honest and valuable feedback we receive will be essential for ensuring the stability and functionality improvement of the tool. We plan to start with a small-scale launch and grow Esprit Code alongside the voices of our early community.
Esprit Code is your new production partner, resolving the inefficiencies between design and implementation and accelerating the starting pace of your web development.
[Announcement] Calling All Early Adopters
Esprit Code is scheduled for general release within the next few months.
All release information and progress updates will be shared exclusively through this blog. Please stay tuned for future announcements!
The information in this article is current as of the time of writing, and features may be subject to change upon release.