Designer Visual: criando interfaces sem escrever código

Designer Visual: construa interfaces arrastando e soltando

O Designer Visual é um dos recursos mais poderosos do PocketCode. Ele permite criar interfaces de usuário de forma visual e gera HTML e CSS que você pode abrir e editar, com exportação para React, Vue e Svelte no Pro.

Por que um designer visual?

Projetar UIs na tela de um celular pode ser desafiador. Escrever o código de layout manualmente é lento e propenso a erros em telas pequenas. O designer visual resolve isso com uma interface intuitiva de arrastar e soltar.

Vantagens

• Velocidade: Projete em minutos, não em horas
• Visual: Veja o resultado em tempo real
• Código real: Exporta HTML e CSS que você pode ler e editar
• Múltiplos alvos: HTML/CSS e SVG, mais React, Vue e Svelte com o Pro

Começando

Abrir o designer

1. Abra a folha Ferramentas pela barra inferior (ou pela lateral em um tablet) e toque em Designer. Você também pode usar a paleta de comandos ou a ação rápida da tela inicial
2. Toque em Design Manual para uma tela em branco (nome, tamanho, e Fluxo de página ou Tela livre) ou abra Meus Designs e use A partir de modelo
3. Exporte quando quiser: HTML, CSS, SVG, ZIP ou .pcd de graça, e React, Vue ou Svelte com o Pro

Em Meus Designs você também pode importar um arquivo .pcd, um JSON do Figma ou HTML (um subconjunto de tags: div, section, títulos, p, a, button, img, input). Um arquivo .html não pode ser aberto no Designer diretamente pelo editor: importe-o em Meus Designs.

Interface básica

O designer é dividido em:

• Painel lateral — componentes, propriedades, camadas, tema e ferramentas, em cinco abas
• Canvas — a sua área de design, com o artboard e as guias

Em um tablet o painel lateral fica acoplado ao lado do canvas, por isso nunca tapa o que você está fazendo. Em um celular, uma barra inferior (Páginas, Componentes, Estilo, Camadas, Ferramentas) os abre como folhas quando você precisa, e o Tema fica dentro de Ferramentas.

Componentes disponíveis

A paleta cobre 49 tipos de componentes em oito seções: Básicos, Texto, Formulários, Contêineres, Navegação, Mídia, Feedback e Dados. Uma seleção:

Contêineres

Formulários

Básicos, texto e mídia

Navegação

Tutorial prático: Tela de login

Vamos criar uma tela de login completa, passo a passo:

Passo 1: Estrutura básica

Arraste uma Column para a tela e configure:

• Alinhamento: centralizado
• Padding: 24px
• Fundo: #0a0a0a

Passo 2: Adicionar o logo

Dentro da coluna, arraste uma Image:

• Tamanho: 120x120
• Border-radius: full (círculo)
• Margin-bottom: 32px

Passo 3: Campos de texto

Adicione dois componentes Text Field:

E-mail:

• Placeholder: "E-mail"
• Tipo: email
• Largura: Fill

Senha:

• Placeholder: "Senha"
• Tipo: password
• Largura: Fill

Passo 4: Botão de login

Arraste um Button:

• Texto: "Entrar"
• Estilo: primary
• Largura total: ligada
• Border-radius: 12px

Passo 5: Links extras

Adicione componentes Text e Link para:

• "Esqueceu sua senha?" (estilo de link)
• "Não tem uma conta? Cadastre-se" (texto esmaecido + link)

Código gerado

O designer exporta o layout como marcação mais o CSS de que ela precisa. Os trechos abaixo mostram o formato da saída em React e Vue, não o texto exato:

// Saída em React (só o formato): um arquivo com o CSS embutido
import React from "react";

const styles = `
  /* CSS gerado para os seus componentes */
`;

export default function LoginScreen() {
	return (
		<div className="design-container">
			<style>{styles}</style>
			{/* seus componentes, como elementos simples com classes geradas */}
		</div>
	);
}

<!-- Saída em Vue (só o formato) -->
<template>
  <div class="design-container">
    <!-- seus componentes -->
  </div>
</template>

<script>
export default { name: "LoginScreen" };
</script>

<style scoped>
/* CSS gerado para os seus componentes */
</style>

As exportações para frameworks são marcação e estilos: estado, manipuladores de eventos e roteamento são adicionados depois no código.

Recursos avançados

Design responsivo

O designer tem dois modos de layout. O Fluxo de página (o padrão em um design manual novo) empilha os blocos em ordem e exporta HTML real e responsivo; a Tela livre posiciona cada elemento onde você o solta, e os modelos e designs importados começam nela. Antes de exportar, o designer oferece converter um design de tela livre para fluxo.

• Larguras de pré-visualização: Original mais seis larguras (Mobile S 320, Mobile 375, Mobile L 428, Tablet 768, Desktop 1280, Desktop L 1440). Mobile S, Mobile L e Desktop L são Pro
• Breakpoints: Tablet (até 900 px) e Mobile (até 480 px) por padrão, e você pode editá-los ou adicionar os seus de graça. Por breakpoint dá para mudar posição, tamanho, visibilidade e estilos, e eles são exportados como regras @media reais
• Dimensionamento: Fixed, Hug ou Fill, com valores mínimo e máximo

Estados e interações

Cada componente tem cinco estados: Normal, Hover, Active, Focus e Disabled. Você pode estilizá-los de forma independente e eles são exportados como :hover, :active, :focus e :disabled. A aba Interactions adiciona comportamento simples:

1. Selecione um componente (ex.: um Button)
2. Escolha um gatilho: Tap, Hover, Scroll into view, Page load, After a delay ou Form submit
3. Escolha uma ação: Navigate to page, Open overlay, Close overlay, Toggle visibility, Scroll to, Set state ou Open URL

Na exportação HTML isso vira um pequeno script para navegação entre páginas, diálogos e validação de formulários. As exportações para React, Vue e Svelte são marcação e estilos, então o comportamento ali (manipuladores de clique, roteamento, dados) é adicionado no código.

Partes reutilizáveis

• Componentes: converta uma seleção em um componente e reutilize-o em Meus componentes. As instâncias são cópias: depois de editar o original, toque em Atualizar todas as instâncias
• Design system: defina tokens (cores, espaçamentos, tipografia e mais), estilos de texto e um tema claro e escuro
• Modelos e blocos: comece por um dos 5 modelos integrados (Landing Page, Login Form, Dashboard, Portfolio, E-Commerce) ou adicione um dos 5 blocos prontos. O plano Free pode criar até 3 designs a partir de modelos

Suporte a gestos

O designer foi pensado para interação por toque:

• Pinça para dar zoom no canvas (com dois dedos ele também rola)
• Toque para selecionar o elemento mais interno e toque de novo para subir um nível; toque duplo em um contêiner para isolá-lo, ou em um texto para editá-lo
• Mantenha pressionado um elemento selecionado para o menu de contexto, ou um não selecionado para iniciar uma multisseleção
• Deslize entre os painéis no celular

Destinos de exportação

O designer gera código real e editável, tudo baseado em web. Há oito formatos de exportação:

Você também pode copiar um único componente como trecho de HTML, e o PocketCode Project (Pro) salva o design como um projeto de código, que conta para o seu limite de projetos. As fontes web são carregadas do Google Fonts, então o HTML exportado precisa de conexão para exibi-las.

Dicas e boas práticas

1. Comece pela estrutura: Coloque os contêineres antes do conteúdo
2. Use o Fluxo de página: Ele exporta HTML responsivo; evite tamanhos fixos sempre que possível
3. Dê nomes aos seus componentes: Gera um código mais legível
4. Pré-visualize com frequência: Confira em diferentes tamanhos de tela
5. Exporte aos poucos: Não espere até o fim para conferir o código

---

O designer visual permite projetar e programar no mesmo dispositivo: esboce uma tela, exporte HTML/CSS (ou React, Vue e Svelte com o Pro) e continue construindo ali mesmo. Experimente hoje e acelere o seu desenvolvimento!