Component to Figma

Component to Figma lets you grab any component from any website and rebuild it as clean, editable Figma layers — not a flat screenshot.

Turn on the picker, hover any element on the page (just like your browser's inspect tool), press the Up/Down arrows to select a parent or child element, then click "Import this component to Figma." The component appears in Figma automatically as real Frames, Text, Images, vector icons, Auto Layout, colors, gradients, borders and shadows.

Because extraction runs right inside your browser, it also works on pages that are behind a login.

HOW IT WORKS
1. Install this extension and the "URL to Figma" plugin inside Figma.
2. Open the plugin's Component tab and copy your pairing token.
3. Paste the token into this extension one time.
4. On any website, pick a component and click Import — it shows up in Figma instantly. Keep the plugin open.

WHAT GETS REBUILT
- Real Frame / Text / Image layers (never a screenshot)
- Auto Layout inferred from the page's real layout
- Colors including modern oklch, gradients, borders, corner radius and shadows
- Icons as editable vectors; charts and canvas as images

PRIVACY
The component you pick is sent to our rendering backend only to download its images and pass the result to your Figma plugin. The component data is generated on demand and is not stored permanently.

Figma Plugin Address:
https://www.figma.com/community/plugin/1657032559497306963/url-to-figma

What's new
v1.0.4
- Backend stability improvements make imports of large pages more reliable.
- Dropdown values are now captured when you pick a component, and clipped/ellipsis text no longer overflows on import.
- Clipped text stays in its box. Ellipsis-truncated labels no longer overflow when imported.

v1.0.3
- Icons (Font Awesome, Material, etc.) now import correctly
- Background images and gradients supported
- More reliable image capture, including relative URLs and <picture>/lazy images

v1.0.1
- Background images, gradients and font-icons now import correctly
- Relative image URLs resolved automatically
- Faster imports