Grazy - Import HTML. Export Starter Code.

About this plugin

Grazy helps you bring live HTML into Figma and export editable starter code from your designs.Built for frontend developers, design engineers, and designers who code, Grazy is best used as a fast head start, not a replacement for your own component architecture or coding conventions.What you can do with GrazyImport live HTML into Figma with the browser extension companionExport Figma frames and components as starter code for:HTML/CSSReactVueSvelteSwiftUIFlutterAndroidPreview generated web code before exportExport images with compression and thumbnail previewBrowse and export design tokens, variables, and color valuesExport variables as JSON, Tailwind, or CSS tokensOptionally augment exports with AI using your own Anthropic API keyBest forReverse-engineering legacy or live UI into FigmaCreating rich HTML-based illustrations and product visualsGenerating editable starter code for frontend implementationWorking faster with design systems, tokens, and reusable componentsPrivacy-sensitive workflows where AI cannot be used for production codeImportant notesGrazy is designed to give you a structured, editable starting pointGenerated code is best treated as a foundation to refine and extend in your own codebaseCode preview currently supports web-focused outputs and may not render every edge case perfectlyThe browser extension is required for HTML importCode export can be used without the browser extensionAI AugmentationGrazy supports optional AI-assisted export through a bring-your-own-model workflow.Currently supported:AnthropicMore providers may be added over time.Browser extensionsFirefox:https://addons.mozilla.org/en-US/firefox/addon/grazy-html2figma/Chrome:https://chromewebstore.google.com/detail/html-2-figma-chrome/ebjjklblmelccaighinmmmmgclliecpoHomepagehttps://grazy.sorinjurcut.com/Enterprise / custom buildsFor teams on Figma Organization or Enterprise plans, custom builds can be provided with feature flags to add or remove functionality as needed. Reach out if you need a tailored setup.