Code-to-Figma | React (Next/Vite) on Figma

About this plugin

Code to Figma bridges your running dev server and Figma. Open any localhost URL inside the plugin, then hit Paste — your live UI becomes real, editable Figma layers instantly.No screenshots. No manual rebuilding. Just your actual app, captured as frames, text, rectangles, and images you can work with.HOW IT WORKS1. Install the companion package in your project:npm i code-to-figma -D(The postinstall script wires up the capture shim automatically — nothing else to configure.)2. Open the plugin, type your localhost URL, press Enter.3. Hit Paste. Your running UI lands in Figma as editable layers.WHAT YOU GET• Frames, rectangles, text, and images — all fully editable• Color and text styles auto-mapped (or matched to your existing Figma styles)• Viewport presets: Desktop, Tablet, Mobile, or custom dimensions• Scale control to fit any screen size• Zero production impact — the shim is tree-shaken out by your bundler via a NODE_ENV guardWHO IT'S FORFrontend developers who want to get real UI into Figma fast — for design reviews, handoff, documentation, or just keeping designs in sync with what's actually shipped.