---
url: "/es/emailify/design/library.md"
description: "Carga, organiza y busca componentes de Emailify de tu biblioteca de Figma."
---

# Crear una biblioteca de componentes reutilizables

> Carga, organiza y busca componentes de Emailify de tu biblioteca de Figma.

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? {#does-emailify-load-components-from-the-current-figma-file-only}

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 {#adding-components-from-your-component-library-tab}

### 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.
[Embedded media](https://www.youtube-nocookie.com/embed/lQb9-_9maxs)

[Video](/assets/videos/emailify/load-component-library.mp4)

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 {#organizing-your-component-library-with-custom-categories}

### 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.
[Embedded media](https://www.youtube-nocookie.com/embed/M6p5AY2-g54)

[Video](/assets/videos/emailify/create-custom-categories.mp4)

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 {#searching-and-sorting-your-component-library}

[Video](/assets/videos/emailify/search-and-sort-components.mp4)

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 {#adding-metadata-to-your-figma-components}

[Video](/assets/videos/emailify/figma-component-metadata.mp4)

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.