Designer Visual: criando interfaces sem escrever código

Aprenda a usar o designer visual de arrastar e soltar do PocketCode para construir interfaces de usuário e exportar código limpo em React, Vue, Svelte ou HTML/CSS.

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 automaticamente um código limpo e pronto para produção.

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 limpo: Gera código seguindo as melhores práticas
Múltiplos alvos: React, Vue, Svelte, HTML/CSS e SVG

Começando

Abrir o designer

Em qualquer projeto, toque no ícone Design na barra de abas
Selecione o alvo de exportação (React, Vue, Svelte, HTML/CSS)
Comece com uma tela em branco ou escolha um modelo

Interface básica

O designer é dividido em:

Painel de componentes (esquerda) — Elementos arrastáveis
Tela (centro) — Sua área de design
Propriedades (direita) — Personalize os elementos selecionados

Componentes disponíveis

A paleta cobre 35 tipos de componentes. Uma seleção:

Layout

Componente	Descrição
Container	Contêiner flexível
Row	Elementos horizontais
Column	Elementos verticais
Grid	Layout CSS Grid
Scroll	Área rolável

Entrada

Componente	Descrição
Button	Botão com variantes
TextInput	Campo de texto
Toggle	Interruptor liga/desliga
Slider	Seletor de valor
Dropdown	Menu suspenso
Checkbox	Caixa de seleção
RadioGroup	Opções de rádio

Exibição

Componente	Descrição
Text	Texto com estilos
Image	Imagens/ícones
Card	Cartão de informações
List	Lista dinâmica
Badge	Selo de notificação
Divider	Separador visual

Navegação

Componente	Descrição
NavBar	Barra de navegação superior
TabBar	Navegação por abas
BottomNav	Navegação inferior
Breadcrumb	Navegação hierárquica

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 TextInput:

E-mail:

Placeholder: "Email"
Tipo: email
Ícone: mail
Largura: 100%

Senha:

Placeholder: "Password"
Tipo: password
Ícone: lock
Largura: 100%

Arraste um Button:

Texto: "Log In"
Variante: primary
Largura: 100%
Border-radius: 12px

Passo 5: Links extras

Adicione componentes Text para:

"Forgot your password?" (estilo de link)
"Don't have an account? Sign up" (texto esmaecido + link)

Código gerado

O designer produz automaticamente um código limpo:

// Saída em React
export function LoginScreen() {
	const [email, setEmail] = useState("");
	const [password, setPassword] = useState("");

	return (
		<div className="flex flex-col items-center justify-center min-h-screen bg-neutral-950 p-6">
			<img src="/logo.png" alt="Logo" className="w-30 h-30 rounded-full mb-8" />

			<input
				type="email"
				placeholder="Email"
				value={email}
				onChange={(e) => setEmail(e.target.value)}
				className="w-full p-3 mb-4 bg-neutral-900 rounded-xl
                   border border-neutral-800 text-white"
			/>

			<input
				type="password"
				placeholder="Password"
				value={password}
				onChange={(e) => setPassword(e.target.value)}
				className="w-full p-3 mb-6 bg-neutral-900 rounded-xl
                   border border-neutral-800 text-white"
			/>

			<button
				className="w-full p-3 bg-blue-600 rounded-xl
                          text-white font-semibold hover:bg-blue-700"
			>
				Log In
			</button>

			<p className="mt-4 text-neutral-500 text-sm">
				Don't have an account? <span className="text-blue-400">Sign up</span>
			</p>
		</div>
	);
}

<!-- Saída em Vue -->
<script setup>
import { ref } from "vue";
const email = ref("");
const password = ref("");
</script>

<template>
  <div class="flex flex-col items-center justify-center min-h-screen bg-neutral-950 p-6">
    <img src="/logo.png" alt="Logo" class="w-30 h-30 rounded-full mb-8" />
    <input
      v-model="email"
      type="email"
      placeholder="Email"
      class="w-full p-3 mb-4 bg-neutral-900 rounded-xl border border-neutral-800 text-white"
    />
    <input
      v-model="password"
      type="password"
      placeholder="Password"
      class="w-full p-3 mb-6 bg-neutral-900 rounded-xl border border-neutral-800 text-white"
    />
    <button
      class="w-full p-3 bg-blue-600 rounded-xl text-white font-semibold hover:bg-blue-700"
    >
      Log In
    </button>
    <p class="mt-4 text-neutral-500 text-sm">
      Don't have an account? <span class="text-blue-400">Sign up</span>
    </p>
  </div>
</template>

Recursos avançados

Design responsivo

O designer lida automaticamente com a responsividade:

Auto-layout: Os elementos se ajustam ao tamanho da tela
Breakpoints: Defina disposições diferentes para celular/tablet
Unidades relativas: Usa %, rem e flex em vez de pixels fixos

Estados de interação

O designer captura estados visuais, não comportamento — ele gera HTML/CSS estático, então não há conexão de eventos nem navegação. O que você pode definir por componente:

Selecione um componente (por exemplo, um Button)
Estilize seus estados de hover, active, focus e disabled de forma independente
Para links, defina o destino href

O comportamento real (handlers de clique, roteamento, dados) é adicionado depois no código, no HTML/CSS/React/Vue/Svelte que o designer exporta.

Modelos reutilizáveis

Salve seus designs como modelos:

Componentes personalizados: Salve combinações como componentes únicos
Design system: Defina cores, tipografia e espaçamento
Modelos de tela: Compartilhe layouts completos com a equipe

Suporte a gestos

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

Pinça para dar zoom na tela
Toque duplo para selecionar elementos aninhados
Toque longo para menus contextuais
Deslize para navegar entre os painéis

Alvos de exportação

O designer gera código real e editável — tudo baseado em web:

Alvo	Saída
React / JSX	Componentes com hooks
Vue	Componentes single-file
Svelte	Componentes `.svelte`
HTML + CSS	Marcação limpa, sem framework
SVG	Exportação vetorial da tela

Dicas e melhores práticas

Comece pela estrutura: Posicione os contêineres antes do conteúdo
Use auto-layout: Evite tamanhos fixos sempre que possível
Nomeie seus componentes: Gera um código mais legível
Visualize com frequência: Verifique em diferentes tamanhos de tela
Exporte de forma incremental: Não espere até o fim para conferir o código

O designer visual permite projetar e programar a partir do mesmo dispositivo — esboce uma tela, exporte código limpo em React, Vue, Svelte ou HTML/CSS e continue construindo ali mesmo. Experimente hoje e acelere seu desenvolvimento!