HTML to Figma — Yolbridge

Yolbridge imports HTML pages into Figma as real editable layers — frames, text, rectangles, ellipses — with correct colors, fonts, gradients, shadows, borders, and images. No screenshots. No flattened groups. Just clean Figma structure ready to redesign.

Completely free. No account, no sign-up, no credit card. Ever.THREE WAYS TO IMPORT🔗 Paste a URLEnter any website address. The plugin fetches the page, inlines CSS, and imports the rendered result. Works on static sites, landing pages, portfolios, and most CMS-driven pages (CORS permitting).

📄 Drop an HTML fileDrag a .html file into the plugin, or paste HTML directly into the text area. Everything is parsed locally — no server involved. Ideal for designs exported from Claude Design, Framer, Webflow, and other builders.

🌐 Send from ChromeInstall the free Yolbridge Chrome Extension, open any page, click "Send to Figma." The plugin picks it up automatically via a 6-digit code. Best for pages that require login or have dynamic content.WHAT GETS IMPORTEDLayout containers (div, section, header, article, main, aside, footer, nav) become Frames.

Text tags (p, h1–h6, span, a, button, li, blockquote, code) become Figma text with the correct font family, size, weight, italic, line-height, letter-spacing, text-align, and decorations (underline, line-through, uppercase/lowercase/capitalize).

Images (img) are imported as Rectangles with base64 image fills.

Colors — hex, rgb/rgba, hsl/hsla, named colors.

Gradients — linear and radial.

Shadows — multi-layer box-shadow, inset shadows, drop shadows.

Borders — all four sides, width, color, dashed/dotted.

Border-radius — each corner independently.

Effects — opacity, mix-blend-mode, overflow: hidden (applied as clip).WHY YOLBRIDGE• Free, not freemium. No paid tier, no feature gating.• No account. Nothing to sign up for, no email required.• Works offline for file and paste mode — your HTML never leaves your machine.• Privacy-first: no analytics, no telemetry, no tracking. See our Privacy Policy.• Optimized for unstable connections — chunked uploads, automatic retries.• Actively maintained by an individual designer, not a VC-backed startup.INSTALLThe Figma plugin installs directly from this page. For the optional Chrome Extension, follow the link in the plugin's "About" tab.LIMITATIONS• External images blocked by CORS may not load; base64 data URLs always work.• CSS animations, transitions, and interactive states are not transferred — this is a static import.• SVG elements are imported as rectangles with a solid background color.• CSS filter: blur() and backdrop-filter are simplified.SUPPORTFound a bug or missing a feature? Email jobuxui71@gmail.com. I reply to every message personally.PRIVACYYolbridge does not collect analytics, telemetry, or account data. Full Privacy Policy:https://rose-tiglon-a95.notion.site/Yolbridge-Privacy-Policy-34b2e665d71880328483f8510b7eb25aThe policy covers the 10-minute TTL on extension uploads and rate limiting details.