Las agencias de publicidad tradicionales en general, tienen un flujo clásico que funciona muy bien para piezas gráficas (banners, landing pages estáticas o campañas impresas), pero que **choca frontalmente con la naturaleza real de una página web con componentes dinámicos y servicios**:

El uso de Figma como si fuera Photoshop o Illustrator crea una composición plana, de dimensiones fijas (normalmente 1440 px desktop), con efectos, sombras, tipografías y animaciones pensadas como “afiche digital”.

El resultado es un diseño hermoso en Figma, pero que ignora (o complica) conceptos fundamentales de la web:

Responsive / mobile-first: columnas, filas, grids y flex que deben adaptarse a 6-8 breakpoints reales, etc.
Capas y z-index: muchas composiciones complejas se vuelven imposibles o muy pesadas en CSS.
Navegación y estados: hover, active, focus, scroll-triggered animations, micro-interacciones, accesibilidad, eso es imposible diseñar en Figma.
Performance: imágenes sin optimizar, es un error subir a una Web, por ejemplo una imagen de 4.000px X 3200px de 10mg de “peso”, fuentes personalizadas sin fallback, animaciones CSS/GSAP que no se pueden replicar 1:1.
Componentes reutilizables: Ejemplo un botón diseñado en 5 variantes diferentes en Figma se convierte en un dolor de cabeza al programarlo.

Esto genera tres problemas recurrentes que ya se conocen de primera mano, por múltiples experiencias:

Tiempo perdido en handoff: el desarrollador Web pasa 40-60 % del proyecto “traduciendo” el diseño gráfico en vez de construir, basado en los componentes que verdaderamente se necesitan: servicios, formularios, atender la llegada de clientes (landing), navegación fácil, usabilidad-accesabilidad, etc.
Frustración mutua: diseñadores gráficos sienten que el desarrollador Web “estropea” el diseño; el desarrollador Web siente que el diseño es “irreal”.
Accesibilidad: Desde un diseño gráfico es imposible diseñar la “accesibilidad” de una Web, sus buenas prácticas.
Calidad final baja: la web nunca queda tan bonita como el Figma y, sobre todo, no es tan usable ni rápida. Puede quedar más bonita si se cambia el enfoque, primero diseño Web luego diseño gráfico entrega las piezas.

EL CAMBIO:

Director del proyecto, hace el inventario de componentes y servicios que se ofrecerán por la Web, diseñadores graficos entregan las piezas para los espacios que se generaron después del análisis de los componentes que deben ir, diseño web se hace directamente en la web, la experiencia lo certifica.

El cliente debe ver y aprobar el diseño Web, no el diseño gráfico, el ahorro en tiempo es considerable, ademas se reduce a un mínimo el ir y venir de cambios.

Recomendaciones y mejores prácticas (flujo ideal)

Cambio de mentalidad: “Diseño Web no es igual a Diseño Gráfico”.

Los diseñadores gráficos **NO** deben entregar páginas completas en Figma como si fueran carteles.

Su rol pasa a ser proveedores de assets y dirección creativa:

• Moodboard + Style Guide (colores, tipografía, iconografía, fotografía, tono de voz).
• Todos los assets en alta calidad y optimizados (fotos en WebP + AVIF, SVGs, ilustraciones en capas separadas).
• Componentes (botones, cards, formularios, headers, footers) con variantes reales (hover, disabled, loading, etc.).
• Key screens o “hero sections” de referencia (solo 2-3 pantallas importantes, no toda la página).
• Animaciones descritas en detalle (Lottie, JSON o video de referencia + timing). Siempre basados en el constructor usado Elementor, Divi, etc, NO elucubrar, NO cosas imposibles en Web.

Ventajas de este flujo:

• El diseño se valida **en el medio real** desde el día 1 → se evitan sorpresas.
• Responsive y mobile-first desde el principio.
• Animaciones y interacciones se prueban en tiempo real (performance, accesibilidad, SEO).
• El cliente aprecia las interacciones de una vez, es un gran valor que se le presenta para la aprobación.
• El cliente ve una web viva mucho antes → feedback más útil.
• Los cambios son muchos más fáciles y manejables.

Estándares recomendados para implementar ya:

Normas de assets** (para que yo no pierda tiempo):

• Fotos: máximo 250 KB por imagen
• Iconos: SVG optimizados o de galerías.
• Fuentes: solo las necesarias evitar pagas que en ocaciones no las despliega el navegador.
• Fondos: gradientes y texturas en CSS cuando sea posible (mejor performance).

Beneficios reales que le vendería a la agencia y al cliente:

• Ahorro de tiempo**: 30-50 % menos de horas de desarrollo.
• Mejor calidad: la web se ve y se siente como una web moderna, no como una copia de Figma.
• Escalabilidad: una vez creado el Design System (el método o el proceso), los siguientes proyectos son mucho más rápidos.
• Diferenciación: las agencias puede ofrecer “diseño web real” en vez de “Figma bonito que luego no funciona”.
• Felicidad del equipo: diseñadores se enfocan en lo que mejor hacen (creatividad visual) y el desarrollador Web se enfoca en lo que mejor hace (experiencia web real).
• Conclusión clara y directa: Sí, el diseño web debe hacerse directamente en la web (o en herramientas no-code/low-code pensadas para web como Webflow/Framer).
• Los diseñadores deben entregar piezas de contenido y dirección creativa, no páginas completas planas.

Este cambio no solo resuelve el dolor de cabeza actual de muchas agencias de publicidad con este esquema, sino que posiciona una imagen más profesional y moderna frente a sus clientes.

Pierre García Barre / Eduardo Thomas