Design EditorDocumentaçãoUsando o editor
Tela e ferramentas
A tela ocupa a janela inteira e os painéis flutuam sobre ela. Cada ferramenta tem um atalho de uma tecla.
1Ferramentas
| Ferramenta | O que faz |
|---|---|
Selecionar V | Seleciona, move e redimensiona camadas. |
Moldura F | Desenha uma moldura. Uma moldura de nível superior é uma prancheta, tela ou slide. |
Retângulo R | O espaço das formas. O menu dele também tem Polígono, Estrela, Linha, Ícone e Navegador. |
Elipse O | Círculos e elipses, com arcos e anéis. |
Polígono Y, Linha L | Polígonos regulares e linhas retas. |
Caneta P | Caminhos com vários pontos de ancoragem. Enter ou Escape finaliza o caminho. |
Lápis Shift+P | Linhas à mão livre, suavizadas em curvas. |
Texto T | Clique para uma caixa de texto que cresce, arraste para uma largura fixa. |
Nota N | Cartões de nota, contexto e prompt para você ou para um agente. |
| Imagem | Insere um arquivo PNG, JPEG, GIF, WebP ou SVG. |
Mão H | Move a tela. Segurar Espaço faz o mesmo. |
2Formas especiais
- Estrela: um polígono com raio interno. O painel define o número de pontas e o raio interno.
- Arcos de elipse: Início, Varredura e Interior no painel transformam uma elipse em fatia de pizza, arco ou anel.
- Ícone: escolha entre Lucide, Feather, Simple Icons (marcas), Material Symbols nos estilos contornado, arredondado e reto, e Phosphor.
- Suavização do lápis: Preciso, Equilibrado ou Suave, em Configurações, Sistema. O estilo do cursor de lápis também fica lá.
3Páginas web ao vivo na tela
A forma Navegador mostra uma página web real em um dispositivo Desktop, Tablet ou Celular, com URL, zoom e rolagem. Ela usa o Chrome, Chromium, Edge ou Brave já instalado no seu computador; defina DE_BROWSER_PATH para escolher outro.
As páginas de um arquivo que você abre ficam pausadas até você clicar em Carregar páginas, então abrir um arquivo nunca acessa um site por conta própria.
4Notas e scripts
Cartões de nota, contexto e prompt existem só na tela. Eles ficam de fora de todas as exportações, então você pode deixar instruções para um agente ao lado do design.
Um nó de script é uma moldura desenhada por JavaScript. Os parâmetros @input dele aparecem como campos na seção Script do painel.
6Alinhar, encaixar e combinar
Ao arrastar uma camada, aparecem guias inteligentes e ela se encaixa nas bordas e nos centros das camadas ao redor.
Alinhe à esquerda, ao centro, à direita, no topo, no meio ou embaixo pelo painel. Distribua na horizontal ou na vertical quando houver três ou mais camadas selecionadas.
As operações booleanas combinam formas: União Cmd+Alt+U, Subtrair Cmd+Alt+S, Interseção Cmd+Alt+I, Excluir Cmd+Alt+X. Elas também estão no menu da camada. Molduras que contêm outras camadas não podem ser combinadas.
7Copiar e colar
Copiar, recortar e colar funcionam com camadas. Camadas copiadas no Figma e coladas aqui chegam como camadas editáveis. HTML colado de qualquer lugar também vira camadas.