code.to.design, the tech behind html.to.design

Just a year after launching, html.to.design is now a top-20 Figma plugin with over 350,000 users worldwide. And counting!

Those of you who have been using html.to.design for a while, have likely experienced the benefits it brings: big time savings, better collaboration with other designers, faster redesign projects and benchmarking, a tool that helps newbies learn how to use Figma… The list of use cases is long!

But have you ever wondered what makes html.to.design work? How it can convert any webpage into fully editable Figma designs?

The “magic” behind html.to.design 🪄

We like to say that html.to.design is magic, but it’s really not. It’s the result of years of hard work; developing and perfecting a unique technology that powers everything we do. We wanted to develop the perfect conversion from code to Figma; overcoming issues along the way like box-sizing, stacking context, the extraction of styles, dom serialization, shadow dom piercing, proper rendering of fonts, optimal asset bundling and iframe nesting…

Despite these challenges, we created code.to.design, and it does exactly what it says. code.to.design converts any HTML, CSS and JavaScript into detailed, high quality Figma designs. It is the core system powering not only html.to.design, but also our other plugin story.to.design.

Whether it’s code generated by AI, from a website or a local page, code.to.design turns it all into designs, placed directly in your Figma canvas. And what makes code.to.design so unique is its ability to generate designs that are fully editable. Designers and non-designers alike can make changes to everything that is generated in Figma, with the freedom to change colors, fonts and layout. This makes it easy for anyone to create beautiful designs quickly and efficiently.

Use code.to.design in your plugin 🚀

Now, we’re ready to share this technology with the world, and have decided to open up code.to.design to the public. We believe the potential of code.to.design is huge and we’re excited to see what can be created using our API. For example: what about the first generative-AI-to-Figma plugin? code.to.design could be used to transform AI-generated HTML into Figma designs, bridging the gap between AI and Figma.

While html.to.design is the perfect example of how code.to.design can work in a Figma plugin, we also have the code.to.design playground: a demo of the technology that anyone can try out for free. The code.to.design playground lets you write your HTML & CSS directly in Figma, preview it and import fully editable designs into your canvas. It’s a great way to see code.to.design in action, without the need for a full website in production.

So, if you’re a team making a Figma plugin, and want to automate design generation as part of your tool, check out code.to.design and tell us about your project. We’d love to help you build it!