Guía sobre bibliotecas en Figma – Figma Learn - Centro de ayuda

Antes de comenzar

Quién puede usar esta función

Disponible en todos los planes pagos

En Figma, una biblioteca es una colección de recursos de diseño, como componentes, estilos y variables. Estos recursos se concentran en un archivo único, pero pueden reutilizarse en diversos archivos o proyectos.

Por lo general, las bibliotecas se utilizan para compartir elementos de diseño comunes, como botones, íconos, elementos de la interfaz de usuario, colores o valores para determinadas propiedades. De esta forma, se mantiene la uniformidad y se simplifica el desarrollo a partir de diseños existentes.

Cuando se modifican los recursos de una biblioteca, los usuarios pueden revisar rápidamente los cambios y actualizar automáticamente sus diseños.

Ejemplo

En este ejemplo, se muestra de qué manera un equipo de diseño que trabaja en la aplicación ficticia Habitz podría utilizar las bibliotecas de Figma:

En un archivo, Kai crea componentes para las distintas partes de la aplicación, como la barra de navegación, el menú, el encabezado y otros elementos de la interfaz de usuario.
Publica los componentes finalizados como biblioteca desde el interior del archivo.
Timothy, que trabaja en otro archivo del mismo proyecto, visualiza la biblioteca y agrega algunos componentes al lienzo.
Más tarde, Kai actualiza uno de los componentes del archivo en el que se publicó la biblioteca.
En los demás archivos que utilizan el componente, quienes trabajan en el archivo reciben la notificación sobre una actualización disponible para el componente. Podrán revisar el componente y aceptar la actualización cuando lo deseen. La actualización se aplicará a las instancias del componente que hayan utilizado.

¿Desea obtener más información sobre Kai y el equipo de Habitz? Consulte su recorrido hacia el lanzamiento de un sistema de diseño en este curso de Figma: Introducción a los sistemas de diseño →

Crear componentes, estilos o variables para usar en una biblioteca

El objetivo de una biblioteca es compartir recursos de diseño reutilizables con quienes trabaja. Estos recursos pueden ser componentes, estilos o variables. Seleccione una de las pestañas para obtener más información de cada uno.

Los componentes son los elementos básicos de un diseño.

Pueden ser elementos individuales, como íconos o botones, o una colección de elementos, como menús y formatos.

Cuando se utilizan las bibliotecas, el archivo de la biblioteca contiene el componente principal, que define las propiedades del componente para que todos lo utilicen.

Cuando accede a una biblioteca en su archivo, puede agregar una instancia del componente en el lienzo. Esta instancia recibirá las actualizaciones que se realicen en el componente principal.

Obtenga más información sobre cómo crear componentes en sus diseños →

Los estilos definen una colección de propiedades o ajustes que deseamos reutilizar. Por ejemplo, puede utilizar estilos para realizar lo siguiente:

Capturar valores de colores específicos para rellenos y trazos
Definir propiedades de texto, como la fuente, el interlineado y el espaciado entre letras
Establecer ajustes predeterminados para efectos de desenfoque y sombreado
Crear andamios para compartir en forma de filas, columnas y cuadrículas de diseño

Obtenga más información sobre cómo crear estilos con colores, texto, efectos y cuadrículas de diseño →

Las variables almacenan valores reutilizables que pueden aplicarse a propiedades de diseño de todo tipo.

Por ejemplo, se puede realizar lo siguiente:

Crear tokens de diseño para mejorar la eficiencia cuando se administran sistemas de diseño
Intercambiar un marco entre diferentes tamaños de dispositivos y ver de inmediato el espaciado actualizado de acuerdo con un sistema espacial definido
Obtener una vista previa de cómo los distintos idiomas afectan un diseño
Crear un diseño de carrito de pago totalmente funcional que calcule el total del pedido según los artículos agregados al carrito
Crear un prototipo de cuestionario interactivo que utilice la lógica condicional para mostrar si un usuario responde correcta o incorrectamente una pregunta

Obtenga más información sobre las variables →

Publicar una biblioteca

Antes de poder acceder a los componentes, estilos o variables de otros archivos, deberá publicarlos como una biblioteca. Puede seleccionar cuáles publicar y, en los planes Organización y Empresa, quiénes tendrán acceso.

Si modifica un estilo, componente o variable publicado, Figma solo aplicará los cambios a las instancias del archivo actual. Si desea que los cambios se reflejen en su biblioteca, también deberá publicar esos cambios en la biblioteca.

Publicar estilos, componentes y variables en una biblioteca

Seleccionar qué bibliotecas usar en sus archivos

Puede acceder a las bibliotecas publicadas en cualquier archivo del equipo o borrador en los que tenga privilegios de edición. Los administradores pueden establecer bibliotecas predeterminadas para un equipo u organización, lo cual los habilita automáticamente en cada archivo.

Usar los recursos de una biblioteca en un archivo

Cuando encuentra una biblioteca que desea usar, puede agregar componentes, estilos o variables a su archivo siguiendo las instrucciones para cada recurso:

Aceptar actualizaciones de una biblioteca en sus archivos

Cuando alguien publica una actualización de un componente principal, estilo o variable en una biblioteca, Figma deja la actualización disponible en todos los archivos donde se utiliza el componente, estilo o variable.

Cualquier persona con privilegios de edición en un archivo puede revisar y aceptar o ignorar los cambios.

Aceptar actualizaciones de una biblioteca

Administrar una biblioteca

Quienes tengan privilegios de edición en un archivo de biblioteca pueden configurar los permisos en el archivo, cancelar la publicación de la biblioteca y mover recursos entre archivos.

···