Designer Visual: Criando UIs Sem Escrever Código

Designer Visual: Construa Interfaces Arrastando e Soltando

O Designer Visual é um dos recursos mais poderosos do Pocket Code. 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
• Multi-framework: React, Flutter, Android nativo

Começando

Abrir o designer

1. Em qualquer projeto, toque no ícone Design na barra de abas
2. Selecione o framework (React, Flutter, XML)
3. 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

Layout

Componente	Descrição
Container	Contêiner flexível
Row	Elementos horizontais
Column	Elementos verticais
Grid	Layout CSS Grid
Stack	Elementos sobrepostos
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
Avatar	Imagem de perfil
Divider	Separador visual

Navegação

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

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

E-mail:

• Placeholder: "E-mail"
• Tipo: email
• Ícone: mail
• Largura: 100%

Senha:

• Placeholder: "Senha"
• Tipo: password
• Ícone: lock
• Largura: 100%

Passo 4: Botão de login

Arraste um Button:

• Texto: "Entrar"
• Variante: primary
• Largura: 100%
• Border-radius: 12px

Passo 5: Links extras

Adicione componentes Text para:

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

Código gerado

O designer produz automaticamente um código limpo:

// Saída 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 Flutter
class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final emailController = TextEditingController();
  final passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF0A0A0A),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 60,
                backgroundImage: AssetImage('assets/logo.png'),
              ),
              SizedBox(height: 32),
              TextField(
                controller: emailController,
                decoration: InputDecoration(
                  hintText: 'Email',
                  prefixIcon: Icon(Icons.mail),
                ),
              ),
              SizedBox(height: 16),
              TextField(
                controller: passwordController,
                obscureText: true,
                decoration: InputDecoration(
                  hintText: 'Password',
                  prefixIcon: Icon(Icons.lock),
                ),
              ),
              SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {},
                child: Text('Log In'),
                style: ElevatedButton.styleFrom(
                  minimumSize: Size(double.infinity, 48),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

Vinculação de dados

Conecte componentes a dados:

1. Selecione um componente (ex.: uma List)
2. Nas propriedades, toque em Bind Data
3. Selecione a fonte (API, estado local, mock)
4. Mapeie os campos para as propriedades do componente

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

Frameworks suportados

Framework	Status	Qualidade do código
React/JSX	✅ Estável	Excelente
Flutter	✅ Estável	Excelente
Android XML	✅ Estável	Muito boa
SwiftUI	🔄 Beta	Boa
Vue	📋 Planejado	—

Dicas e melhores práticas

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

O que vem a seguir

• Importação do Figma: Traga designs diretamente do Figma
• Modo colaborativo: Projete em equipe em tempo real
• Designer com IA: Descreva a UI em linguagem natural e deixe a IA construí-la
• Editor de animações: Adicione transições e animações de forma visual

---

O designer visual torna o Pocket Code o único IDE mobile onde você pode projetar e programar a partir do mesmo dispositivo. Experimente hoje e acelere seu desenvolvimento!