Cada vez más, recibo diseños realizados por clientes o diseñadores en Figma. Es una herramienta fantástica, pero funciona de forma algo diferente al CMS donde finalmente se construye el sitio web.
Por eso, quiero compartir algunos consejos y puntos clave para que, como diseñador o cliente, sepas qué funciona bien y qué no tanto al entregar un diseño en Figma destinado a una web en YOOtheme Pro (Joomla) o YOOtheme/Divi (WordPress).
Por qué esto es importante
Figma es una herramienta de diseño y prototipado. No crea un sitio funcional, sino un diseño visual. La construcción en un CMS funciona de otra manera:
- Algunos efectos están disponibles por defecto
- Otros requieren CSS adicional
- Algunas cosas no son viables o recomendables en una web dinámica
Con un poco de preparación, evitarás sorpresas — y me ahorrarás tiempo (¡y frustración!) como desarrollador web.
Qué funciona bien / qué se puede construir sin problema
- Distribución clara en secciones y columnas lógicas
- Uso de tipografías estándar web (preferiblemente Google Fonts o fuentes fáciles de integrar)
- Colores definidos en formato HEX, RGB o HSL
- Imágenes fijas como PNG, JPG o SVG
- Botones con diseño estándar (color, texto, hover básico)
- Efectos hover simples (por ejemplo, cambio de color, sombra ligera)
- Sección tipo “hero” con imagen y texto
- Navegación y pie de página con estructura común
Qué requiere trabajo adicional o personalización (y no siempre es recomendable)
- Superposiciones complejas de texto e imagen
- Elementos que sobresalen de su columna o marco
- Efectos hover específicos (como desplazamientos, transparencia, rotaciones 3D)
- Modos de fusión (como Multiply, Overlay) → a menudo no compatibles con builders
- Sombras en texto o en partes concretas de imágenes
- Fuentes no disponibles (que no estén en Google Fonts ni se puedan integrar fácilmente)
- Animaciones que no estén disponibles de forma nativa en el builder
- Diseño totalmente pixel-perfect → un CMS funciona con diseño flexible (¡responsive!)
Qué es mejor evitar o consultar antes
- Posicionamiento fijo de elementos (por ejemplo, sticky en ubicaciones poco comunes)
- Diseños móviles completamente separados → mejor diseñar con responsiveness en mente
- Grids complejos (como masonry o rejillas asimétricas → difíciles en builders)
- SVGs inline con animaciones complejas → mejor entregar como imagen estática
- Requisitos estrictos de pixel-perfect → el CMS tiene su propia lógica
Entrega de SVGs e imágenes compuestas
- Si varios SVGs forman un solo elemento (por ejemplo, decoraciones superior/inferior de una tarjeta), entregarlos como un único archivo combinado.
- Solo SVGs que necesiten animación por separado deben entregarse individualmente.
- Para elementos que deben verse distintos en móvil, incluir también una versión específica para móvil.
Consejos para entregar el diseño
- Siempre incluir una exportación PNG por página al 100% del tamaño original → esto facilita el análisis y la maquetación.
- Opcional: PDF adicional con flujo del sitio o mapa de navegación.
- Entregar todas las imágenes por separado (PNG, JPG o SVG).
- Indicar qué elementos deben mantenerse tal cual y dónde hay margen de flexibilidad.
- Pensar en diseño responsive → incluir breakpoints o ejemplos visuales de cómo debe adaptarse a móvil.
Compartir el proyecto de Figma (si es posible)
Si la licencia o el tipo de proyecto lo permiten, compartir el archivo de Figma conmigo (con permisos de ‘ver’ o ‘inspeccionar’).
Esto permite:
- Revisar interacciones como hovers, animaciones o transiciones
- Detectar efectos especiales que tal vez no están detallados en la propuesta
- Extraer elementos visuales que no hayan sido entregados como archivos separados
Importante: Solicito que se entreguen previamente todos los elementos necesarios (imágenes, SVGs, versiones móviles) como archivos separados.
El archivo de Figma sirve como referencia adicional — esto evita trabajo extra y posibles errores.
“Figma crea un diseño — pero el CMS crea la web. Una buena coordinación evita muchos malentendidos.”
Resumen
Figma es una herramienta fantástica para crear diseños.
Pero un CMS como YOOtheme o Divi funciona de forma diferente.
Con esta checklist, nos aseguramos de que el resultado final no solo sea bonito, sino también funcional y agradable para el usuario.
¿Quieres comentar tu diseño o resolver dudas antes de comenzar? Ponte en contacto conmigo — y evitamos sorpresas durante el desarrollo.