Editor de canvas
O canvas de edição de wireframe é onde você projeta e refina suas telas. A barra lateral esquerda contém todas as ferramentas de desenho e seleção, o centro é o canvas onde você posiciona e organiza elementos, e a barra lateral direita mostra as propriedades do elemento selecionado.
Ferramentas
Select
Clique para selecionar e mover elementos no canvas. Elementos selecionados mostram suas propriedades na barra lateral direita.
Square
Desenhe elementos retângulares de contêiner no canvas.
Circle
Desenhe elementos circulares no canvas.
Text
Adicione rótulos de texto e blocos de conteúdo.
Image
Posicione elementos de espaço reservado para imagem.
Button
Adicione elementos de botão interativos.
Input
Adicione campos de entrada de formulário.
+ (Add Screen)
Adicione uma nova tela ao projeto de wireframe.
Elementos bloqueados
As telas geradas por IA vêm bloqueadas por padrão — os elementos não podem ser movidos ou redimensionados até serem desbloqueados. Pressione Ctrl + D para desbloquear todos os elementos na tela atual, dando-lhe controle total para reorganizá-los e editá-los.
Modo storyboard
O modo storyboard permite ver todos os seus quadros e seus pontos de conexão em uma visão panorâmica. Alterne entre o canvas de tela única e o modo storyboard usando o mesmo botão na barra lateral esquerda. No modo storyboard, cada tela é mostrada como um cartão com uma pré-visualização do seu layout.
Recursos do storyboard
Visão geral dos quadros
Veja todas as telas de relance com suas contagens de elementos e pré-visualizações visuais.
Definir modal
Marque qualquer tela como uma sobreposição modal em vez de uma página completa.
Click to Edit
Clique em qualquer cartão de quadro para ir à sua visualização de canvas para edição detalhada.
Controles de zoom
Use os controles de zoom à esquerda para ampliar/reduzir o storyboard.
Conexões de fluxo
Visualize como as telas estão conectadas através de ações de fluxo entre quadros.
Propriedades do elemento
Clique duas vezes em qualquer elemento do canvas para entrar nele e abrir seu painel de propriedades na barra lateral direita. O painel tem três abas: Propriedades, Fluxo e Cores. A partir daqui você pode editar a posição, tamanho, estilo e comportamento de cada elemento.
Aba de propriedades
Position (X, Y)
Defina a posição exata em pixels do elemento no canvas.
Size (Width, Height)
Defina as dimensões do elemento em pixels.
Z-Index (Layer Order)
Controle quais elementos aparecem por cima dos outros.
Border Radius
Defina o arredondamento dos cantos com um valor numérico ou use os predefinidos Pontiagudo, Arredondado ou Pílula.
Text Content
Edite o texto exibido dentro do elemento.
Aba de cores
Personalize as cores de fundo, borda e texto do elemento selecionado.
Fluxos
Os fluxos definem ações e navegação entre telas. Um fluxo é uma ação como navegar para outra página, abrir um modal ou redirecionar para uma área diferente. Pequenos ícones de link no canvas indicam quais elementos têm fluxos anexados. Os quadros são automaticamente vinculados entre si durante a geração com IA, e as conexões de fluxo também são criadas.
Configurando fluxos
Selecionar um elemento
Clique no elemento ao qual deseja adicionar um fluxo.
Abrir aba de fluxo
Na barra lateral direita, alterne para a aba Fluxo para ver conexões existentes ou adicionar novas.
Adicionar conexão
Clique em Adicionar Primeira Conexão (ou o botão +) para criar um novo fluxo. Escolha uma tela ou quadro alvo para vincular.
Visualizar no canvas
Elementos conectados mostram um pequeno ícone de link no canvas para indicar que possuem ações de fluxo.
Conexões de blocos
As Conexões de Blocos permitem que você anexe blocos da Biblioteca de Blocos diretamente a elementos de wireframe. Quando você clica duas vezes em um elemento e rola para baixo no painel de propriedades, encontrará a seção de Conexões de Blocos. Clique em + Adicionar Bloco para vincular um bloco (HTML, componente ou modelo) ao elemento. Blocos conectados são referenciados ao gerar código com IA, facilitando anexar código HTML ou de componentes específicos a elementos de wireframe.
Edição com IA
A barra de prompts de IA na parte inferior do canvas permite que você use IA para editar ou criar telas. Selecione seu modelo de IA no menu suspenso à esquerda, descreva as alterações desejadas e a IA modificará o wireframe para você. Você também pode usar entrada de voz ou o botão Edição CLI para edição avançada.
Prompt consciente de contexto
Tela única
Ao editar uma tela única, a barra de prompt mostra "Editando 'Nome da Tela'" e as alterações da IA se aplicam apenas a essa tela.
Storyboard
No modo storyboard, a IA pode editar todos os quadros de uma vez ou construir novos quadros usando os existentes como referência.
Voice Input
Use o ícone de microfone na barra de prompt para ditar suas instruções em vez de digitar.
CLI Edit
Clique em Edição CLI para um modo de edição avançado com mais controle sobre as alterações alimentadas por IA.
Exportação e integração
Os wireframes podem ser exportados, importados ou usados diretamente ao criar projetos ou dentro do Hub de Projetos. Isso facilita a transição do design de wireframe para um projeto funcional sem recriar designs manualmente.