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.
Aprende sobre Figma, Design System y Product Design
🔥 Únete a la comunidad UX y UI fácil en Discord
🔴 Suscríbete al canal de YouTube para ver tutoriales
Suscríbete gratis para recibir nuevos recursos todas las semanas.
Información de privacidad
En este sitio web te solicito algunos datos para enviarte correos electrónicos con las publicaciones que hago. Finalidad de los datos: Enviar correos electrónicos con las novedades publicadas en el blog. Legitimación: Aceptación expresa de la política de privacidad. Almacenamiento de los datos: Base de datos alojada en Siteground España. Duración: Hasta que lo solicites. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.
Deja una respuesta