Todos los elementos que añades a Figma desde el plugin Emailify se añaden automáticamente como componentes nativos de Figma, cuyo estilo y contenido puedes personalizar. Además, puedes acceder a cualquier componente de Emailify de tu archivo de Figma actual directamente desde el plugin, haciendo clic en el botón con el icono Library de la fila de pestañas de la cabecera.

¿Emailify solo carga componentes del archivo de Figma actual?

Sí. La pestaña Library carga los componentes de Emailify del archivo de Figma que tienes abierto.

Si alguien de tu equipo abre otro archivo, Emailify solo mostrará los componentes de Emailify que ya existan en ese archivo. Después de añadir o actualizar componentes en el archivo actual, haz clic en Load all Emailify Components from this Figma file o usa Refresh para volver a analizar el archivo.

Añadir componentes desde la pestaña de la biblioteca de componentes

Tutorial en vídeo: crear una biblioteca de componentes para diseños de email HTML en Figma

En este vídeo verás cómo diseñar una biblioteca de componentes de Figma para emails HTML con el plugin Emailify para Figma.

Al hacer clic en Load all Emailify Components from this Figma file, el plugin busca los componentes de Figma de Emailify de tu archivo y carga sus vistas previas. Al hacer clic en cualquier componente en el plugin, se añade automáticamente al frame de Emailify seleccionado, igual que en cualquier otra categoría.

Si has añadido componentes nuevos a tu archivo de Figma después de cargar los iniciales, puedes hacer clic en el botón con el icono Refresh del plugin, que vuelve a buscar componentes de Emailify en el archivo de Figma y los incluye en la lista.

Organizar tu biblioteca de componentes con categorías personalizadas

Categorías en vídeo: añadir categorías personalizadas para componentes de email de Figma

En este vídeo verás cómo añadir categorías personalizadas para componentes de email de Figma con el plugin Emailify para Figma.

De forma predeterminada, todos tus componentes de Figma estarán en Uncategorized (sin categoría), pero puedes crear tus propias categorías personalizadas haciendo clic en el botón con el icono Pencil de la fila de pestañas de la subcabecera de la biblioteca de componentes.

Así puedes crear categorías personalizadas nuevas y mover componentes de cualquier categoría existente a cualquier otra que hayas añadido.

También puedes eliminar una categoría personalizada en cualquier momento. Esto no borra ninguno de tus componentes de Figma, sino que devuelve automáticamente los componentes que había en esa categoría a la categoría Uncategorized.

Buscar y ordenar tu biblioteca de componentes

Para encontrar rápidamente un componente de Figma personalizado en la pestaña de la biblioteca de componentes, puedes usar el campo Search y filtrar la lista por el nombre de capa de cualquier componente de Figma.

También puedes ordenar la lista de componentes con cualquiera de estas opciones:

Sort by Figma Layer Age

• Newest to Oldest ↓
• Oldest to Newest ↑

Sort by Figma Layer Name

• Figma Layer Name ↓
• Figma Layer Name ↑

Sort by Figma Layer Order

• Figma Layer Order ↓
• Figma Layer Order ↑

Sort Visually (Rows)

• Visually Top to Bottom ↓
• Visually Bottom to Top ↑

Sort Visually (Columns)

• Visually Left to Right →
• Visually Right to Left ←

La ordenación visual agrupa en la misma fila o columna los componentes que están ligeramente desalineados. La ordenación por nombre de capa tiene en cuenta los números, así que nombres como Hero 2 aparecen antes que Hero 10.

Añadir metadatos a tus componentes de Figma

Puedes añadir metadatos a tus componentes de Figma haciendo clic en la capa del componente en Figma y, después, en el botón con el icono Component configuration de la columna derecha de Figma, junto al nombre del componente. Ahí puedes escribir un texto en How to use this component y una URL en Link to documentation.

Si alguno de tus componentes de Emailify tiene estos datos, su etiqueta en la pestaña de la biblioteca de componentes enlazará automáticamente a la URL de tu documentación, y la descripción de cómo usar el componente aparecerá en la información emergente al pasar el cursor por encima de la miniatura.