---
url: "/es/emailify/design/import.md"
description: "Usa la pestaña experimental Import de Emailify para convertir HTML o MJML existente en capas de email editables en Figma."
---

# Importar emails HTML y MJML

> Usa la pestaña experimental Import de Emailify para convertir HTML o MJML existente en capas de email editables en Figma.

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.

> **Note:** 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 {#supported-sources}

- **HTML:** pega el HTML del email o elige un archivo `.html` o `.htm`.
- **MJML XML:** pega un documento `` 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:`.

> **Tip:** ¿Buscas un email para probar? Entra en [Really Good Emails](https://reallygoodemails.com/), 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 {#import-an-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](/es/emailify/design/preview) para comprobar el resultado generado en escritorio y móvil antes de exportar.

> **Warning:** 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 {#import-mjml}

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

```xml

        Hello from Emailify

```

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

```json
{
  "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 {#check-the-result}

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](/es/emailify/design/rows), [Columns](/es/emailify/design/columns) y los [ajustes responsive](/es/emailify/design/responsive), y sigue la [guía de pruebas de emails](/es/emailify/export/testing).