Cómo usarTailwind en Figma sin morir en el intento
Empezar a diseñar un proyecto de 0 suele ser complejo: definir la identidad visual del producto, tener una base de componentes estable y escalable, que sea accesible y, a todo eso, hay que sumar trabajar en conjunto con el equipo de desarrollo para hacer que el resultado final se se asemeje lo más posible a nuestros diseños. Colaborando en equipos chicos, donde solemos cumplir más de un rol a la vez, el uso del tiempo y recursos debe ser lo más estratégico posible. Acá es donde entra en juego Tailwind y hoy te cuento cómo.
¿Por qué Tailwind?
La verdad, mi primera experiencia fue en un proyecto que ya estaba en veremos cuando se sumó diseño y estaba usando Tailwind. Lo vimos como una oportunidad para experimentar y ver cómo podíamos colaborar ambas partes optimizando resultados.
El comienzo fue… complejo. Nunca había usado Tailwind, vimos que la propia gente de Tailwind mismo había discontinuado su Figma oficial hace unos años y, técnicamente, no usa componentes. Entonces, ¿cómo usar Tailwind para armar un design system?
Aprovechando las ventajas de Tailwind
La base de la propuesta de Tailwind es usar utility-classes y Figma nos permite sumar estas clases como variantes bases de un archivo. Esto es genial porque nos permite incorporar dichas clases, saber que contamos ya con variables que funcionan en conjunto y es “simplemente” decidir cuáles usar. Podemos incorporarlas a Figma (ya sea manualmente o a través de un archivo que ya contenga las clases) y podemos armar nuestros propios componentes con dichas clases, lo cual nos permitirá:
- estandarizar nuestro trabajo;
- hacerlo escalable y fácilmente modificable;
- facilitarle el trabajo al equipo de desarrollo.
Para llevarlo a un ejemplo concreto, este es el botón que usamos en nuestro mini design system. Abajo vemos como figma nos sugiere una estructura de divs con las clases de Tailwind ya aplicadas; incluso también nos ofrece las clases para textos y colores de manera aislada. Después podemos debatir si los agrupa en el orden ideal, si sigue buenas prácticas, si usa los elementos correspondientes (sabemos que div para todo está lejos de ser ideal), pero nos da una buena base de la que partir.
<div class="w-[123px] h-11 px-8 py-3 bg-amber-200 rounded-[50px] flex-col justify-center items-center inline-flex">
<div class="justify-center items-center gap-1 inline-flex">
<div class="text-center text-gray-900 text-sm font-black font-['Nunito'] leading-tight">Empezar</div>
</div>
</div>En este proyecto puntual como usábamos componentes más lúdicos y que se salían de lo tradicional (no usamos más que botones o inputs “normales”), aplicar las clases de Tailwind fue super útil. Sí, implicó una cierta inversión de tiempo incorporar todo, amigarme con las distintas variantes, pero una vez incorporado el resto salió en un suspiro. Construimos cada elemento acorde a las necesidades, usamos colores y estilos de su librería y solamente customizamos imágenes y tipografías. Fue muy ventajoso para ahorrarnos tiempo. Pudimos disponer de más tiempo en definir la identidad del producto y las “pantallas” salieron muy rápido, fue como armarlas con legos de la medida justa. Plus extra: el equipo técnico podía directamente copiar de figma las clases y la UI quedó prácticamente igual a la primera 👏.
Si usamos Figma en modo dev, podemos ver que automáticamente Figma nos muestra los nombres de las clases (en este caso, las de Tailwind) lo cual hace que tanto diseño como desarrollo usen el mismo nombre para reeferirse a las clases, facilitando así el pasaje de diseño a desarrollo.
Claramente no hay una manera única de colaborar entre diseño y desarrollo y asegurarnos el éxito. Dado el contexto de equipo chico y desarrollo usando Tailwind, creo que usar esa base para construir nuestra UI fue un acierto y lo repetiría. ¿Puede haber demorado más al inicio tener resultados tangibles? Puede ser, pero a la larga fue una inversión de tiempo que definitivamente rindió sus frutos y ahora es fácilmente reutilizable. De hecho, el archivo con las variantes de Tailwind nos quedó a modo de template y puede ser usado en cualquier proyecto.
Siento que fue un gran acierto usar ese tiempo inicial para asegurarnos una buena base y asegurar la calidad del producto final. No sé si es mi framework favorito, pero definitivamente demostró ser uno muy útil para trabajar ambos equipos en sintonía y sin perder mucho tiempo poniéndonos de acuerdo.
¿Vos usaste alguna vez Tailwind en Figma? ¡Contame cómo te fue! Sino te dejo el archivo de utility-classes oficial de Tailwind por si querés probar 😉
