Corte de imágenes en Figma para cannoli
30 de enero de 2023
Si estás intentando crear un diseño de correo electrónico de Figma con muchas imágenes, tenemos un método que lo facilita con la ayuda de Cannoli.app.
En este Cannoli Bite, aprenderá cómo realizar una técnica llamada corte de imágenes y usarla para crear un diseño de correo electrónico de Figma personalizado en Cannoli.
Mira este corto videotutorial ¡o sigue la guía escrita a continuación para comenzar!
1. Cannoli
Si aún no te has registrado en Cannoli, puedes hacerlo dirigiéndote a cannoli.app También puedes utilizar el Plugin de Figma a HTML para Cannoli Para obtener una guía paso a paso sobre cómo configurar el complemento, consulte esta página .
2. Cortar las imágenes
Supongamos que tienes imágenes superpuestas o que quieres que el texto esté en una posición muy específica, pero el diseño automático no funciona como quieres. Aquí tienes una solución que puedes probar.
En primer lugar, las convenciones de nomenclatura son importantes en Cannoli, por lo que para que su diseño se convierta correctamente, asegúrese de hacer lo siguiente:
-
Nombra tu fila 'mj-section'
-
Nombra tu columna 'mj-column'
Desde aquí, comienza seleccionando tu composición.
Luego, agrega la composición a un grupo. Renómbrala mj-image y agrégala a mj-column y mj-section.
Esto se llama segmentación de imágenes y le permite utilizar diseños más complejos en sus correos electrónicos.
3. Convierte tu correo electrónico en código con Cannoli
Ahora tu correo electrónico está listo para enviarse.
Dirígete a cannoli.app y pega tu archivo Figma en Cannoli.
Si usas el plugin Cannoli en Figma, simplemente ejecútalo y copia el enlace a tu diseño. Debería aparecer una ventana. Haz clic en "Obtener código" y pega el enlace en "Pegar el enlace de Figma para sincronizar un marco desde este archivo" . Luego, haz clic en "Sincronizar".
¡Y ya está!
Cannoli convertirá automáticamente el correo electrónico en código. Puedes editar el código del correo electrónico en este punto, en el lado izquierdo de la pantalla, así que no olvides agregar el texto del preencabezado y los enlaces a las imágenes si es necesario.
Una vez que su correo electrónico se vea bien, puede copiar el código a su ESP.
Si necesita más ayuda o tiene preguntas, comuníquese con nosotros en hola@cannoli.app .
¿Quieres algunas plantillas de correo electrónico de Figma gratuitas?
Verificar esta página para algunas plantillas prediseñadas y consejos útiles sobre cómo usar Figma y Cannoli juntos.
