Design EditorDocumentaçãoImportação e exportação
Importar
Traga arquivos do Figma, arquivos do pen.dev, SVG, páginas web e capturas de tela como camadas editáveis.
1Figma
- No Figma, escolha File, Save local copy para obter um arquivo
.fig. - Abra-o com Arquivo, Importar, Figma (
Cmd+Shift+F), pelo cartão no Início, com um clique duplo ou arrastando-o para a janela. - Escolha as páginas que quiser, ou Importar todas as páginas.
- Escolha Preservar layout do Figma para manter as posições como estão, ou Auto layout do Design Editor para reconstruir as pilhas.
Tudo o que não pôde ser trazido com exatidão aparece como aviso. Também funciona copiar camadas no Figma e colá-las aqui.
2pen.dev
Um arquivo .pen abre como um novo documento sem título; o original nunca é sobrescrito. Shaders, scripts, notas e nós de navegador são importados.
3SVG e imagens
A ferramenta Imagem insere arquivos PNG, JPEG, GIF, WebP e SVG; o SVG vira camadas vetoriais editáveis. Imagens rasterizadas também podem ser arrastadas direto para a tela.
4HTML
Arquivo, Importar, HTML (Cmd+Shift+H) aceita um arquivo .html ou .htm, ou um .zip com os estilos e imagens dele. A importação segue a cascata do CSS, variáveis, media queries e grid, e lista o que precisou aproximar.
de import:html https://example.com --viewport-height 9005Recriar uma captura de tela
O cartão de captura de tela no Início envia um PNG ou JPEG ao agente, que o reconstrói como um design editável.
6Extensão para Chrome
A extensão do repositório captura a página que você está vendo para o editor em execução. Ela pode capturar a página inteira, escolher um único elemento, extrair um design.md ou baixar um arquivo .de.
Ela ainda não está na Chrome Web Store. Compile-a a partir de packages/de-chrome-extension e carregue-a sem compactação no Chrome 110 ou mais recente. Ela só se comunica com o editor no seu próprio computador.