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

Antes de empezar

Quién puede utilizar esta función

Disponible en todos los planes de pago

En Figma, una biblioteca es una colección de activos de diseño, como componentes, estilos y variables. Estos activos de diseño se encuentran en un único archivo, pero se pueden reutilizar en diferentes archivos o proyectos.

Las bibliotecas suelen utilizarse para compartir elementos de diseño comunes, como botones, iconos, partes de la interfaz de usuario, colores o valores para determinadas propiedades. Esto ayuda a mantener la coherencia y facilita la creación a partir de diseños existentes.

Cuando alguien cambia los activos de una biblioteca, los usuarios pueden revisar rápidamente los cambios y actualizar sus diseños de forma automática.

Ejemplo

Este es un ejemplo de cómo un equipo de diseño que trabaja en la aplicación ficticia Habitz podría usar las bibliotecas en Figma:

En un archivo, Kai crea componentes para diferentes partes de la aplicación, como la barra de navegación, el menú, la cabecera y otros elementos de la interfaz de usuario.
Publica los componentes finalizados como una biblioteca desde dentro del archivo.
Mientras trabaja en otro archivo del mismo proyecto, Timothy ve la biblioteca y añade algunos componentes al lienzo.
Un tiempo después, Kai actualiza uno de los componentes en el archivo donde se publicó la biblioteca.
En el resto de archivos que utilizan el componente, las personas que trabajan en el archivo reciben una notificación de que hay una actualización disponible. A continuación, podrán revisar el componente y aceptar la actualización cuando quieran. La actualización se aplicará a todas las instancias del componente que hayan usado.

¿Quieres saber más sobre Kai y el equipo de Habitz? Puedes seguir todo el proceso de lanzamiento de un sistema de diseño en el curso Introducción a los sistemas de diseño → de Figma

Crear componentes, estilos o variables para utilizarlos en una biblioteca

La finalidad de una biblioteca es compartir activos de diseño reutilizables con otras personas con las que trabajas. Estos activos pueden ser componentes, estilos o variables. Selecciona una pestaña para ver más información sobre cada uno de ellos.

Los componentes son la piedra angular de un diseño.

Pueden ser elementos individuales, como iconos o botones, o una colección de elementos, como menús y diseños.

Cuando se emplean bibliotecas, el archivo de biblioteca contiene el componente principal, que define las propiedades del componente para que todo el mundo pueda usarlo.

Cuando accedes a una biblioteca en tu archivo, puedes añadir una instancia del componente al lienzo. Esta instancia recibirá cualquier actualización realizada en el componente principal.

Aprende a crear componentes en tus diseños →

Los estilos definen una colección de propiedades o configuraciones que queremos reutilizar. Por ejemplo, se pueden usar estilos para hacer lo siguiente:

Capturar valores de color específicos para rellenos y trazos
Definir las propiedades del texto, como el tipo de letra, la altura de línea y el espaciado entre letras
Crear ajustes predeterminados para efectos de sombra y desenfoque
Crear estructuras de uso compartido en forma de filas, columnas y cuadrículas de diseño

Más información sobre la creación de estilos para colores, texto, efectos y cuadrículas de diseño →

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

Te permiten hacer lo siguiente, por ejemplo:

Crear tokens de diseño para mejorar la eficacia de la gestión de los sistemas de diseño
Cambiar un fotograma entre distintos tamaños de dispositivo y ver cómo se actualiza inmediatamente el espaciado según un sistema espacial definido
Previsualizar cómo afectan los distintos idiomas a un diseño
Crear un diseño de carrito de la compra totalmente funcional que calcule el total del pedido en función de los artículos que se hayan añadido
Construir un prototipo de cuestionario interactivo que utilice lógica condicional para mostrar si un usuario responde correcta o incorrectamente a una pregunta

Más información sobre las variables →

Publicar una biblioteca

Para poder acceder a los componentes, estilos o variables de otros archivos, antes debes publicarlos como biblioteca. Puedes elegir cuáles publicar y, en los planes Organization y Enterprise, quién puede acceder a ellos.

Si cambias un estilo, componente o variable publicado, Figma solo aplicará los cambios a las instancias del archivo actual. Si quieres que esos cambios se reflejen en tu biblioteca, tendrás que publicarlos también en ella.

Publicar estilos, componentes y variables en una biblioteca

Elegir qué bibliotecas utilizar en tus archivos

Puedes acceder a las bibliotecas publicadas en cualquier archivo borrador o de equipo en el que tengas acceso puede editar. Los administradores pueden establecer bibliotecas predeterminadas para un equipo u organización, lo cual las activa automáticamente en todos los archivos.

Utilizar activos de biblioteca en un archivo

Cuando hayas encontrado una biblioteca que quieras utilizar, puedes añadir cualquier componente, estilo o variable a tu archivo siguiendo las instrucciones de cada recurso:

Aceptar actualizaciones de una biblioteca en tus archivos

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

Cualquier persona con acceso puede editar en un archivo puede revisar, aceptar o ignorar los cambios.

Aceptar actualizaciones de una biblioteca

Gestionar una biblioteca

Los usuarios con acceso puede editar en un archivo de biblioteca pueden establecer permisos para este, anular la publicación de la biblioteca y mover activos entre archivos.

···