Figma variables
Last updated
Last updated
Nuestro kit de Figma está configurado para controlar todos los tokens desde Figma Variables. Este starter kit incluye todos los tokens configurados directamente en las variables de Figma, permitiendo gestionar cualquier token como colores, tipografías, tamaños, espacios y bordes de manera centralizada. Incluso los componentes están creados y configurados de forma consistente para adaptarse automáticamente a los cambios realizados en los tokens que desees modificar.
En el panel de variables encontrarás los 3 niveles de tokens configurados como una colección y por cada nivel (colección) encontrarás las categorías cada una con sus respectivos valores.
Para una mejor consistencia, controla solo los tokens de la capa System. Este kit tiene las variables configuradas para que no tengas que trabajar mucho: solo con cambiar los tokens de la capa System, podrás ver toda la UI y los componentes personalizados. Recuerda usar la jerarquía en las capas de Tokens: Component se alimenta de System y System se alimenta de Global. En la capa Global encontrarás muchas opciones para personalizar tu UI sin perder consistencia.
Nuestro kit de Figma está hecho y configurado con los tokens precisos para garantizar consistencia y escalabilidad. Sin embargo, eres libre de cambiar y/o editar cualquier token o variable que consideres viable. Si quieres editar variables, te recomendamos lo siguiente:
Cambiar solo los tokens de la capa System. Como mencionamos arriba, puedes modificar el aspecto de tu interfaz simplemente cambiando los tokens de esta capa.
Si vas a agregar más tokens, sigue la regla de la pirámide:
Global Tokens: Opciones.
System Tokens: Alias.
Component Tokens: Componentes
Para agregar nuevos tokens de componentes y mantener una organización clara, separa cada grupo con un /. Por ejemplo: button/background-color/primary/default. Recuerda usar esta regla para nombrar componentes.
Figma ha hecho un esfuerzo increíble por brindarnos herramientas para manejar tokens dentro de su plataforma. Sin embargo, aún no existe un modo completamente correcto o estandarizado.
Quantum es una metodología de sistemas de diseño que funciona tanto fuera como dentro de Figma. Usamos Figma para hacerlo visible, pero hay ciertas limitaciones en su funcionamiento. Por lo tanto, es importante que cada token nuevo que agregues tenga el scope configurado correctamente para evitar interferencias dentro de la interfaz de Figma.
En el ícono de configuración (setting) de cada token dentro del panel de variables, puedes especificar dónde deseas que se vea el token. Este kit está configurado para trabajar principalmente con los tokens de la capa System, pero puedes ajustarlo según tus necesidades.
