Bootcamp: Diseño, Construcción y Publicación Web con Figma, Locofy, Builder.io y Vercel

Bootcamp Web 2026 · 20% Teoría / 80% Práctica

Bootcamp Diseño, Construcción y Publicación Web

Diseña en Figma, construye con Locofy y Builder.io, y publica en Vercel. Aprende un flujo de trabajo moderno de principio a fin sin depender de programación avanzada.

Ideal para: Diseñadores (gráficos, UX/UI), emprendedores, marketers, creadores de contenido, programadores principiantes y profesionales que buscan agilizar la creación de interfaces de alto impacto.

Inscríbete Ahora Contáctanos

80h

Académicas (60h Reales)

3 Meses

12 Semanas · 24 Sesiones

25 Jul

Inicio de Clases

Información General

Modalidad / Nivel

Online en vivo

Teórico – Práctico (20/80)

Nivel Básico a Intermedio (No requiere programación previa)

Horario / Frecuencia

2 Sesiones por Semana

2 horas y 30 minutos por sesión

60 horas reales de aprendizaje

Calendario / Inicio

Sábados y Domingos / Opcional

12 Semanas continuas

Inicio: Sábado 25 de Julio

Temario Académico Detallado

Un plan de estudios completo y progresivo estructurado en 3 meses para dominar el diseño UX/UI, la conversión low-code y el despliegue en la nube.

Módulo 1: Introducción al flujo moderno de creación web

Semana 1 · 2 Sesiones

Contenidos clave:

• Funcionamiento web: Dominio, hosting, servidor y despliegue.
• El flujo profesional: Investigación, Diseño, Prototipado, Conversión, Construcción y Publicación.
• Conceptos no-code, low-code y desarrollo tradicional.
• Casos de uso (Landing pages, campañas, portafolios, cursos).

Producto del módulo:

Documento de planificación inicial con los objetivos, público, contenido y estructura de tu proyecto web.

Módulo 2: Fundamentos de UX/UI y planificación web

Semana 2 · 2 Sesiones

Contenidos clave:

• Introducción a la Experiencia de Usuario (UX) y de Interfaz (UI).
• Anatomía de una landing page: Hero, beneficios, testimonios, CTA y formularios.
• Arquitectura de la información, sitemaps y wireframes iniciales.
• Análisis de páginas de referencia competitivas en el mercado.

Producto del módulo:

Wireframe estructural y arquitectura de contenido definida para tu landing page.

Módulo 3: Diseño de interfaces profesionales en Figma

Semanas 3 a 5 · 6 Sesiones

Contenidos clave:

• Configuración, frames, jerarquía visual, tipografía y uso del color en UI.
• Diseño profesional con columnas, grids y la potencia de Auto Layout.
• Creación de componentes reutilizables (botones, tarjetas, campos) y variantes.
• Diseño responsive: Adaptación de escritorio, tablet y versión móvil.
• Prototipado e interacciones para pruebas de usabilidad en vivo.

Producto del módulo:

Diseño completo de alta fidelidad, interactivo y adaptativo en Figma.

Módulo 4: Preparación y conversión de diseños con Locofy

Semanas 6 y 7 · 4 Sesiones

Contenidos clave:

• Diferencia de diseño visual vs interfaces aptas para código estructurado.
• Etiquetado inteligente de capas, textos, imágenes, enlaces y botones en Locofy.
• Configuración de respuestas interactivas y comportamiento responsive.
• Análisis del proyecto exportado y su estructura lógica de carpetas.

Producto del módulo:

Primera versión funcional de la página web maquetada y convertida desde el diseño.

Módulo 5: Fundamentos de HTML, CSS y estructura del proyecto

Semana 8 · 2 Sesiones

Contenidos clave:

• Estructura fundamental: Etiquetas HTML, secciones, cabeceras y formularios.
• Introducción a CSS: Flexbox, layouts, espaciado, colores y tipografías.
• Uso práctico de las herramientas de inspección del navegador.
• Cómo interpretar y realizar ajustes puntuales sobre el código limpio de Locofy.

Producto del módulo:

Personalización de código manual e iteración estética fina sobre el proyecto.

Módulo 6: Creación y gestión visual de páginas con Builder.io

Semanas 9 y 10 · 4 Sesiones

Contenidos clave:

• Uso del editor visual de Builder.io con bloques, imágenes, videos y columnas.
• Creación de secciones dinámicas, banners y llamadas a la acción avanzadas.
• Edición rápida y mantenimiento de contenidos orientados a marketing digital.
• Integración del editor de Builder.io para control del contenido en tiempo real.

Producto del módulo:

Landing page editable por un equipo de contenidos/marketing desde la interfaz visual de Builder.io.

Módulo 7: Publicación y despliegue profesional con Vercel

Semana 11 · 2 Sesiones

Contenidos clave:

• Introducción práctica a repositorios usando Git y GitHub.
• Creación de cuenta en Vercel, conexión con GitHub y primer despliegue.
• Dominio personalizado, HTTPS seguro y flujos de actualización automáticos.
• Control de versiones: Actualización automática al actualizar código.

Producto del módulo:

Sitio publicado en internet, totalmente accesible con dominio personalizado funcional.

Módulo 8: Optimización, SEO, accesibilidad y medición

Semana 12 · 2 Sesiones

Contenidos clave:

• Optimización de recursos, formatos de imagen ligeros y velocidad de carga.
• Fundamentos de SEO On-Page: Etiquetas alt, meta titles, descripciones y URLs semánticas.
• Accesibilidad web elemental (contraste de colores, lector de pantalla y etiquetas).
• Introducción básica a Google Analytics y píxeles de medición para conversiones.

Producto del módulo:

Página optimizada de máxima velocidad para indexación óptima en buscadores.

Módulo 9: Proyecto final integrador

Transversal en los 3 Meses

Fases de desarrollo:

A lo largo de las 12 semanas, estructurarás, diseñarás y compilarás tu solución web real que sustentaras de forma interactiva ante el tutor.

• Etapa 1-4: Definición, estructura UI, componentes, vistas móvil/escritorio.
• Etapa 5-8: Conversión Locofy, ajustes de etiquetas HTML, administración en Builder.
• Etapa 9-12: Despliegue en producción con Vercel, optimización SEO y entrega final.

Proyectos sugeridos:

· Venta de cursos online
· Landing page de emprendimientos
· Portafolio profesional de servicios
· Registro para eventos o campañas publicitarias

🚀 Entregables del Proyecto Final

Para la obtención de tu certificación oficial del Bootcamp, deberás defender los siguientes hitos de desarrollo práctico:

• Diseño UX/UI: Enlace público del archivo organizado en Figma con variantes y prototipo navegable.
• Adaptabilidad: Interfaces responsivas diferenciadas para pantallas de escritorio y móviles.
• Código Limpio: Repositorio en GitHub con la estructura optimizada y conectada.

• Gestión No-Code: Configuración e integración visual editable con Builder.io.
• Producción en Vivos: Enlace web final optimizado, seguro (HTTPS) y publicado en Vercel.
• Sustentación: Presentación ágil del proyecto frente al docente del Bootcamp.

Inscríbete Ahora Contáctanos