Una entrega de Figma a WordPress se rompe cuando el archivo llega a desarrollo incompleto. Nosotros cerramos un checklist de 15 puntos —variables, componentes, estados, tipografía, breakpoints y notas de motion— antes de escribir la primera línea de código. Con eso, el build avanza sin idas y vueltas.
Qué pedimos en el archivo de Figma
El diseño aprobado no basta: hace falta el sistema que lo sostiene. Si los colores viven sueltos en cada capa o los botones son copias duplicadas, cada pantalla cuesta el doble y el WordPress resultante pierde consistencia. Por eso validamos el handoff contra un criterio fijo, igual para una landing que para un sitio corporativo completo.
Checklist de entrega: 15 puntos
Estos son los puntos que revisamos uno por uno antes de aprobar el arranque del build.
| Punto | Criterio de entrega |
|---|---|
| 1. Variables de color | Tokens nombrados (primario, neutros, estados) aplicados en las capas; sin hex sueltos repartidos por el archivo. |
| 2. Variables de espaciado | Escala de 4/8 px coherente en padding, gap y márgenes de todos los frames del proyecto. |
| 3. Componentes base | Botones, inputs, cards y navegación como componentes reutilizables, no capas duplicadas por pantalla. |
| 4. Estados de componentes | Default, hover, focus, disabled y error documentados en cada componente interactivo del diseño. |
| 5. Variantes limpias | Solo variantes usadas en el diseño final; sin variantes huérfanas ni nombres ambiguos. |
| 6. Tipografía | Escala de títulos y párrafos con pesos y tamaños reales, no aproximaciones entre estilos sueltos. |
| 7. Iconos | Un solo set, mismo grid y mismo grosor de trazo en todo el proyecto. |
| 8. Imágenes y assets | Recortes finales exportados, peso acordado y texto alternativo sugerido por imagen. |
| 9. Breakpoints | Frames por breakpoint con los cambios de layout anotados, no solo redimensionados al vuelo. |
| 10. Grid y alineación | Columnas consistentes; nada alineado “a ojo” fuera del sistema definido. |
| 11. Contenido real | Copy final en las pantallas de entrega; sin lorem ipsum en el handoff. |
| 12. Notas de motion | Qué se mueve, con qué disparador, duración aproximada y tipo de easing. |
| 13. Accesibilidad | Contraste revisado y orden de foco pensado para navegación con teclado. |
| 14. Vacíos y errores | Empty states, estados de carga y mensajes de error de formularios presentes. |
| 15. Anotaciones de lógica | Comentarios en capa para todo lo que Figma no muestra: flujos, reglas y condiciones. |
Del handoff al build, sin relleno
Cuando el archivo pasa el checklist, entramos a la fase de desarrollo de Figma a WordPress: montamos el tema a medida, traducimos los componentes a bloques y dejamos el CMS listo para que tu equipo editorial cargue contenido sin romper el diseño. Si ya tienes tu propia estructura de trabajo, operamos como equipo white label de desarrollo web y el proyecto sale bajo tu marca, con nosotros detrás del código.
El mismo rigor aplica al motion: cada nota del checklist alimenta las animaciones con GSAP, no una improvisación a mitad del build. En zicua.com reunimos cómo trabajamos cada disciplina.
Lo importante
- Un archivo sin variables y sin estados obliga a reconstruir el sistema en código: pierdes días, no horas.
- Las notas de motion en Figma determinan si GSAP se integra limpio o se rehace en la recta final.
- El contenido real desde el inicio evita retoques de layout cuando ya todo está construido.
Preguntas frecuentes
¿Quién debe llenar este checklist?
Nosotros lo revisamos contigo en el handoff. Si el diseño viene de tu equipo, te devolvemos la lista marcada con lo que falta antes de aprobar el arranque.
¿Qué pasa si el diseño no trae breakpoints?
Los derivamos nosotros a partir del grid, pero te pedimos confirmación de qué bloques se apilan, cuáles se ocultan y qué cambia de orden en móvil. Adivinar breakpoints suele generar la ronda de correcciones más larga de todo el proyecto, porque cada pantalla móvil queda en discusión.
¿Sirve este checklist para proyectos white label?
Sí. Trabajamos así con agencias que entregan bajo su propia marca; el checklist es el punto de encuentro entre tu diseñador y nuestro equipo de desarrollo. Ambos lados hablan el mismo lenguaje desde el día uno y tú conservas la relación con tu cliente.
¿Cuánto demora pasar el checklist?
Un handoff bien armado se revisa en uno o dos días. Uno incompleto regresa a diseño, se reabren decisiones que parecían cerradas y el inicio del build se mueve una o dos semanas. Por eso lo hacemos antes, no durante el desarrollo.
¿Pueden animar si Figma no incluye notas de motion?
Sí, pero primero definimos un motion brief contigo: qué se anima, con qué disparador y con qué easing. Sin esa spec, la animación se convierte en opinión y no en requisito, y cada revisión vuelve a abrir el mismo debate.