Export to Figma Autor: Shoun Eftikharul Alam

Capture real UI from any webpage and convert it into clean, structured Figma layers. Skip screenshots and manual rebuilding.

🚀 WHAT IT DOES
• Convert any website to Figma layers, full page or specific sections
• Copy landing pages, dashboards, or competitor designs into Figma
• Inspect typography, colors, spacing, padding, margins, and CSS without code
• Extract logos, SVGs, images, and assets with one click
• Audit color palettes, font families, and WCAG contrast
• Build design system references from live products
• Generate DESIGN.md and SKILL.md design specs to feed AI coding agents and developers
• Pick any color on the page with the built-in Eyedropper (pixel-accurate HEX)
• Right-click any page or element to send it straight to Figma
• Capture embedded iframes, cross-origin content, localhost, and local HTML files

🎯 PERFECT FOR DESIGNERS & DEVELOPERS
• Copy a website into Figma without rebuilding it manually
• Redesign or modernize existing websites
• Convert HTML and CSS to Figma
• Use competitor landing pages as editable references
• Extract brand colors, fonts, and assets in seconds
• Work directly from real products instead of screenshots
• Generate design-system documentation and tokens for AI tools like Cursor, Claude, GitHub Copilot, and Windsurf
• Hand off pixel-accurate design specs from real UI into your dev or AI coding workflow

⚡ HOW IT WORKS
1. Install the Firefox extension
2. Open any webpage
3. Click "Export to Figma" and capture the full page or an element
4. Paste directly into Figma (Cmd/Ctrl + V), no extra Figma plugin required

Get a real Figma frame with editable text, fonts, colors, images, and clean layer structure, not a flat screenshot.

✨ FEATURES
• Full-page and element-level capture
• Editable, organized layer structure
• Preserves layouts, styles, fonts, and text
• Paste straight into Figma, no companion plugin needed
• Inspect Mode with spacing, padding, and margin overlays
• Color extractor (HEX, RGB, HSL, OKLCH, Tailwind)
• Typography scanner with font usage details
• Download images, SVGs, videos, GIFs, and Lottie files
• WCAG accessibility contrast checker
• Works with AI-generated websites (v0, Lovable, Bolt, Replit, Framer, etc.)
• Desktop, tablet, mobile, and custom viewport presets
• Eyedropper color picker with a magnified pixel loupe (HEX)
• DESIGN.md + SKILL.md generator - design tokens, brand, spacing, accessibility, and rules as AI-ready Markdown
• Right-click context menu capture
• Cross-origin and embedded iframe capture

💡 COMMON USE CASES
• Client website redesigns
• Competitor research and analysis
• Migrating existing websites into Figma
• Extracting design systems from production sites
• Rapid prototyping and mockups
• Building style guides from real websites
• Studying production UI and UX patterns
• Generating DESIGN.md context for AI coding agents and design-to-code workflows
• Documenting design tokens and brand guidelines from live sites
• Capturing localhost prototypes and AI-generated websites