On this page
About code.to.design playground
code.to.design playground is a free Figma plugin published by divRIOTS in 2023. It works in Figma Design and FigJam and has 48,930 users and 973 likes on the Figma Community. It ranks #13 in Website to Figma on our lists.
In the developer's words
Instantly transform your code snippets into fully editable Figma designs.
Powered by code.to.design technology🚀
How does it work?
Write HTML & CSS directly in Figma, preview the result and import fully editable designs into your Figma canvas.
Go back at any time to edit! Simply select any frame imported with code.to.design, refine the code and update the designs.
The plugin requires an API_KEY.
Get your API_KEY directly in the developer's portal.
You get 10 free calls credited to your API_KEY automatically.
Purchase more calls any time. See pricing.
------------------------------
Brought to you by ‹div›RIOTS
------------------------------
What's new
Version 285 · released Sep 17, 2026
The developer didn't publish release notes for this version.
Permissions and privacy
Network access
code.to.design playground's manifest allows network access to any domain ("*"), so Figma doesn't limit where it can send data.
- *
Extra permissions
- Reads your Figma name and avatar
Read from the plugin's published manifest.
Where code.to.design playground ranks
code.to.design playground alternatives
- 1
html.to.design
by divRIOTS
2.7M users39KFree + $18/mo upgradeConvert any website into fully editable Figma designs
- 2
Convertify Sketch/Adobe/Google
by Hypermatic
539K users5.3KFree + paid featuresExport to Sketch, XD, After Effects, PSD, InDesign — or — Import XD, Illustrator, PSD, InDesign, PDF
- 3
PDF to Figma
by Gautham 🌶
337K users2.7KFreeImport a PDF file into Figma as an image
- 4
Codia AI Design
by Codia.AI
334K users6.1KFreeCapture, Transform, Create! Transform Screenshot into Stunning Editable Figma Designs with Ease!
- 5
Web to Figma
by Web to Figma
267K users3.5KFree + paid featuresImport any website or HTML code to Figma editable design. Goodbye screenshots.
- 6
pdf.to.design
by divRIOTS
245K users2.7KFreeConvert any PDF document into Figma designs. 100% PRIVATELY.
code.to.design playground FAQ
What does code.to.design playground do?
Instantly transform your code snippets into fully editable Figma designs. It's a Figma plugin by divRIOTS that runs in Figma Design and FigJam.
Is code.to.design playground free?
Yes. code.to.design playground is free to install and run from the Figma Community, with no paid tier listed.
Is code.to.design playground safe to use?
Figma plugins can only reach the internet through domains listed in their manifest. code.to.design playground's manifest allows network access to any domain ("*"), so Figma doesn't limit where it can send data. As with any plugin, check the developer's privacy policy before using it on client work.
How do I install code.to.design playground?
Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.
What are the best alternatives to code.to.design playground?
By user count, the closest alternatives are html.to.design, Convertify Sketch/Adobe/Google and PDF to Figma. Compare all of them on the best Figma plugins for website to figma.
Built this plugin?
Use this page as a landing page for code.to.design playground: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.
Style
Label
Size
Code
<a href="https://figmaplugins.co/plugins/code-to-design-playground/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="code.to.design playground on figmaplugins.co" width="220" height="48"></a>Want it featured on figmaplugins.co? Submit it for review