Un diseño de Figma se integra fielmente en WordPress cuando llega con cuatro cosas: la versión móvil de las pantallas, estilos y componentes con nombre, los contenidos reales y la lista de lo que el cliente modificará por sí mismo. Sin ellas, el desarrollador adivina, y ahí es donde la web se aleja del diseño.
Esta guía es para diseñadores, agencias y empresas que ya tienen un diseño y buscan a alguien que lo convierta en web. Recoge lo que hay que preparar y lo que cada olvido cuesta en idas y vueltas.
La lista que preparar antes de la integración.
| Entregar | Por qué | Si falta |
|---|---|---|
| Versión móvil de las pantallas clave | La mayoría de las visitas llegan desde el móvil | El desarrollador inventa la versión móvil |
| Estilos de texto y colores con nombre | Se convierten en los ajustes globales de la web | Decenas de tamaños parecidos, difíciles de mantener |
| Componentes reutilizables | Tarjetas, botones y bloques se reutilizan sin redibujarlos | Cada página se integra como un caso único |
| Contenidos reales | Los textos reales casi nunca miden lo que el texto de relleno | Maquetaciones que se rompen al publicar |
| Estados interactivos | Hover, errores de formulario, menú abierto | Comportamientos decididos al azar |
| Fuentes con licencia web | Una fuente comprada para impresión no siempre cubre la web | Fuente sustituida a última hora |
| Lista de contenidos editables | Determina cómo se construyen las páginas en WordPress | Una web bonita que nadie se atreve a tocar |
La versión móvil no es opcional.
Es el olvido más frecuente: un diseño cuidado al detalle en pantalla grande y nada para el teléfono. Sin embargo, es la versión que verán la mayoría de los visitantes. Sin pantalla móvil, el desarrollador decide solo el orden de los bloques, el tamaño de los títulos y el lugar del menú.
No hace falta dibujar cada página en tres tamaños. Bastan las pantallas clave, la portada, una página tipo y el formulario, siempre que los componentes estén pensados para adaptarse.
Estilos y componentes: lo que hace la web mantenible.
En Figma, un diseño bien preparado da nombre a sus estilos de texto, colores y componentes. En la integración, esos nombres se convierten en los ajustes globales de la web: cambiar el color principal o el tamaño de los títulos se hace en un solo lugar, para toda la web.
El modo Dev de Figma facilita el trabajo del desarrollador al mostrar medidas, colores y espacios. No sustituye a una estructura clara: un archivo en el que cada botón está dibujado de forma distinta sigue siendo largo de integrar, por bien que se inspeccione.
Decidir qué modificará el cliente por sí mismo.
Es la pregunta que más cambia la forma de integrar. Un texto de portada que nunca cambiará puede fijarse. Una lista de servicios, noticias o fichas de producto deben editarse fácilmente desde el panel, sin tocar la maquetación.
- Páginas tipo: artículo, servicio, proyecto. Se construyen una vez y después se rellenan.
- Bloques reutilizables: testimonios, cifras clave, llamadas a la acción, que se insertan donde se quiera.
- Zonas bloqueadas: cabecera, pie de página, elementos que solo cambia el desarrollador.
¿Elementor o el editor de bloques?
Ambos permiten una integración fiel. Elementor da al cliente mucha libertad de maquetación; el editor de bloques nativo de WordPress produce páginas más ligeras y más guiadas. La elección depende sobre todo de lo que el cliente quiera cambiar por su cuenta.
Rendimiento y SEO también se deciden en el diseño.
Un vídeo a pantalla completa en la portada, animaciones en cada desplazamiento o imágenes enormes son decisiones de diseño que pesan en la velocidad. Detectarlas antes de integrar permite prever alternativas: imagen fija en móvil, formatos modernos, carga diferida.
En cuanto al SEO, el diseño debe mostrar un solo título principal por página y una jerarquía lógica de subtítulos. Si la web sustituye a otra existente, el plan de URL y redirecciones se prepara al mismo tiempo: consulta cuándo y cómo rehacer una web.
Diseños integrados en proyectos reales.
Un ejemplo real
He integrado en WordPress los diseños de Homa Games, del Mediador de EDF, de Ridemaster y de Yespark. En cada caso, el tiempo ganado se debía menos a la herramienta que a la preparación del archivo: componentes con nombre y pantallas móviles entregadas desde el principio.
Para integrar tu diseño, consulta la página integración de diseños Figma y Adobe XD en WordPress.
FAQ — Integrar un diseño en WordPress.
¿Se puede integrar un diseño de Adobe XD igual que uno de Figma?
Sí. El principio es el mismo: pantallas, estilos, componentes y contenidos. El desarrollador solo necesita acceso al archivo o un enlace compartido con las medidas y los recursos exportables.
¿Hay que diseñar todas las páginas en versión móvil?
No. Bastan las pantallas clave, como la portada, una página tipo y el formulario, siempre que los componentes estén pensados para adaptarse. El desarrollador deriva después las demás páginas de esos modelos.
¿Podrá el cliente modificar la web después?
Sí, si se ha previsto. Por eso la lista de contenidos editables debe decidirse antes de integrar: determina cómo se construyen las páginas en WordPress.
Fuentes.
- Figma — Guía del modo Dev (en inglés) — inspección de un diseño para integrarlo
- WordPress — Manual del editor de bloques (en inglés) — construcción de páginas y bloques
- web.dev — Imágenes adaptables (en inglés) — peso de las imágenes y rendimiento
