La pestaña Import de New Email te permite empezar a partir de código de email existente en lugar de crear cada Row y cada Column desde cero. Pega HTML o MJML, o elige un archivo, y revisa el código fuente antes de crear un frame de Emailify editable.

Import es experimental y, de momento, solo está disponible en versiones de desarrollo activadas localmente. Está oculta en la versión estándar del plugin. Los pasos siguientes se aplican cuando tu ventana New Email incluye Import.

Fuentes compatibles

• HTML: pega el HTML del email o elige un archivo .html o .htm.
• MJML XML: pega un documento <mjml> completo o elige un archivo .mjml o .xml.
• MJML JSON: pega un árbol de componentes MJML estándar o elige un archivo .json.
• Paquetes de email copiados: pega un paquete de la extensión experimental Copy to Emailify.

El contenido importado debe pesar menos de 2 MB. El MJML también debe compilarse a HTML sin superar ese límite. No se admiten mensajes .eml, archivos ZIP ni JSON arbitrario. Si tienes un mensaje .eml, extrae su cuerpo HTML y haz que sus imágenes sean accesibles antes de importarlo.

Usa URL de imágenes accesibles. Puede que tengas que sustituir por recursos alojados las imágenes que requieren iniciar sesión, los archivos locales y las referencias a adjuntos como cid:.

¿Buscas un email para probar? Entra en Really Good Emails, abre un email y selecciona Code para ver su código HTML. Copia el HTML, pégalo en el campo Email code de la pestaña Import de Emailify y haz clic en Preview Import para revisarlo antes de crear el email.

Importar un email

1. Abre Emailify en Figma.
2. Haz clic en el icono + que hay junto al selector de emails para abrir New Email.
3. Selecciona Import, al final de la fila de pestañas.
4. Pega el código de tu email en Email code y haz clic en Preview Import. También puedes hacer clic en Choose file para cargar y analizar un archivo compatible.
5. Revisa Preview y las Notes que aparezcan. Comprueba que el código fuente contiene el texto, las imágenes y los fondos que esperas.
6. Escribe un nombre en Email name y haz clic en Create Email.
7. Revisa el frame de Emailify creado y sus capas editables.
8. Usa la vista previa del HTML de Emailify para comprobar el resultado generado en escritorio y móvil antes de exportar.

El panel Import muestra una vista previa del email de origen. No muestra el HTML final que se exporta a partir de las capas de Emailify reconstruidas. Revisa siempre por separado el frame creado y la vista previa que genera Emailify.

Si editas el código fuente, se descarta la preparación anterior de la importación. Vuelve a hacer clic en Preview Import antes de crear el email actualizado.

Importar MJML

Proporciona un único documento MJML completo con un solo mj-body. Por ejemplo:

<mjml>
  <mj-body width="600px">
    <mj-section>
      <mj-column>
        <mj-text>Hello from Emailify</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

El JSON equivalente usa tagName, attributes, children y content:

{
  "tagName": "mjml",
  "children": [{
    "tagName": "mj-body",
    "attributes": { "width": "600px" },
    "children": [{
      "tagName": "mj-section",
      "children": [{
        "tagName": "mj-column",
        "children": [{ "tagName": "mj-text", "content": "Hello from Emailify" }]
      }]
    }]
  }]
}

Emailify valida el MJML con MJML4, lo renderiza a HTML y después reconstruye capas editables a partir de ese HTML. No es una restauración directa del árbol de componentes MJML original. Revisa el CSS personalizado, las fuentes, el espaciado y el comportamiento responsive después de importar.

• Inserta el contenido de mj-include directamente antes de importar; los archivos incluidos no se cargan.
• Sustituye mj-raw por componentes MJML editables, o importa su HTML renderizado para revisarlo.
• Usa una versión estática de los acordeones y carruseles de MJML; los componentes interactivos no se admiten como importaciones editables.
• Elimina las declaraciones DOCTYPE y de entidades XML. Corrige la estructura o los atributos de componentes no válidos antes de volver a intentarlo.

Comprobar el resultado

Compara el email creado con el original en escritorio y en un ancho de móvil estrecho, como 375px. Revisa todos los textos, imágenes, imágenes de fondo, botones y destinos de los enlaces y, después, comprueba el apilado de columnas, los saltos de línea y el padding.

Import intenta adaptar el código fuente a la estructura de diseño que admite Emailify. Los anidamientos complejos, el CSS personalizado y los recursos no disponibles pueden requerir ajustes manuales. Que la preparación del código fuente funcione no garantiza una coincidencia visual exacta ni el comportamiento en la entrega en todos los clientes de email.

Si la preparación falla, abre Notes para ver el problema detectado. Corrige el código fuente o sustituye los recursos inaccesibles y vuelve a previsualizar. Si el diseño creado necesita ajustes, usa Rows, Columns y los ajustes responsive, y sigue la guía de pruebas de emails.