Import

1Figma

1. In Figma, choose File, Save local copy to get a .fig file.
2. Open it with File, Import, Figma (Cmd+Shift+F), the card on Home, a double-click or by dropping it on the window.
3. Pick the pages you want, or Import All.
4. Choose Preserve Figma layout to keep positions as they are, or Design Editor auto layout to rebuild stacks.

Anything that could not be brought over exactly is listed as a warning. Copying layers in Figma and pasting them here also works.

2pen.dev

A .pen file opens as a new untitled document; the original is never written back. Shaders, scripts, notes and browser nodes come across.

3SVG and images

The Image tool places PNG, JPEG, GIF, WebP and SVG files; SVG becomes editable vector layers. Raster images can also be dropped straight onto the canvas.

4HTML

File, Import, HTML (Cmd+Shift+H) takes an .html or .htm file, or a .zip with its styles and images. It follows the CSS cascade, variables, media queries and grid, and lists what it had to approximate.

de import:html https://example.com --viewport-height 900

5Recreate a screenshot

The screenshot card on Home sends a PNG or JPEG to the agent, which rebuilds it as an editable design.

6Chrome extension

The extension in the repository captures the page you are looking at into the running editor. It can capture the full page, pick a single element, extract a design.md, or download a .de file.