Cómo instalar y usar el complemento Cannoli para Figma

Este blog describe cómo usar Cannoli, una de las plataformas de software de Scalero. Para ver una descripción completa en video, consulte nuestro Bocados de cannoli en YouTube .

¿Estás buscando el mejor complemento de Figma a HTML?

Cannoli.app es uno de los mejores complementos de Figma que existen para convertir sus hermosos diseños de correo electrónico de Figma en código preciso y editable.

Para aprender a instalar y utilizar el complemento, mire este breve tutorial o siga las instrucciones escritas a continuación.

Sincronizar un archivo en Cannoli usando el complemento

1. Añadiendo el plugin Cannoli.
   Comience por dirigirse a la Página del complemento Cannoli en Figma y haga clic en Probarlo .
   
   

2. Ejecutando el complemento Cannoli.
   • Desde aquí, abra su plantilla de correo electrónico de Figma y haga clic en el ícono Recursos en la barra de navegación.
   • El complemento Cannoli debería aparecer en Recientes, pero si no, utiliza la barra de búsqueda.
   • Haga clic en Ejecutar .
   
   

3. Conectando Figma con la aplicación Cannoli.
   • Si es la primera vez que utilizas el complemento, tendrás que conectar tu cuenta de Figma a él.
   • Después de presionar Ejecutar , aparecerá una pequeña ventana.
   • Haga clic en Obtener código en la barra de navegación de esta nueva ventana y luego presione Conectar .
   • Desde aquí, se abrirá una nueva ventana en Cannoli que te pedirá que conectes tus cuentas de Figma y Cannoli, así que elige Conectar cuentas .
   Por último, se te pedirá que le des a Cannoli acceso a tu cuenta de Figma. Haz clic en "Permitir acceso" .
   • Luego debería ver la pantalla a continuación que le informará que sus cuentas de Figma y Cannoli se han emparejado exitosamente.
   • ¡Presione Atrás para volver al complemento Cannoli para comenzar a codificar!
   
   

4. Copiando el archivo Figma.
   Una vez listo, selecciona el marco de diseño de tu correo electrónico, añade el texto de vista previa y copia el enlace a tu archivo de Figma haciendo clic en "Compartir" en la barra de navegación y en "Copiar enlace" en la ventana emergente. Solo tendrás que hacerlo una vez por archivo de Figma.
   
   

5. Sincronizando el archivo Figma.
   • Una vez que hayas copiado el enlace, pégalo en Pegar el enlace de Figma para sincronizar un cuadro desde este archivo .

   • Luego haga clic en Sincronizar .
   
   

6. Codificando el correo electrónico.
   • Cannoli hará su magia y convertirá tu plantilla de correo electrónico de Figma en HTML en unos momentos, con el diseño a la derecha de tu pantalla y el código a la izquierda.
   • Desde aquí, puedes resaltar todo el código y pegarlo en tu ESP (proveedor de servicios de correo electrónico).

Si tiene alguna pregunta o comentario, no dude en comunicarse con nosotros en hola@cannoli.app .

Para acceder a algunas plantillas de correo electrónico gratuitas de Figma y más consejos sobre cómo usar Figma y Cannoli juntos, haga clic en aquí .