web-to-figma-chrome-extension

Convert webpage DOM layouts, computed styles, and assets into Figma-compatible JSON.

3|Updated May 16, 2026
One-click install
npx skills add https://github.com/Aradotso/design-skills --skill web-to-figma-chrome-extension
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-to-figma-chrome-extension
Source: https://github.com/Aradotso/design-skills/tree/main/skills/web-to-figma-chrome-extension
Command: npx skills add https://github.com/Aradotso/design-skills --skill web-to-figma-chrome-extension

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill reduces the time and guesswork of recreating UI designs by automatically capturing webpage layouts and styling into a Figma-compatible JSON structure.

Core Features & Use Cases

  • Full-page and element capture: Capture an entire page tree or target specific DOM elements for focused extraction.
  • CORS-friendly image handling: Proxy cross-origin images to prevent missing/broken assets during export.
  • Configurable capture performance: Control image download concurrency to balance speed and stability on different pages.
  • Design workflow output: Export capture results as JSON suitable for Figma-based downstream processing.

Quick Start

Use the web-to-figma-chrome-extension to open a webpage, click the extension’s in-page toolbar to capture it, and download the exported Figma-compatible JSON.

Frequently Asked Questions about web-to-figma-chrome-extension

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I capture a webpage layout into editable Figma JSON?▼

You can capture a webpage by opening it in your browser, clicking the extension's in-page toolbar, and downloading the exported Figma-compatible JSON. The tool extracts computed styles and layout metadata to reproduce the design.

Can I extract specific DOM elements instead of capturing a full webpage?▼

Yes, you can target specific DOM elements for focused extraction. The tool supports both full-page tree capture and targeted element harvesting, allowing you to isolate individual UI components for Figma JSON export.

How does the extension handle cross-origin images during webpage capture?▼

The extension proxies cross-origin images during webpage capture to prevent missing or broken assets. This CORS-friendly image handling ensures external images are correctly bundled into the final Figma JSON export.

What is the best way to extract UI designs from public websites for reproduction?▼

The best way to extract UI designs from public websites for reproduction is using a DOM traversal tool that captures computed styles and assets, exporting a Figma-compatible JSON file that represents the captured nodes and layout metadata.

Why do cross-origin images break when exporting webpage DOM to design files?▼

Cross-origin images break during DOM export due to browser security restrictions. The extension solves this by applying optional cross-origin image proxying, ensuring images are fetched and embedded correctly within the Figma JSON.

Can I control image download concurrency when capturing large webpages?▼

Yes, you can configure image download concurrency when capturing large webpages. This allows you to balance capture speed and stability, preventing browser timeouts or crashes during the asset extraction process.