Grazy - Code to Figma

About this plugin

New features* AI Augmented Code. Bring Your Own Model. Currently supports Anthropic, but more will follow.* Improved Image export with thumbnail preview* Improved token export* Improved code export with better code resolution* Code preview. Now you can preview generated code separately before export to help you check if something is not working. Note: This feature might sometimes not render code in some isolated cases. This is known. Additonally, code export doesnt work with Vue, Svelte, Flutter, Android or Swift. Only React and HTML for the moment.* License support. I am committed to improving the plugin further which is why it will be available further through subscription only.* Password-less login and license verification through Polar.* Dark theme* Complete rework of the entire UI from Javascript to React for faster development* More platforms: Vue, Svelte.Import HTML code straight into Figma.To use this plugin you will also need its browser extension companion.Alternatively, if you just want to use it for code exporting, you can do so without the Mozilla/Chrome extension installed on your browser.Full feature set:* Import JSON code as Figma frames - through browser extensions* Export Figma frames or components as React, HTML, Swift or Flutter code.* Read and browse variable collections with values and color rendition. Including for variable chaining.* Export variables as JSON, Tailwind 4, or CSS tokens for your project.Everything you need to build a new website, fast and easy, or to help you work with design systems.How to export SVG with your code:1. Put the svg inside a frame and call it SVG2. Paths need to be named "vector" and be compound paths or outlines so that there is only 1 shape. this is to minimize issues with where the paths will be placed inside the SVG frame.3. Check your sizes. Always.Can you use this code in production?In theory yes. Since there's nothing unsafe. Is it ok? No. When working with production code, it's a much better practice to use tailwind variables and production css. But it will do the same job a token-based LLM does.Ideal use case is to create a basic component structure which you can then use and extend through code as you see fit. It does the groundwork for you without consuming AI credits.It can also be used as an excellent tool to buildHTML Illustrations for your website (the intricate kind, that mimic live UI)Functional prototypes that can then be upcycled into production. Zero throwaway code.Buld and maintain a design system, tokens and component set reliably.Homepage:https://grazy.sorinjurcut.com/Browser extensions:Mozillahttps://addons.mozilla.org/en-US/firefox/addon/grazy-html2figma/Chromehttps://chromewebstore.google.com/detail/html-2-figma-chrome/ebjjklblmelccaighinmmmmgclliecpoUsage Examples:* Design System Development* AI-to-Design Workflows* Competitive Analysis & Inspiration* QA & Design Review* Documentation & Design Handoff* Learning & Reverse Engineering* Rapid Prototyping & Client Presentations* Migration Projects* The Most Powerful Use Case: Bridging Code & DesignFor companies with Figma Enterprise or Organization accounts, I can provide custom builds through flags at build time that can add or remove functionality as necessary and help with deployment. Feel free to reach out for customization requests.