Diseñador Visual: De Idea a Interfaz

El módulo de diseñador visual de Pocket Code te permite crear interfaces de usuario arrastrando componentes, sin escribir una línea de código. Cuando terminas, exporta a React o Flutter.

Cómo funciona

1. Elige tu lienzo

Al abrir el diseñador, selecciona el tipo de proyecto:

• Móvil — Pantalla de teléfono (360×800)
• Tablet — Pantalla de tablet (768×1024)
• Web — Responsive desde 320px hasta 1440px

2. Arrastra componentes

La barra lateral izquierda tiene todos los componentes disponibles:

Básicos:

• Text, Heading, Paragraph
• Image, Icon, Avatar
• Button, Link, Badge

Formularios:

• Input, TextArea, Select
• Checkbox, Radio, Switch, Slider
• Date Picker, File Upload

Layout:

• Container, Row, Column, Grid
• Card, Modal, Drawer
• Header, Footer, Sidebar

Navegación:

• Tab Bar, Bottom Navigation
• Breadcrumb, Pagination
• Menu, Dropdown

3. Personaliza propiedades

Cada componente tiene un panel de propiedades donde puedes configurar:

Propiedades — Button
────────────────────
Text:       "Sign In"
Background: #3b82f6
Text Color: #ffffff
Radius:     8px
Padding:    12px 24px
Font:       Inter, 14px, Bold
Shadow:     0 2px 4px rgba(0,0,0,0.1)
────────────────────
Events:
  onClick → navigate("/home")
  onLongPress → showMenu()

4. Vista previa en tiempo real

Mientras diseñas, la vista previa se actualiza instantáneamente. Puedes:

• Rotar entre vertical y horizontal
• Cambiar el tamaño del dispositivo
• Probar interacciones (navegación, modales)
• Ver en modo oscuro y claro

Ejemplo práctico: Login Screen

Vamos a crear una pantalla de login paso a paso:

Paso 1: Estructura

Arrastra un Container vertical al lienzo y configúralo:

• Background: blanco
• Padding: 24px
• Alignment: center

Paso 2: Logo

Añade un Image en la parte superior:

• Source: tu logo
• Width: 80px
• Margin bottom: 32px

Paso 3: Formulario

Añade dos Input y un Button:

Componente	Propiedades
Input 1	placeholder: "Email", type: email, icon: 👤
Input 2	placeholder: "Password", type: password, icon: 🔒
Button	text: "Sign In", bg: #3b82f6, fullWidth: true

Paso 4: Extras

• Text link: "¿Olvidaste tu contraseña?"
• Divider con texto "o"
• Button outline: "Crear cuenta"
• Social buttons: Google, Apple, GitHub

Exportar código

Cuando tu diseño está listo, toca Export y elige el formato:

React (JSX + Tailwind)

export default function LoginScreen() {
	return (
		<div className="flex flex-col items-center justify-center min-h-screen p-6 bg-white">
			<img src="/logo.png" alt="Logo" className="w-20 mb-8" />

			<div className="w-full max-w-sm space-y-4">
				<input
					type="email"
					placeholder="Email"
					className="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
				/>
				<input
					type="password"
					placeholder="Password"
					className="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
				/>
				<button className="w-full py-3 text-white bg-blue-500 rounded-lg font-semibold hover:bg-blue-600">
					Sign In
				</button>
			</div>

			<p className="mt-4 text-sm text-gray-500">¿Olvidaste tu contraseña?</p>
		</div>
	);
}

Flutter (Dart)

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset('assets/logo.png', width: 80),
              const SizedBox(height: 32),
              TextField(
                decoration: InputDecoration(
                  hintText: 'Email',
                  prefixIcon: Icon(Icons.person),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),
              const SizedBox(height: 16),
              TextField(
                obscureText: true,
                decoration: InputDecoration(
                  hintText: 'Password',
                  prefixIcon: Icon(Icons.lock),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),
              const SizedBox(height: 16),
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.symmetric(vertical: 16),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                  child: const Text('Sign In'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Plantillas prediseñadas

El diseñador incluye plantillas para empezar rápido:

• E-commerce — Product list, detail, cart, checkout
• Social App — Feed, profile, chat, stories
• Dashboard — Charts, tables, stats cards
• Blog/News — Article list, reader, categories
• Fitness — Workout tracker, stats, calendar

Tips avanzados

Responsive design

• Usa layouts Flex y Grid en vez de posiciones absolutas
• Define breakpoints para adaptar a diferentes pantallas
• Prueba en múltiples tamaños desde la vista previa

Consistencia

• Crea un Design System local con tus colores y tipografías
• Reutiliza componentes guardándolos como favoritos
• Exporta tu design system para usarlo en otros proyectos

Colaboración

• Comparte diseños como plantillas en el Marketplace
• Exporta como imagen para feedback rápido
• Los diseños se sincronizan con tu repositorio Git

---

El diseñador visual elimina la barrera entre idea y código. Diseña, previsualiza y exporta — todo desde tu teléfono Android.