Para explorar los componentes disponibles en el plugin Emailify, haz clic en cualquiera de las pestañas de categoría que hay debajo de la barra de cabecera del plugin. Cada pestaña muestra los componentes de esa categoría, y puedes desplazarte arriba y abajo para ver las subcategorías de la pestaña seleccionada.
Para reordenar una fila añadida desde los componentes predefinidos, haz clic en ella y arrástrala hacia arriba o hacia abajo dentro del frame contenedor de Emailify (que tiene Auto Layout activado) para cambiar su posición.
Explorar la biblioteca de componentes externa
Tutorial en vídeo: usar más de 500 componentes de email HTML gratis en tus diseños de Figma
En este vídeo verás cómo usar más de 500 componentes de email HTML gratis en tus diseños de Figma con el plugin Emailify para Figma.
Además de los componentes integrados en el plugin Emailify, puedes explorar y usar componentes de bibliotecas externas a través de la app web de Emailify. Así tienes acceso a una gama más amplia de componentes de email ya creados que puedes copiar directamente en tus diseños de Figma.
Para usar componentes de la biblioteca externa:
- Entra en la app web de Emailify para explorar el catálogo completo de componentes de email disponibles.
- Filtra los componentes por categoría o por uso en plantillas, o busca elementos concretos.
- Haz clic en el botón Copy Figma Component de cualquier componente para copiar su fragmento HTML al portapapeles.
- En Figma, selecciona el frame de Emailify en el que quieres pegar el componente.
- Pega el componente directamente en el frame de Emailify con Cmd+V (Mac) o Ctrl+V (Windows).
El componente pegado se integra automáticamente en tu diseño de email y puedes personalizarlo como cualquier otro componente de Emailify.
Los componentes externos usan la estructura de Auto Layout de Emailify. Arrastra un componente hacia arriba o hacia abajo dentro del frame contenedor de Emailify para reordenarlo.
Categorías de componentes iniciales
Emailify organiza los componentes en varias categorías (y subcategorías) para que te resulte más fácil encontrar lo que necesitas para tu diseño de email.
Headers (cabeceras)
Se suelen usar en la parte superior del email; pueden ser componentes como el logotipo de la marca, enlaces para "ver online", un menú de navegación, iconos sociales, etc.
Images (imágenes)
Son componentes para mostrar contenido de imagen; pueden ser componentes como una imagen de ancho completo, una imagen de fondo (para poner texto encima), una cuadrícula de logotipos, tarjetas de imagen, cuadrículas y pies de foto.
Content (contenido)
Incluye componentes de texto como párrafos, citas, testimonios, avatares de autor, tarjetas de artículos, iconos de características, estadísticas, códigos promocionales y fichas de producto.
Ecomm (comercio electrónico)
Ofrece algunos componentes habituales para mostrar productos o elementos relacionados con un email posterior a la compra, e incluye también algunos componentes específicos de Klaviyo para mostrar cuadrículas de productos dinámicas en esa plataforma.
CTAs (llamadas a la acción)
Estos componentes sirven sobre todo para pedir al usuario que haga clic en algo o que realice una acción; pueden ser componentes como botones, enlaces, bloques hero con imagen de fondo, miniaturas de vídeo, bloques de características, botones de tiendas de apps, iconos de redes sociales y bloques hero de producto.
Footer (pie)
Se suelen usar en la parte inferior del email; pueden ser componentes para mostrar el logotipo y la dirección de tu marca, enlaces a redes sociales, enlaces para darse de baja o botones de descarga de apps.
Los componentes que añades desde otra categoría se guardan automáticamente como "favoritos" en la categoría Favourites, para que te resulte fácil volver a usarlos más adelante. También puedes quitar cualquier componente de tus favoritos haciendo clic en el icono Trash; así se quita de tu lista de favoritos, pero no se "elimina" de las demás categorías.