Design EditorDocumentaciónImportar y exportar
Importar
Trae archivos de Figma, archivos de pen.dev, SVG, páginas web y capturas de pantalla como capas editables.
1Figma
- En Figma, elige File, Save local copy para obtener un archivo
.fig. - Ábrelo con Archivo, Importar, Figma (
Cmd+Shift+F), con la tarjeta de Inicio, con doble clic o arrastrándolo a la ventana. - Elige las páginas que quieras, o Importar todas las páginas.
- Elige Conservar diseño de Figma para mantener las posiciones tal cual, o Diseño automático Design Editor para reconstruir las pilas.
Todo lo que no se haya podido traer exactamente aparece como advertencia. También funciona copiar capas en Figma y pegarlas aquí.
2pen.dev
Un archivo .pen se abre como un documento nuevo sin título; el original nunca se sobrescribe. Se conservan los shaders, scripts, notas y nodos de navegador.
3SVG e imágenes
La herramienta Imagen coloca archivos PNG, JPEG, GIF, WebP y SVG; los SVG se convierten en capas vectoriales editables. Las imágenes rasterizadas también se pueden soltar directamente en el lienzo.
4HTML
Archivo, Importar, HTML (Cmd+Shift+H) acepta un archivo .html o .htm, o un .zip con sus estilos e imágenes. Respeta la cascada CSS, las variables, las media queries y grid, y muestra lo que tuvo que aproximar.
de import:html https://example.com --viewport-height 9005Recrear una captura de pantalla
La tarjeta de captura de pantalla de Inicio envía un PNG o JPEG al agente, que lo reconstruye como un diseño editable.
6Extensión de Chrome
La extensión del repositorio captura la página que estás viendo y la envía al editor en ejecución. Puede capturar la página completa, elegir un solo elemento, extraer un design.md o descargar un archivo .de.
Aún no está en la Chrome Web Store. Compílala desde packages/de-chrome-extension y cárgala sin empaquetar en Chrome 110 o posterior. Solo se comunica con el editor de tu propio equipo.