Publicado el 2026-10-12 · Por El equipo de MarkupGen
Crea banners HTML5 desde Figma con MarkupGen: diseña, convierte y edita en Studio Editor
Un banner parece terminado en Figma mucho antes de estarlo en código. Alguien tiene que reconstruir el titular, la foto de producto y el botón en HTML y CSS, y repetirlo cuando cambia el texto, el botón se mueve 8px o la campaña necesita tres tamaños más. La mayor parte de ese tiempo se va en pequeñas correcciones, no en la primera versión.
MarkupGen acorta las dos mitades del trabajo. Convierte un frame de Figma en HTML y CSS, y después te permite seguir ajustando el resultado de forma visual en Studio Editor, sin volver a Figma por cada cambio pequeño. Este artículo recorre todo el flujo Figma to HTML5 banner y detalla qué hace la herramienta y qué no.
Diseño en Figma → plugin de MarkupGen → generación de HTML/CSS → Studio Editor → revisión → exportación
Convertir diseños de Figma en banners HTML5
El flujo empieza en el plugin de Figma de MarkupGen. Selecciona el frame del banner y envíalo. La estructura, los textos y las imágenes del frame llegan a tu espacio de trabajo de MarkupGen como un proyecto, y ahí generas el código.
Un banner se convierte igual que cualquier otro frame, así que sus elementos habituales se conservan:
- Titulares y textos promocionales siguen siendo texto real, no parte de una imagen aplanada.
- Imágenes de producto y de fondo se exportan con el proyecto.
- Botones CTA mantienen su relleno, radio y etiqueta.
- Formas, capas, tipografía y espaciado se leen del archivo de diseño, no se estiman a partir de una captura.
El resultado es un punto de partida que suele acercarse mucho al diseño, no una garantía de copia píxel a píxel. Los efectos poco comunes, las fuentes personalizadas que no están en Google Fonts y las capas muy superpuestas son lo primero que conviene revisar. Para entender mejor cómo se lee un diseño, consulta cómo funciona la conversión de Figma a HTML/CSS de MarkupGen.
Editar banners directamente en Studio Editor
Esta es la parte que hace de MarkupGen algo más que un generador de código. El código generado casi nunca es la última versión de un banner: la línea legal se alarga, el CTA necesita más aire, el cliente quiere el logo más grande. En la mayoría de herramientas eso implica editar CSS a mano o volver a Figma y convertir otra vez.
En MarkupGen activas el Editor Visual en la barra de herramientas del proyecto —el modo de edición del estudio del proyecto— y trabajas sobre el propio banner.
Captura real del Editor Visual de MarkupGen (interfaz en inglés), aquí con el diseño de una página de producto. Al seleccionar un elemento se abren sus campos de contenido, enlace y diseño.
Selecciona cualquier elemento en la vista previa o en el árbol HTML y el inspector muestra lo que puedes cambiar:
| Lo que quieres corregir | Lo que ofrece Studio Editor |
|---|---|
| Textos y enlaces | Editar el texto en su sitio (doble clic en la vista previa), definir un enlace y si se abre en una pestaña nueva |
| Tamaño y espaciado | Ancho, alto, margin y padding por lado |
| Posición y alineación | Alinear dentro de un contenedor flex o grid, cambiar el orden, definir un z-index, rotar |
| Tipografía | Tamaño, peso, interlineado y alineación del texto |
| Aspecto | Color de fondo y de texto, opacidad, borde, radio, sombra y filtros como desenfoque o brillo |
| Visibilidad | Ocultar, mostrar o eliminar un elemento |
En la práctica:
- Ajusta el diseño y la posición de los elementos compatibles sin abrir la hoja de estilos.
- Afina tamaño, espaciado y alineación con valores exactos.
- Haz cambios visuales sin volver a Figma por cada pequeña edición.
- Ve el resultado al momento, deshaz o rehaz un paso y guarda cuando esté bien.
- Reduce las idas y vueltas entre diseño y código. Cada cambio se escribe en el HTML y el CSS, así que el código que exportas es el banner que ves.
Dos límites que conviene conocer. La edición se hace seleccionando un elemento y cambiando sus propiedades en el inspector; no es un lienzo libre de arrastrar y soltar. Y los cambios van en un solo sentido: modifican el código generado, no tu archivo de Figma.
Studio Editor está incluido en el plan Free, donde comparte la cuota mensual de generaciones, y es ilimitado en los planes de pago.
Varias opciones de generación de código
Para la salida HTML responsive eliges el kit de herramientas CSS en el que se escribe el código:
- Vanilla CSS: CSS puro, sin dependencias; lo más sencillo de insertar en un espacio publicitario o en un bloque de CMS.
- Tailwind CSS: clases de utilidad, útil si el banner vive en un sitio hecho con Tailwind.
- Bootstrap: para equipos cuyas páginas ya cargan Bootstrap.
Las tres están disponibles en el plan Free. Bulma, Materialize y Pico CSS también son compatibles y requieren un plan de pago. Si dudas, Vanilla CSS vs Bootstrap vs Tailwind las compara. Para un banner independiente, Vanilla CSS suele dar el archivo más pequeño y portable.
El plan Free incluye 5 generaciones de código al mes; los planes de pago tienen cuotas diarias.
Vista previa, Evaluación con IA y ajustes
Después de generar, compara la vista previa con la imagen del diseño original en el espacio de trabajo y corrige lo que veas en Studio Editor.
En los planes de pago, la Evaluación con IA aporta una segunda opinión. Compara el resultado generado con el diseño original y devuelve una puntuación de coincidencia de 0 a 10 según seis criterios ponderados —estructura y diseño, espaciado y alineación, tipografía, color, contenido e imágenes, dimensiones y efectos—, junto con una lista de diferencias y un prompt editable para regenerar.
Trata la puntuación como una guía de dónde mirar. Mide la coincidencia visual con el diseño; no certifica que un banner sea perfecto al píxel, esté listo para producción ni se vea igual en todos los navegadores. Cómo evaluar HTML generado por IA repasa las comprobaciones que conviene hacer a mano.
Exportar y usar tu banner HTML5
Cuando el banner esté bien, guárdalo y descarga el HTML con sus imágenes y fuentes en un .zip, o copia el código. En los planes de pago el mismo diseño también puede exportarse como componentes de React, Vue, Svelte o Angular.
Conviene separar tres cosas a las que se suele llamar "banner HTML5":
| Qué es | En MarkupGen | |
|---|---|---|
| Banner HTML/CSS | El diseño del banner como marcado y estilos | Sí: es el flujo principal |
| Animación e interacciones | Movimiento, estados hover, comportamiento con scripts | En parte: animaciones de entrada predefinidas (fade, slide, zoom, flip) que se reproducen cuando el elemento entra en el viewport, con duración, retardo y easing; no hay editor de línea de tiempo ni de keyframes |
| Paquete para plataformas publicitarias | Un ZIP que cumple la especificación de una red: seguimiento de clics, límites de peso, reglas de nombres | No: lo preparas y validas tú |
Lo que exportas es, por tanto, marcado limpio que te pertenece. Si el banner va a una red publicitaria, añade después el código de click-through y el empaquetado de esa plataforma y pásalo por su propio validador. Si va a tu sitio, a una landing page o a un CMS, el HTML y el CSS exportados suelen ser suficientes. Para banners destinados a un email, consulta Email Ready.
A quién ayuda este flujo
- Desarrolladores frontend: se ahorran la reconstrucción y dedican el tiempo a lo que requiere criterio. Consulta MarkupGen para desarrolladores.
- Diseñadores y equipos creativos: corrigen espaciado y textos en el banner real en lugar de redactar una petición de cambio.
- Equipos de marketing digital: convierten el diseño de una campaña en marcado utilizable sin esperar un hueco de desarrollo. Consulta MarkupGen para equipos de marketing.
- Agencias y equipos de producción publicitaria: resuelven las rondas de feedback del cliente con ediciones en vez de reconstrucciones. Consulta MarkupGen para agencias.
Resumen del flujo
- Diseña el banner en Figma, un frame por tamaño.
- Transfiere el frame con el plugin de Figma de MarkupGen.
- Genera HTML y CSS con el kit que necesites.
- Ajusta el banner en Studio Editor.
- Revisa la vista previa frente al diseño y evalúala con la Evaluación con IA si tu plan la incluye.
- Exporta el código y pruébalo donde se publicará el banner.
Preguntas frecuentes
¿MarkupGen exporta un ZIP listo para Google Ads u otra red publicitaria? No. MarkupGen exporta el HTML, el CSS, las imágenes y las fuentes del banner. El seguimiento de clics, los límites de peso y las reglas de empaquetado de cada plataforma no se gestionan, así que debes añadirlos y validarlos tú.
¿Puedo animar el banner? Puedes aplicar animaciones de entrada predefinidas como fade, slide, zoom y flip, que se reproducen cuando el elemento entra en el viewport, y definir duración, retardo y easing. No hay editor de línea de tiempo ni de keyframes.
¿Studio Editor está disponible en el plan Free? Sí. La edición visual está incluida en el plan Free y comparte su cuota mensual de generaciones. La Evaluación con IA requiere un plan de pago.
¿Mis cambios se sincronizan de vuelta con Figma? No. Los cambios solo modifican el HTML y el CSS generados. Tu archivo de Figma no se altera.
¿El banner coincidirá exactamente con mi diseño? Suele quedar muy cerca, pero no se garantiza una coincidencia exacta. Compara la vista previa con el original y corrige las diferencias en Studio Editor.
Convierte tus diseños de Figma en banners HTML5 editables
Diseña en Figma. Genera el código con MarkupGen. Ajusta tu banner en Studio Editor.