Estilos y librerías compartidas en Figma

Curso de Figma: Técnicas Avanzadas de Diseño

Contenido del curso

Cómo iniciar los proyectos en Figma

Diseño Responsive y Técnicas Avanzadas

Crea componentes avanzados

Variables en Figma

Inteligencia Artificial para Figma

Crear Landing Pages con Figma

Interacción Avanzada con Prototipos

Prototipado avanzado con Figma

Cómo trabajar con los equipos de desarrollo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:24

Estilos y librerías compartidas en Figma

Curso de Figma: Técnicas Avanzadas de Diseño

Clase 3 de 29

Clase 3 / 29

Recursos

Trabajar con estilos en Figma te permite crear paletas de colores, tipografías, sombras y espaciados reutilizables que se actualizan en cascada cuando cambias una variable. Esta guía es para diseñadores que quieren escalar sus sistemas de diseño usando estilos globales y librerías compartidas, incluso si no tienen cuenta pro.

¿Dónde se gestionan los estilos globales en Figma?

Los estilos globales viven en la barra lateral derecha del canvas, y solo aparecen cuando no tienes ningún elemento seleccionado. Es el primer truco que conviene memorizar.

Si seleccionas una paleta de colores o un frame, la barra cambia y muestra propiedades específicas de ese elemento. Pero si haces clic en un área vacía del canvas, Figma despliega todos los estilos disponibles a nivel de archivo: colores, textos, efectos y rejillas [01:30].

¿Qué son los estilos a nivel de archivo en Figma? Son variables de color, texto o efectos guardadas dentro de un archivo, accesibles desde cualquier elemento de ese archivo y reutilizables como si fueran componentes.

¿Cómo creo y organizo un estilo de color en Figma?

Para crear un estilo nuevo, eliges un color desde el panel hexadecimal y haces clic en los cuatro puntitos junto a la propiedad. Pulsas el botón + y le pones nombre.

La magia está en cómo nombras: si escribes brand/success, Figma interpreta el slash como una jerarquía y crea automáticamente una carpeta llamada brand con el estilo success dentro [02:45]. Esta nomenclatura es clave para mantener orden cuando tu sistema crece.

¿Puedo mover estilos entre carpetas o archivos?

Sí, y de dos formas distintas:

Arrastrando el estilo con drag and drop hacia otra carpeta dentro del mismo archivo.
Usando cut style con clic derecho, abriendo un archivo nuevo y haciendo paste here. La jerarquía de carpetas se respeta intacta.

Una vez pegado el estilo en otro archivo, queda disponible como variable. Si pintas un frame con ese color y luego decides cambiar el hexadecimal desde el panel de estilos, todos los elementos que usen esa variable se actualizan automáticamente [04:10]. Es la lógica de los componentes aplicada al color.

¿Cómo publico una librería compartida en Figma?

Una librería compartida convierte tus estilos y componentes en recursos disponibles para todo el equipo, no solo para un archivo. Aquí es donde Figma se vuelve potente para sistemas de diseño.

Para publicarla, ve al panel de assets o accede desde el icono de team library. También puedes entrar por el menú principal: file, view, text, arrange, vector y dentro de libraries [05:30]. Verás el nombre del archivo y un CTA que dice publish.

Al pulsar publicar, Figma te muestra todos los componentes y estilos creados. Puedes:

Deschequear los que no quieras incluir en la librería.
Añadir un punto y un slash antes del nombre del componente para excluirlo, como un gitignore en desarrollo.
Escribir una nota de versión, por ejemplo primera versión de nuestra librería, que queda guardada como punto de referencia.

¿Qué pasa si cambio un color en una librería ya publicada? El cambio se replica en todos los archivos donde esa librería esté attachada. Si tu botón primario era azul y lo pasas a verde, todos los botones que usan esa variable cambian sin que toques cada archivo.

¿Cómo evito que alguien rompa la librería compartida?

Figma permite controlar permisos desde los settings, así que decides quién puede editar la librería y quién solo consumirla. No tengas miedo de compartir: la gobernanza está cubierta.

Esta lógica de variables centralizadas es lo que permite escalar un sistema de diseño sin caos. Cambias el color de marca una vez y la marca cambia en todos los productos donde esa librería vive.

¿Y si no tengo cuenta pro de Figma?

Aunque las librerías compartidas son una funcionalidad pro, puedes usar el truco de cut style y paste here entre archivos para mover estilos manualmente. No es tan automático, pero te da una base de consistencia entre proyectos [03:50].

En la próxima sesión vas a iterar la card que ya construimos y crear sus variantes para tener un componente mucho más complejo. ¿Tú cómo organizas tu nomenclatura de estilos en Figma? Cuéntamelo en los comentarios.

Carolina Gómez

Hace un año

Uso de estilos compartidos sin cuenta Pro:

Aunque no tengas Figma Pro, puedes simular una librería compartida creando un archivo con todos tus estilos y copiándolos manualmente a otros archivos.

Estilos que puedes guardar:

Paletas de colores
Colores de marca
Estilos de texto
Íconos
Sombras
Espaciados

Estos se guardan a nivel de archivo y puedes reutilizarlos en diferentes diseños.

Cómo crear estilos:

Selecciona un color, sombra, texto, etc.
Haz clic en el ícono de los cuatro puntitos ••••, luego en el botón "+" para guardar como estilo.
Puedes organizar estilos en carpetas usando nombres jerárquicos como Marca/Primario.

Reutilización y actualización:

Si cambias un estilo guardado (ej. un color), todos los elementos que lo usan se actualizan automáticamente.
Esto permite mantener consistencia visual y facilita cambios globales.

Simulación de librerías:

Puedes copiar y pegar componentes/estilos entre archivos para mantener coherencia.
También puedes hacer esto:
1. Crear un archivo base con todos tus estilos/componentes.
2. Copiar y pegar desde ahí a nuevos archivos.

Librerías oficiales (si tienes Pro o en equipo):

Publica componentes desde el panel de "Assets" usando la opción "Publish".Puedes seleccionar qué incluir o excluir.
Para excluir algo, ponle un ./ al inicio del nombre del componente.Las librerías se pueden actualizar y sincronizar con otros archivos: si algo cambia, se actualiza en todos los archivos que usan esa librería.

Control de acceso:

Puedes configurar quién puede modificar una librería desde los ajustes de Figma.

Comentarios (17)17 comentarios

Andres Arias

Hace 3 años

Edgar Antonio Hez

Ludvin Gutierrez

Ariel Hernán Contini

Luis Antonio Vargas Avila

Hace 2 años

Lucas Germán Burgos

Yusting Andrés Mora González

Alejandro Pardo

Carmen Ansio

Profesor

Pedro Isaac Aguilar

Marcos Ivan Cama Diaz

Dahiana Porto

Joel Subiabre Aravena

Angélica Echeverry

Jessica García

Jonathan Steep

Andrés Maximiliano Torres Hernández

Jesus Briceño

Arturo Guerrero

Miguel Alejandro Camacho Sánchez

Cómo iniciar los proyectos en Figma

Diseño responsivo en Figma con Atomic Design

Cómo construir una card con Atomic Design

Estilos y librerías compartidas en Figma

Diseño Responsive y Técnicas Avanzadas

Cómo crear una grid de 12 columnas en Figma

Constraints en Figma para diseño responsive

Menú responsive con Auto Layout y constraints

Wrap y min/max width en Figma Auto Layout

Cómo usar el design system en Figma

Ensamblando una interfaz mobile en Figma

Breakpoints y Responsively para probar diseño responsive

Crea componentes avanzados

Componentes y variantes en Figma con Atomic Design

Propiedades de Componentes en Figma para Diseños Flexibles

Copies dinámicos en Figma con Google Sheets

Variables en Figma

Variables en Figma: Creación y uso para diseño eficiente

Traducciones automáticas en Figma con variables

Inteligencia Artificial para Figma

Genera iconos, copies e imágenes con Magician

Muse y Builder contra la página en blanco

Crear Landing Pages con Figma

Crea briefings y sitemaps con IA en Figma

Paleta de Colores Corporativos para Banco Transfer

Wireframes de landing page en tres secciones

Landing page responsive con Auto Layout en Figma

Interacción Avanzada con Prototipos

Creación de Microinteracciones en Figma: Guía Paso a Paso

Microinteracciones con variantes en Figma

Prototipado de Navegación en Figma: Interacciones y Animaciones

Prototipado avanzado con Figma

Cómo dar y recibir feedback constructivo en proyectos de diseño

Diseño Web Responsive con Figma y Atomic Design

Documentación de Diseño en Figma: Elementos y Plugins Esenciales

Cómo trabajar con los equipos de desarrollo

Dev Mode de Figma para desarrolladores

Figma dentro de Visual Studio Code

Estilos y librerías compartidas en Figma