Tokens de Figma: el secreto de una UI consistente

En el directo de hoy pasó algo curioso. Entré con la idea de hacer “un par de ajustes rápidos” y acabamos sumergidos en una aventura completa de diseño donde los tokens de Figma fueron los verdaderos protagonistas.

Entre risas, mini sustos y ese momento en el que dices “por qué no funciona esto si ayer sí funcionaba?”, nos pusimos a ordenar tipografías, botones, breakpoints y componentes para dejar el proyecto respirando como un auténtico Design System profesional.

A partir de un simple ajuste al estilo text-lg (18 px y 28 px de line-height siguiendo Tailwind CSS) abrimos un hilo de trabajo que nos llevó a crear nuevos estilos tipográficos, revisar la escala completa y asegurarnos de que cada botón (sm, md, lg y xl) estuviera conectado a sus design tokens y variables. Todo ello pensando en mantener una UI library consistente, estable y escalable, tanto en Figma Design como en Figma Sites.

Componentes

Durante la sesión nos dedicamos a propagar cambios en más de 200 elementos del sistema, actualizando variables, colores, espaciados y tamaños para mantener una coherencia visual real en todos los breakpoints: mobile, tablet, desktop y large.

Revisamos componentes como Button, Header, Card y Badge, comprobando cómo respondían en cada modo y ajustando detalles para mejorar la accesibilidad y el ritmo visual.

También aprovechamos para sincronizar librerías entre Figma Design y Figma Sites, corregir nombres duplicados que impedían publicar el componente Header, y volver a probar cómo los design tokens impactaban en la interfaz cuando actualizábamos estilos desde la librería principal.

En resumen, una sesión de diseño de las que enseñan de verdad: práctica, transparente y con mini caos controlado.

Este directo fue una demostración clara de cómo los tokens de Figma, combinados con una buena gestión de variables, auto layout y breakpoints responsivos, pueden transformar un archivo desordenado en un sistema de diseño estable, fiable y preparado para crecer.

Y lo mejor: lo hicimos en vivo, equivocándonos, corrigiendo y celebrando cada pequeño avance.