Analizando las novedades de Figma
¿Va Figma por el buen camino de la gestión de tokens? Repasamos las novedades que acercan el uso de tipografías y gradientes dentro de la herramienta
El equipo de Figma no descansa y nos vuelve a traer actualizaciones, en su línea de acercar la herramienta a un diseño más enfocado en el desarrollo.
Desde hace un tiempo contamos con la Beta de las variables (su acercamiento al uso de design tokens) que nos permitía crear valores para colores, espaciados, bordes, textos, etc. Con esta nueva actualización, añaden el esperado soporte para Tipografías y Gradientes.
En la newsletter de hoy te contamos todo lo que necesitas saber ¿Serán tan buenos como esperábamos?
Gradientes
Aunque Figma ya contaba con una herramienta para crearlas, muy similares a las gradientes de css, ahora nos permite añadir variables de color para definirlas.
Podemos elegir el tipo de gradiente (Linear, Radial, Angular y de Diamante), el número de colores y su colocación (con colores como variantes) además de poder controlar el ángulo de inclinación.
El color lo podremos guardar con opacidad en la variante, con lo que será mucho más sencillo crear paletas con opacidades o colores específicos para estas gradientes.
En la vista de inspección, podremos copiar algo como esto:
background: linear-gradient(180deg, #FF6D6D 0%, rgba(239, 57, 197, 0.80) 52.34%, rgba(252, 255, 90, 0.80) 100%);Conclusión
Como tal, no podemos crear variables (tokens) de gradientes al 100% y mantenemos el híbrido entre variables/estilos. Figma nos lleva a crear los colores de las gradientes como variables y las gradientes en sí como estilos.
Parece que todavía hay algunos errores a la hora de inspeccionar por desarrollo, como que no muestra los colores como tokens o variables en el inspector, sino el HEX o valor en sí (también baila la colocación del color, que lo marca a 52.34% siendo que en diseño marca 52%)
Pero en general, nos es muy útil a la hora de diseñar, acercar el planteamiento de tokens a la herramienta y facilitar cambios de color como theming de marcas, modos, etc.
Tipografías
Aquí viene la parte más interesante, lo que todos esperábamos como agua de Mayo.
Figma ahora nos permite crear variables de los diferentes valores que componen una tipografía, como:
font-family: Podemos añadir el nombre de la fuente en sí, como Inter, SF Pro, Roboto…
font-style: Para añadir sobre todo el estilo italic. No contempla estilos tachados, subrayados, etc. (y ahora comentaremos que tiene trampa).
font-weight: El peso de la fuente, lo podemos escribir con texto, como Regular o SemiBold, o con número, como 500 o 700.
font-size: el tamaño de la fuente, con un número como 16, 20…
line-height: la altura de la fuente, con números como 24, 28…
paragraph-spacing: Distancia entre párrafos con un número como 24, 28…
letter-spacing: Distancia entre letras, con números tanto positivos como negativos como -0.5, 0.3…
paragraph-indent: Espaciado en la primera línea de párrafo, con un número como 8, 16… Está un poco escondido, dentro de los ajustes de la tipo en los 3 puntos (…)
Estos valores los podremos aplicar, al igual que con las gradientes, a un estilo tipográfico (lo que sería un token compuesto o shorthand) y aquí ya lo podríamos usar como headings, bodies…
A la hora de inspeccionar, nos dará algo como esto:
color: var(--Black, #000);
/* Examples/Body/Bold */
font-family: var(--font-family, Inter);
font-size: var(--font-size, 16px);
font-style: normal;
font-weight: 700;
line-height: var(--line-height, 24px); /* 150% */
letter-spacing: var(--letter-spacing, 3px);Problemas
Aunque en general es positivo tener todo esto, parece que Figma ha cerrado los ojos con muchos puntos de la gestión de las tipos:
No podemos separar el font-weight y font-style: Por cómo gestiona las fuentes Figma, si tenemos estilos “Italic” tendremos que crear una variable conjunta con los font-weight como “SemiBold Italic”.
Aplicar font-weight como texto o número: Este valor es complicado al ser válido como Regular, SemiBold… o 400, 700… y Figma no lo ha solucionado de la mejor forma. A la hora de crear varios temas, si por ejemplo, queremos que en el de iOS se muestre como texto y en Web como número, no podremos, ya que nos obliga a que sean todos de un mismo tipo.
No podemos usar matemáticas: Los valores tendrán que ser únicos y no podremos crear tamaños en función de una escala o funciones como clamp.
No podemos usar valores como %: Casos como line-heights o espaciados en % tendremos que transformarlos para usarlos con variables, lo que nos puede crear diferencias con nuestros tokens en desarrollo.
Nos faltan cosas básicas como gestionar textos subrayados o sólo mayúsculas: Algunos estilos básicos en nuestros sistemas no se pueden gestionar como variables, sobre todo en el apartado de decoraciones.
Muchos valores no se muestran o se muestran sin tokens en el inspector: Algunos aspectos como las decoraciones no se mostrarán en el inspector. También parece que el font-weight si se añade con texto como Bold no se mostrará con token.
Conclusión
Las novedades en Figma por la línea de design tokens (aka variables) nos ayudan a trabajar más rápido, nos facilitan el diseño en diferentes temas y plataformas y nos acercan al uso de estos valores en desarrollo.
Aunque esto está genial, tendremos que tener en cuenta que están muy enfocadas a las herramientas con las que cuenta Figma para que funcionen en su ecosistema y esto nos puede limitar al crear nuestras definiciones.
Podremos sacar partido de las variables para conseguir esas mejoras de trabajo en diseño, pero nos complica el depender de Figma para almacenar o crear nuestros design tokens.
Seguramente en próximas actualizaciones irán mejorando estas cosillas y acercándose a que podamos gestionar 100% nuestros tokens ahí.
¡Hasta aquí por hoy! Decidnos qué os ha parecido, si las estáis probando en vuestros proyectos o tenéis cualquier duda.
Y como todas las semanas, nos vemos el próximo lunes a las 8:00 con más novedades.
¡Suscríbete para no perderte nada!