¡50% Dto. Por tiempo limitado!
Curso de Webflow
Curso de Webflow
+128 Estudiantes activos
Transforma tus diseños de Figma en sitios web reales, funcionales y listos para publicarse. Aprende a implementar tus diseños de forma profesional en Webflow, creando experiencias pixel perfect, responsive y escalables, sin la necesidad de escribir código.
12 Horas 40 minutos
41 Clases
.jpg)
¿Qué aprenderás en este curso?
Implementación profesional
Aprende a convertir tus diseños de Figma en sitios web completamente funcionales, respetando estructura, jerarquía visual y comportamiento real en web.
Diseños pixel perfect y responsive
Implementa layouts idénticos a tus diseños originales, adaptados a todos los breakpoints, utilizando buenas prácticas reales de web, no hacks visuales.
Creación de CMS dinámicos
Aprende a crear blogs, listados de contenido, artículos y colecciones dinámicas usando el CMS nativo de Webflow, con estructura profesional y fácil mantenimiento.
Filtros, búsquedas y lógica de contenido
Construye experiencias avanzadas con filtros, búsquedas y organización de contenido, acercándote al nivel de productos digitales reales.
Animaciones y microinteracciones
Integra animaciones nativas de Webflow para mejorar la experiencia del usuario sin sacrificar rendimiento ni usabilidad.
Uso estratégico de Relume
Aprende a trabajar con Relume, la librería profesional de componentes para Webflow, para estructurar sitios más rápido, con lógica y consistencia real de producto.
Proyecto del curso
En este curso crearemos 2 proyectos, el primero será una landing page para enseñarte los fundamentes de Webflow. El siguiente proyecto será la implementación completa de una web avanzada que incluye filtros, búsqueda, CMS animaciones y más. Además utilizaremos Relume como punto de partida para implementar todo el diseño de nuestra web.
¿Por qué debería tomar este curso?
Aprender Webflow te convierte en un diseñador más completo, más valioso y más competitivo.
En este curso dejarás de ser solo alguien que diseña pantallas en Figma.
Aprenderás a hacer que tus diseños existan en el mundo real: sitios que se publican, se usan y generan valor.
Pensarás como un diseñador web profesional:
- Diseñarás con intención de implementación
- Entenderás cómo funciona realmente la web
- Construirás productos digitales funcionales, no solo prototipos
Webflow es hoy uno de los mayores diferenciadores del mercado, porque une diseño y ejecución en una sola herramienta.
Cuando sabes Webflow, ya no dependes de otros para ver tus ideas hechas realidad.
Este curso está diseñado para quienes quieren cerrar la brecha entre diseño y desarrollo, y empezar a construir experiencias digitales completas, funcionales y profesionales.
¡Comienza a implementar tus propios diseños de manera profesional!
¿Para quién es este curso?
Este curso es ideal para cualquier persona que desea aprender sobre cómo implementar sus propios diseños en webflow, no importa si eres Designer o Developer lo que te enseñaré aquí te ayudara a crear sitios web profesionales y funcionales.
Testimonios de estudiantes
.jpg){kind=avatar}
.webp)
.webp)
.jpg)
.webp)
.webp)
%202.24.03%E2%80%AFp.m..webp)
.webp)
Temario del curso
Módulo 1: Fundamentos para implementar en Webflow
1 — Bienvenida al curso y mentalidad de implementación profesional
2 — Qué es Webflow y por qué es un diferenciador en el mercado actual
3 — Qué tipo de proyectos sí y no deberías hacer en Webflow
4 — Cómo funciona una web en el navegador (pensado para diseñadores)
5 — HTML explicado desde la lógica visual de Figma
6 — CSS explicado sin código: cómo impacta tus diseños
Módulo 2: Webflow UI y fundamentos técnicos
7 — Conociendo la interfaz de Webflow (UI completa y lógica interna)
8 — Estructura base de una página web en Webflow
9 — El Box Model aplicado directamente en Webflow
10 — Nesting: cómo se construyen layouts reales
11 — Cascading y herencia: por qué a veces “se rompe” tu diseño
12 — Uso correcto de clases en Webflow
13 — Naming conventions profesionales (errores comunes y buenas prácticas)
Módulo 3: Layouts y sistemas de diseño para Webflow
14 — Display en Webflow: Block, Flex, Grid y None
15 — Flexbox aplicado a layouts reales
16 — CSS Grid para estructuras complejas
17 — Uso estratégico de containers y wrappers
18 — Diseño responsive desde desktop hasta mobile
19 — Cómo pensar breakpoints sin duplicar trabajo
Módulo 4: Preparación de diseños en Figma para Webflow
20 — Cómo preparar tus diseños en Figma para una implementación limpia
21 — Errores comunes al diseñar sin pensar en Webflow
22 — Qué decisiones de diseño afectan directamente la implementación
23 — Presentación del proyecto base (landing page)
24 — Estructura inicial del proyecto en Webflow
Módulo 5: Proyecto 1 — Landing Page profesional
25 — Construcción del Hero section (estructura + layout)
26 — Creación de secciones reutilizables
27 — Responsive avanzado en landing pages
28 — Ajustes visuales pixel perfect
29 — Publicación y revisión profesional del proyecto
Módulo 6: Webflow dinámico — CMS y lógica de contenido
30 — Introducción al CMS de Webflow
31 — Creación de colecciones (blogs, artículos, contenido dinámico)
32 — Relaciones entre colecciones
33 — Buenas prácticas para escalar contenido sin romper el diseño
Módulo 7: Funcionalidades avanzadas y aceleración de flujo
34 — Filtros y búsquedas en Webflow
35 — Animaciones y microinteracciones con sentido UX
36 — Uso profesional de Relume (estructura + velocidad)
37 — Componentes, librerías y reutilización avanzada
Módulo 8: Proyecto Final — Sitio web avanzado
38 — Presentación del proyecto avanzado
39 — Implementación completa del sitio
40 — Optimización, orden y buenas prácticas finales
41 — Publicación del sitio y cierre del curso
¿Además del curso que otro tipo de ayuda recibiré?
Respuestas a tus dudas
En cada clase podrás dejar todas tus dudas y personalmente te ayudaré a resolverlas.
Actualizaciones gratis
Cuando algo importante cambie, recibirás actualizaciones y clases nuevas sin costo.
Recursos descargables
Tendrás acceso a material exclusivo y archivos de Figma, que te ayudarán a hacer tu trabajo más fácil y rápido.
Certificado del curso
Al terminar el curso podrás solicitar tu certificado para comprobar que has completado el 100% del contenido
.png)
Paquetes de cursos
Aprende más gastando menos, elige el paquete que mejor se ajuste a tus objetivos.
DesignerPack
(Los cursos ya están definidos y no se pueden cambiar).
MegaPack
Cursos relacionados
Los estudiantes también se están preparando con estos cursos.
.webp)
Preguntas frecuentes
Respuestas rápidas a lo que necesitas saber antes de comenzar.
Depende del curso. Cada uno está diseñado para un nivel específico — algunos requieren conocimientos previos de diseño o Figma, otros son más accesibles si estás comenzando. Para saber exactamente en qué punto estás y qué curso es el indicado para ti, visita la Ruta de Aprendizaje — ahí encontrarás los cursos ordenados por nivel para que avances sin saltarte pasos importantes.
Los cursos reciben actualizaciones constantemente, siempre y cuando cambie algo muy importante. Un cambio en la interfaz no es importante ya que la funcionalidad es la misma solo luce ligeramente diferente.
Los cursos están pre grabado para permitirte repasar cuantas veces necesites y entender todo el conocimiento que comparto en cada lección.
Tendrás acceso de por vida si realizaste una compra de curso individual o DesignerPack, si te suscribiste al MegaPack tu acceso es a todos los cursos durante 1 año.
En cada clase podrás dejar tus preguntas y yo mismo las responderé. También tendrás acceso a recursos, herramientas y archivos de Figma que te ayudarán a mejorar tu flujo de trabajo y aprendizaje.
Al adquirir el DesignePack o MegaPack encontrarás un formulario para registrarte y poder obtener este beneficio.
¿Necesitas ayuda? 😃