O canvas

O canvas é o rascunho ao vivo e interativo. Clique, digite e role nele como faria em uma página real. A barra acima dele reúne as ferramentas desta página.

Pré-visualização e código

• Pré-visualização mostra a tela funcionando.
• Código mostra o código React da versão que está no canvas. Ele é somente leitura; selecione Copiar código para copiá-lo.

Larguras desktop, tablet e celular

Use os três botões de dispositivo para ver o rascunho na largura total, com 768 pixels (tablet) ou com 390 pixels (celular). Eles aparecem quando o canvas tem espaço para eles.

Todos os tamanhos, o botão depois do celular, mostra o rascunho na largura de celular, tablet e desktop lado a lado, cada um como uma página ao vivo reduzida para caber. O modo claro ou escuro e o idioma da pré-visualização valem para os três, então você confere um idioma em todas as larguras de uma vez. Para selecionar, medir ou anotar, volte a uma só largura.

Medir espaçamento

Selecione Medir espaçamento (o ícone de régua) para conferir os espaços como faria em uma ferramenta de design. Você também pode segurar Alt (Option no Mac) sobre o canvas sem ativar o recurso.

• Passe o cursor sobre um elemento para ver réguas vermelhas nos quatro lados, com as distâncias em pixels. Para cima, para baixo, para a esquerda e para a direita, cada uma vai até o elemento mais próximo alinhado a ele, ou até a borda do contêiner quando não há nada no meio. O elemento também mostra sua largura e altura.
• Clique em um elemento para medir a partir dele e depois passe o cursor sobre outro para ver os espaços entre os dois. Passe o cursor sobre o contêiner para ver os quatro recuos internos.
• Em uma tela sensível ao toque, toque em um elemento e depois em outro.
• Pressione Esc para soltar o elemento em que você clicou, e de novo para parar de medir.

As distâncias são pixels CSS do rascunho, com as bordas incluídas, então o tamanho do canvas não as altera. Enquanto você mede, os cliques não acionam botões nem seguem links.

Recarregar

Depois que você clica pelo rascunho, Recarregar o leva de volta à primeira tela. Ele fica desativado até você interagir com o rascunho.

Versões

Cada rascunho de uma sessão é guardado como uma versão. Quando há mais de uma, a barra mostra um contador como 2/2, com os botões de desfazer e refazer.

• Desfazer mostra a versão anterior, e Refazer, a próxima. Você também pode pressionar ⌘+Z e ⌘+Shift+Z (Ctrl no Windows) quando não estiver digitando em um campo. A versão muda sem recarregar a área de trabalho.
• Sua próxima solicitação revisa a versão que estiver no canvas, então você pode voltar e seguir em outra direção.
• Um protótipo salvo guarda até as 20 versões mais recentes.

Comparar versões

Selecione Comparar versões para ver duas versões lado a lado, com um controle deslizante entre elas. Os dois lados rolam juntos.

• Escolha quaisquer duas versões nas listas Antes e Depois.
• Arraste o divisor ou coloque o foco nele e use as setas do teclado (segure Shift para passos maiores e use Home e End para as bordas).
• Voltar para o antes coloca a versão de antes no canvas, para que sua próxima solicitação a revise.
• Selecione Concluído ou pressione Esc para sair.

Pré-visualização clara e escura

Quando um rascunho usa um dos seus temas de cores, aparece um botão Modo escuro para você conferir os dois modos. Isso muda só o rascunho, não o Vibr.

Pré-visualização em outro idioma

O botão Idioma da pré-visualização (o ícone de tradução) mostra o rascunho em outro idioma, para você ver como seu design se comporta antes que alguém o traduza de verdade. Escolha um entre mais de 40 idiomas, incluindo árabe e hebraico, que são lidos da direita para a esquerda. O texto, os placeholders e os rótulos do rascunho mudam, e a página define o idioma e a direção de acordo. Seu código não muda, e o idioma continua ativo enquanto você cria.

• Seu modelo traduz. O Vibr envia o texto visível do rascunho para o modelo escolhido, usando sua chave, algumas dezenas de strings por vez. Textos novos, como um contador que aumenta, são traduzidos quando aparecem. Cada string é traduzida uma vez por sessão.
• Da direita para a esquerda. Os rascunhos novos usam propriedades lógicas, como marginInlineStart, que se invertem sozinhas. Com árabe ou hebraico ativo, a revisão de design também procura estilos que usam left ou right e setas que não serão espelhadas, e Corrigir os ajusta antes de mostrar o rascunho. Um rascunho feito antes da troca de idioma recebe um aviso, com Corrigir para RTL.
• Pseudo não precisa de modelo. Ele acentua todas as letras e deixa o texto cerca de 40% mais longo, como costuma acontecer com alemão ou finlandês, para que rótulos cortados e larguras fixas apareçam na hora.
• Os exemplos não precisam de chave. Os exemplos existem em todos os idiomas do Vibr, então a pré-visualização em qualquer um deles, inclusive árabe e hebraico, funciona sem chave. Outros idiomas, e o texto que você adicionar a um exemplo, são traduzidos pelo seu modelo.
• Exporte nesse idioma. Com um idioma ativo, o menu Exportar ganha App em esse idioma. A página exportada abre no idioma, com a direção correspondente, e também traduz os demais textos do rascunho, como outras abas e caixas de diálogo. As outras exportações mantêm o texto original do rascunho.
• Fontes. Se uma fonte importada não tem as letras do idioma, um aviso mostra algumas que faltam e sugere fontes parecidas do Google Fonts que as têm. Usar… adiciona uma à escala tipográfica da fonte como alternativa, e o canvas e os apps exportados a carregam.
• Escolha O texto original do rascunho para voltar.

Links no canvas

Os links não saem do canvas, então você não perde o rascunho ao clicar em um. Em vez disso, o Vibr diz para onde o link leva. Um app exportado segue os links. Botões que abrem outra tela salva funcionam com Reproduzir; consulte Fluxos.

No celular

Em telas pequenas, o Vibr mostra Chat e Pré-visualização como abas. Um ponto em Pré-visualização indica que há um rascunho novo que você ainda não viu. As ferramentas que não cabem acima do canvas vão para o menu Ações. Quando as ferramentas acima do canvas não cabem todas, deslize-as para o lado.