Cómo publicar tu librería de Figma

Curso Práctico de Sistemas de Diseño con Figma

Contenido del curso

Visión general de los Sistemas de Diseño

Guía de Estilos con Figma

Librería de componentes

Implementación y medición

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:21

Cómo publicar tu librería de Figma

Curso Práctico de Sistemas de Diseño con Figma

Clase 22 de 26

Clase 22 / 26

Recursos

Publicar una librería de componentes en Figma te permite compartir botones, cards, headers y heros con todo tu equipo de diseño, manteniendo un design system consistente. Aquí verás el proceso completo: desde el upgrade de cuenta hasta la verificación de que tus componentes funcionan en un archivo nuevo.

¿Por qué necesitas un plan pago para publicar componentes en Figma?

La versión gratuita de Figma sí te permite publicar tokens (estilos de color, tipografía, efectos), pero no te deja compartir componentes entre archivos. Si trabajas sola o solo, puedes copiar y pegar entre proyectos sin problema. El cambio llega cuando colaboras con un equipo y necesitas que todos consuman los mismos componentes desde una librería central.

¿Es obligatorio pagar Figma para usar componentes? No. Puedes crear y usar componentes dentro de un mismo archivo gratis. Solo necesitas el plan pago si quieres publicarlos como librería compartida para varios proyectos o personas.

¿Cómo se hace el upgrade del plan en Figma?

Desde el ícono del librito, Figma te avisa que necesitas actualizar para publicar componentes. Al darle upgrade, te lleva a una pantalla donde confirmas:

El nombre del proyecto que quieres habilitar (en este caso, Design System).
La cuenta asociada al pago.
El costo mensual o anual del plan.
Los datos de la tarjeta de crédito y dirección de facturación.

Una vez confirmado el pago, Figma muestra un resumen con el plan activo y ya puedes regresar al archivo a publicar tu librería.

¿Cómo publicar componentes en una librería de Figma?

Con el plan activo, vuelves al archivo donde tienes tus componentes y das clic en el ícono de librito. Figma te muestra una lista con todo lo que está listo para publicar y, si hay algún problema, te avisa con un aviso de componente inválido.

En la práctica, suele aparecer un conflicto en las variants del botón. Por ejemplo, el sistema detecta que dos variantes tienen la misma combinación de propiedades (como size, style y state) y por eso marca el componente como inválido.

¿Qué hacer si Figma marca un componente como inválido?

La solución es revisar variante por variante y confirmar que cada una tenga una combinación única de propiedades. En el caso del botón, la matriz correcta combina:

Size: large, medium, small.
Style: filled, outline.
State: active, hover.

Al recorrer cada botón y ajustar las propiedades que estaban repetidas (por ejemplo, una variante marcada como medium, filled, active cuando debía ser medium, outline, active), el conflicto desaparece.

¿Por qué Figma dice que un componente está inválido? Porque dos o más variants dentro del mismo set tienen exactamente la misma combinación de propiedades. Cada variante debe ser única.

Una vez corregidas las variantes, vuelves al librito, le das publicar y Figma confirma que botón, card, header y hero se publicaron exitosamente.

¿Cómo usar una librería publicada en un nuevo archivo de Figma?

La prueba real de que la publicación funcionó es abrir un archivo nuevo y consumir los componentes desde ahí. El flujo es directo:

Crea un archivo nuevo dentro del team project.
Inserta un frame (por ejemplo, iPad mini).
Abre el panel de assets y entra al ícono del librito.
Habilita la librería que acabas de publicar con el check.

Al hacerlo, todos los componentes aparecen disponibles en el panel de assets, listos para arrastrar al canvas. Ya no necesitas reconstruir nada: el botón, la card, el header y el hero funcionan tal como los diseñaste en el archivo original.

¿Qué ganas al tener una librería de componentes publicada?

La ventaja principal es que dejas de gastar energía en decisiones de bajo nivel: qué color usar, qué borde, qué tamaño de tipografía. Ese trabajo ya está resuelto en los componentes. Tu enfoque se mueve hacia lo que realmente mueve la aguja del producto.

Piensa en un design sprint de una semana: tienes tiempo limitado para hacer research, definir el problema, prototipar y probar con usuarios. Si ya cuentas con la librería publicada, el prototipado se reduce a arrastrar componentes y armar pantallas. Si la prueba con usuarios no funciona, iteras rápido sin reconstruir nada.

Y aquí viene lo interesante: este es el momento en que un design system deja de ser un archivo bonito y se convierte en una herramienta de velocidad para todo el equipo.

Reto: diseña una página completa con tus componentes publicados

Ahora que tienes la librería lista, el siguiente paso es ponerla a trabajar. Toma tu tiempo, abre un archivo nuevo, habilita la librería y diseña una página a tu gusto usando solo los componentes que publicaste: hero, header, card y botones.

Cuéntame en los comentarios cómo te fue con el reto y comparte capturas de tu resultado.

Resumen

¿Por qué necesitas un plan pago para publicar componentes en Figma?

¿Es obligatorio pagar Figma para usar componentes? No. Puedes crear y usar componentes dentro de un mismo archivo gratis. Solo necesitas el plan pago si quieres publicarlos como librería compartida para varios proyectos o personas.

¿Cómo se hace el upgrade del plan en Figma?

Desde el ícono del librito, Figma te avisa que necesitas actualizar para publicar componentes. Al darle upgrade, te lleva a una pantalla donde confirmas:

El nombre del proyecto que quieres habilitar (en este caso, Design System).
La cuenta asociada al pago.
El costo mensual o anual del plan.
Los datos de la tarjeta de crédito y dirección de facturación.

Una vez confirmado el pago, Figma muestra un resumen con el plan activo y ya puedes regresar al archivo a publicar tu librería.

¿Cómo publicar componentes en una librería de Figma?

¿Qué hacer si Figma marca un componente como inválido?

La solución es revisar variante por variante y confirmar que cada una tenga una combinación única de propiedades. En el caso del botón, la matriz correcta combina:

Size: large, medium, small.
Style: filled, outline.
State: active, hover.

¿Por qué Figma dice que un componente está inválido? Porque dos o más variants dentro del mismo set tienen exactamente la misma combinación de propiedades. Cada variante debe ser única.

Una vez corregidas las variantes, vuelves al librito, le das publicar y Figma confirma que botón, card, header y hero se publicaron exitosamente.

¿Cómo usar una librería publicada en un nuevo archivo de Figma?

La prueba real de que la publicación funcionó es abrir un archivo nuevo y consumir los componentes desde ahí. El flujo es directo:

Crea un archivo nuevo dentro del team project.
Inserta un frame (por ejemplo, iPad mini).
Abre el panel de assets y entra al ícono del librito.
Habilita la librería que acabas de publicar con el check.

¿Qué ganas al tener una librería de componentes publicada?

Y aquí viene lo interesante: este es el momento en que un design system deja de ser un archivo bonito y se convierte en una herramienta de velocidad para todo el equipo.

Reto: diseña una página completa con tus componentes publicados

Cuéntame en los comentarios cómo te fue con el reto y comparte capturas de tu resultado.

Visión general de los Sistemas de Diseño

Anatomía de un design system en Figma

Conceptos Básicos de Figma para Sistemas de Diseño

Pasos para crear un design system

Neo-Brutalism como base de un design system

Taller para nombrar tu design system

Documentación de Fundamentos en Sistemas de Diseño

Guía de Estilos con Figma

Design tokens: qué son y cuándo usarlos

Escalas tipográficas con proporción áurea

Creación de Escalas Tipográficas en Figma

Psicología del color para design systems

Tokens de color en Figma con Material Design

Espaciado y elevación en design systems

Espaciado y elevación con tokens en Figma

Iconos e ilustraciones en tu design system

Documentación de Sistemas de Diseño en Figma

Librería de componentes

Atomic Design: Construcción de Componentes en Design Systems

Arquitetura e auditoria de componentes no Figma

Cómo crear variantes de botón en Figma

Creación de Componentes de Cart en Diseño UI

Cómo crear un header con variantes en Figma

Cómo construir un hero con variantes en Figma

Cómo publicar tu librería de Figma

Diseña una landing page con tu design system

Implementación y medición

Calculadora de ROI para design systems

Cómo construimos un design system en startup

Qué sigue después de tu design system

Cómo publicar tu librería de Figma

Progreso del curso

Visión general de los Sistemas de Diseño

Guía de Estilos con Figma

Librería de componentes

Implementación y medición

Recursos

Recursos