Export to Figma 作者： 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网页转 Figma。捕获任意网页的真实界面，转换成干净、结构清晰的 Figma 图层。不用截图，也不用手动重搭。

🚀 功能简介
• 把任意网站转换为 Figma 图层，整页或指定区块都可以
• 把落地页、后台仪表盘或竞品设计复制到 Figma
• 无需看代码即可查看字体、颜色、间距、内边距、外边距和 CSS
• 一键提取 Logo、SVG、图片和素材
• 检查配色方案、字体家族和 WCAG 对比度
• 从线上真实产品中沉淀设计系统参考
• 生成 DESIGN.md 与 SKILL.md 设计规范，供 AI 编程助手和开发者使用
• 用内置取色器拾取页面上任意颜色（像素级精确 HEX）
• 右键点击任意页面或元素，直接发送到 Figma
• 支持嵌入式 iframe、跨域内容、localhost 和本地 HTML 文件

🎯 设计师与开发者的理想工具
• 无需手动重建，直接把网站复制进 Figma
• 改版或现代化已有网站
• 把 HTML 和 CSS 转换为 Figma
• 把竞品落地页变成可编辑的参考稿
• 几秒钟提取品牌色、字体和素材
• 基于真实产品工作，而不是截图
• 为 Cursor、Claude、GitHub Copilot、Windsurf 等 AI 工具生成设计系统文档与 tokens
• 把真实界面的精确设计规范交付到开发或 AI 编程流程中

⚡ 使用方法
1. 安装 Firefox 扩展
2. 打开任意网页
3. 点击「Export to Figma」，捕获整页或某个元素
4. 直接粘贴到 Figma（Cmd/Ctrl + V），无需额外的 Figma 插件

你会得到一个真正的 Figma 画框，文本、字体、颜色、图片都可编辑，图层结构清晰，而不是一张扁平截图。

✨ 功能特性
• 整页捕获与元素级捕获
• 可编辑、有条理的图层结构
• 保留布局、样式、字体和文本
• 直接粘贴到 Figma，无需配套插件
• Inspect 模式，叠加显示间距、内边距和外边距
• 颜色提取器（HEX、RGB、HSL、OKLCH、Tailwind）
• 字体扫描器，附字体使用详情
• 下载图片、SVG、视频、GIF 和 Lottie 文件
• WCAG 无障碍对比度检查
• 支持 AI 生成的网站（v0、Lovable、Bolt、Replit、Framer 等）
• 桌面、平板、移动端和自定义宽度预设
• 带像素放大镜的取色器（HEX）
• DESIGN.md + SKILL.md 生成器：设计 tokens、品牌、间距、无障碍和规则，输出为 AI 可直接使用的 Markdown
• 右键菜单捕获
• 跨域与嵌入式 iframe 捕获

💡 常见用途
• 客户网站改版
• 竞品调研与分析
• 把已有网站迁移进 Figma
• 从线上站点提取设计系统
• 快速原型与视觉稿
• 用真实网站沉淀风格指南
• 研究线上产品的 UI 与 UX 模式
• 为 AI 编程助手和设计转代码流程生成 DESIGN.md 上下文
• 从线上站点整理设计 tokens 和品牌规范
• 捕获 localhost 原型和 AI 生成的网站