Drift - Code to Figma

About this plugin

Paste a snippet from an AI coding tool (Claude, ChatGPT, v0, Cursor) or CodePen. Drag in or upload a project folder. Capture a live page through the companion browser extension you download directly from the plugin's home screen. Drift parses the rendered DOM and rebuilds it as Figma layers — auto-layout, semantic text styles, fonts from your library, gradients, shadows, real images.The output is a structured Figma file you can iterate on, not a screenshot.💼 [Made by Shafeeq](https://www.linkedin.com/in/shafeequr-rahman-b403b3115/)📧 [email protected] (feedback welcome)How to convert code into Figma1. In Figma, open the Plugins menu and run Drift.2. Pick how you're bringing the code in:* Paste Code - the primary path. Tabs for HTML, CSS, and JS, plus a render type (Website, Web app, Mobile app, UI component, or Animation / SVG).* Upload a file - Website, Presentation, or Product UI. Drag files straight onto the upload area, or click to browse. Shift-select to bring a folder's `.css`, `.js`, images, and fonts along with the `.html`.* Capture extension - for live pages behind login or blocked by CORS (see below).3. Hit Render to preview. Then Send to Figma to drop the result onto your canvas as editable layers.The plugin window is resizable — drag the bottom-right corner to fit your workflow. Your chosen size persists across sessions. The interface stays in a single, consistent light theme regardless of your OS appearance setting.How to capture a live websiteFor pages behind login, JS-rendered apps, or sites that block direct fetches:1. On Drift's home screen, expand the "Capturing a live website?" card and click Download .zip. The companion Drift Capture Chrome extension ships bundled inside the plugin — no separate install hunt.2. Unzip the file. In Chrome go to `chrome://extensions`, turn on Developer mode, click "Load unpacked," and point at the unzipped folder.3. Open any page in Chrome — log in or navigate where you need. Click the Drift Capture icon. The extension waits for animations to complete and DOM mutations to settle, then saves a self-contained `.html` to your downloads.4. Drag that `.html` straight into Drift's upload area (or click to browse to it). The capture renders with all its post-JavaScript state intact.The extension snapshots from your tab's own context — so authenticated apps, Cloudflare-protected sites, and React/Next.js apps all work.Supported file formats1. `.html` and `.htm` files (single page).2. Project folders with `.html` + linked `.css` + `.js` + images + fonts (drag the files onto the upload area, or shift-select to upload multiple — Drift resolves references and inlines assets).3. Captured pages from the Drift Capture browser extension.Paste HTML + CSS + JS directly1. Use the Paste Code action on the home screen to skip file uploads entirely — it's the fastest way to bring AI-generated UI in.2. Three tabs (HTML / CSS / JS) — dot indicators show which ones you've filled in. The tabs stay pinned at the top, the paste area fills the window, and the render controls stay docked at the bottom.3. Five render types:* Website - full-page layouts. The result is a multi-section build with per-section frames you can select individually.* Web app - a dashboard or app screen, rendered at desktop width.* Mobile app - rendered at a 390px mobile width as a single tall screen frame.* UI component - buttons, cards, forms, snippets. The result is a tight, single auto-layout Figma frame sized to the component (not the viewport), ready to drop into a design system.* Animation / SVG - set a frame count, and Drift pauses the animation, scrubs its timeline, and exports each sampled point as its own Figma frame. Works with CSS animations/transitions, the Web Animations API, and SVG (SMIL).4. Works with code from CodePen, JSFiddle, ChatGPT, Claude, v0, Cursor, or any other LLM.LLM-ready prompts built inClick Prompts in the footer for three pre-tuned prompt templates:* UI component - primes the model to output a fragment with semantic HTML, plain CSS, and the flexbox patterns Drift maps cleanly to Figma.* Website - primes the model to use `