De Figma a un correo: por qué exportar no funciona y qué hacer en su lugar

No se puede exportar un diseño de Figma a un correo terminado con un solo botón: Figma genera marcado con posicionamiento absoluto y CSS moderno, mientras que los clientes de correo exigen tablas y estilos en línea. A continuación, por qué es así y tres formas de llevar el diseño a una campaña que funcionan de verdad.

Por qué la exportación de Figma no sirve para correo

Figma se creó para interfaces que se abren en un navegador. El navegador entiende flexbox, grid, posicionamiento absoluto y hojas de estilo externas. Los clientes de correo no entienden casi nada de esa lista.

• el posicionamiento absoluto lo ignora la mayoría de los clientes de correo
• flexbox y grid no funcionan en el Outlook clásico
• las hojas de estilo externas se eliminan; los estilos deben ir en línea
• el anidamiento de capas de Figma no se corresponde con la estructura de tablas del correo
• las fuentes del diseño rara vez están disponibles en el correo y se sustituyen por las del sistema

El resultado de una exportación directa es previsible: correcto en el navegador y desarmado en la bandeja de entrada. Y se desarma peor justo donde están los suscriptores corporativos.

Método uno: maquetación manual a partir del diseño

La vía clásica. Alguien abre el archivo, toma medidas, colores y espaciados, y monta el correo sobre tablas desde cero. Da el máximo control y el mejor resultado, pero requiere un especialista y tiempo.

Un detalle que los diseñadores suelen olvidar: el diseño se dibuja normalmente para un ancho de escritorio de 600 o 640 píxeles, mientras que la mayoría de los correos se abren desde el teléfono. Según datos de Litmus, Apple Mail encabeza las aperturas y Gmail va detrás, y en ambos casos se trata sobre todo de pantallas móviles.

Por eso conviene dibujar el diseño en dos estados desde el principio: cómo se ve en pantalla ancha y cómo se reorganizan los bloques en una estrecha. De lo contrario las decisiones las tomará quien maquete, y no siempre como tú querías.

Método dos: rehacerlo en un constructor de bloques

En lugar de escribir código, el diseño se arma con bloques listos: cabecera, banner, texto, botón, productos, pie. Cada bloque ya es compatible con los clientes de correo, así que la tarea se reduce a elegir bloques según el diseño y ajustar colores y espaciados.

Es más rápido que maquetar a mano y no requiere saber HTML. La limitación es evidente: hay que adaptar el diseño al conjunto de bloques disponible en lugar de reproducirlo píxel a píxel. En la práctica rara vez es un problema, porque los correos se construyen con un repertorio limitado de patrones y un buen constructor los cubre.

Método tres: reconocimiento del diseño

Un enfoque más reciente: el constructor recibe una imagen o un enlace al diseño y deduce por sí mismo la estructura: dónde está la cabecera, el banner, el botón, las fichas de producto. Después arma el correo con sus propios bloques, rellenando los textos, colores e imágenes reconocidos.

No es copiar píxeles, sino interpretar la estructura. El resultado es un correo editable sobre bloques compatibles, no una imagen. La precisión depende de cuánto se parezca el diseño a un correo normal: las estructuras convencionales se reconocen bien, las experimentales peor.

• desde un enlace al diseño: más preciso, porque la estructura de capas está disponible
• desde una captura: funciona con cualquier imagen, incluido el correo de otra marca
• desde HTML existente: cuando el correo ya está maquetado y hay que editarlo

Qué revisar después de cualquier traslado

Elijas el método que elijas, conviene pasar el correo por una lista corta antes de enviarlo. Estos son los puntos que más se rompen al trasladar un diseño.

• ancho del correo: 600 píxeles es el estándar seguro
• el espaciado aplicado a las celdas de tabla, no a los bloques
• los botones clicables en toda su superficie, no solo en el texto
• texto alternativo relleno en todas las imágenes
• peso total por debajo de 102 kilobytes, o Gmail lo recortará
• las fuentes con alternativas del sistema

Cómo funciona en Mailvex

El constructor admite los tres escenarios: montaje manual con bloques, importación desde un enlace de Figma y reconocimiento a partir de una captura subida. El correo resultante se puede recolorear según tu manual de marca, de modo que los colores y las fuentes se apliquen solos en lugar de ajustarse a mano.

La salida es un correo editable sobre bloques compatibles y HTML limpio para cualquier plataforma de envío.

Preguntas frecuentes

¿Se puede lograr una coincidencia píxel a píxel con el diseño?

En la mayoría de los casos no, y es normal. Los clientes de correo renderizan fuentes y espaciados de forma distinta, así que el mismo correo siempre se ve algo diferente en cada bandeja. El objetivo del traslado es conservar la estructura, la jerarquía y el estilo de marca, no cuadrar píxeles.

¿Qué hago con las fuentes del diseño?

Ponerlas primero en la lista y añadir después alternativas del sistema. Algunos clientes cargarán la fuente personalizada y otros la sustituirán, y el correo debe verse digno en ambos casos.

¿Cómo manejo estructuras de varias columnas?

Limitarse a dos columnas y comprobar que se apilan bien en una sola en pantalla estrecha. Tres o más columnas se comportan de forma impredecible en correo, sobre todo en el nuevo Outlook, donde se han documentado problemas al apilar columnas.