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.