Check out our latest plugin code.to.design playground

No time for sleep over here at ‹div›RIOTS! We’ve just launched our third Figma plugin in under a year. Introducing… code.to.design playground 🚀

What is code.to.design playground?

code.to.design playground is a free Figma plugin that instantly transforms your code snippets into fully editable Figma designs. With code.to.design playground you can write HTML & CSS directly in Figma, preview the result and import fully editable designs into your Figma canvas.

How does it work? Simply copy-paste your code in the plugin, or manually type it in, and click Add to canvas. The plugin will instantly render the UI as fully editable designs on your Figma canvas.

Plus, you can also go back at any time to edit. Simply select any frame imported with code.to.design playground, refine the code and update the designs.

Why did we make it?

Automatically transforming code into Figma designs offers a couple benefits for both developers and designers…

Developers can design too!

Some developers may not be used to designing in Figma (or any other design tool, for that matter). code.to.design playground reduces the barriers for developers who want to use the same tool as their designer colleagues. If you don’t know how to use Figma, but do know how to code, let the plugin generate designs for you!

Designers can turn code into design elements

Instead of manually recreating something coded in Figma, designers can import it and turn it into an editable design in just a few clicks.

And we’re live!

code.to.design playground is free, and now available on Figma community. Try it out and tell us what you think!

👉 Run code.to.design playground