code.to.design playground — by ‹div›RIOTS
Instantly transform your code snippets into fully editable Figma designs.
Plugin Preview
About this plugin
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
------------------------------
Plugin Details
| Version | 188 |
|---|---|
| Created | March 28, 2023 |
| Last Updated | August 11, 2025 |
| Category | Software development |
| Creator | divRIOTS |
| Stats | 3138 installs, 681 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:build/ui.js
- main:build/main.js
- Network Access:
code.to.design playground uses a backend to transform HTML code (https://code.to.design). All domains are authorized so users can fetch resources from their user scripts (CSS/HTML)
- Editor Types:figma
- Allowed Domains:
- *
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI
SkewDat
Skew any layer or group with all layers preserved to edit.