Cómo usar las variables de Figma para colores y tamaños

Las variables son valores que podemos definir dentro de un naming y reutilizar dentro de nuestro diseño.

Para crear una variable hay que hacer clic en el canvas e ir al sidebar derecho y hacer clic en “local variables”. Luego seleccionar “crear colección” y crear la variable. Existen 4 opciones y debemos elegir “color”.

Los tokens y las variables son conceptos utilizados en diseño digital, pero tienen diferencias clave. Las **variables** en Figma son valores reutilizables que se pueden definir y utilizar en todo el diseño, como colores o tamaños, facilitando la consistencia. Por ejemplo, un color definido como variable se actualiza en todos los elementos que lo utilizan cuando se cambia su valor. Por otro lado, los **tokens** son entidades que representan valores en un sistema de diseño, siendo más estructurados y utilizados en frameworks de desarrollo. Los tokens facilitan la integración entre diseño y desarrollo, permitiendo que ambos equipos trabajen con el mismo conjunto de valores. Ambos conceptos ayudan a mantener la coherencia, pero se aplican en diferentes etapas del flujo de trabajo de diseño y desarrollo.

### **Puntos importantes de la clase:** 1. **Variables en Figma**: * Son valores reutilizables que se pueden aplicar a colores, tamaños, texto, etc. * Se pueden definir y gestionar desde la barra lateral derecha en la sección de *Local Variables*. 2. **Tipos de Variables**: * Existen cuatro tipos: *Boolean*, *String*, *Number*, y *Color*. * En esta clase se trabaja principalmente con variables de color y tamaño. 3. **Alias para Variables**: * Se pueden crear alias entre variables, lo que significa que si se cambia una variable principal (por ejemplo, *Brand*), los alias asociados (como *Primary*) también se actualizan. 4. **Conversión de Estilos a Variables**: * Figma permite convertir estilos guardados (como colores y tamaños) en variables mediante plugins. * Esto asegura que todos los estilos usados en el diseño estén centralizados y sean fáciles de actualizar. 5. **Limitación de las Variables**: * Actualmente, las variables solo pueden almacenar un valor hexadecimal, por lo que los degradados no se pueden usar como variables. 6. **Uso de Plugins**: * El plugin *Styles to Variables* convierte los estilos guardados en variables automáticamente. * El plugin *Sync Spacing Variables* transforma automáticamente los tamaños numéricos en variables de espaciado. 7. **Variables de Tamaño (Spacing)**: * Los tamaños también pueden gestionarse como variables, utilizando una nomenclatura consistente como *XS* (8px), *SM* (16px), etc. * Al aplicar estas variables, el elemento cambia visualmente y muestra una etiqueta descriptiva al hacer hover sobre él.

Hola! Personalmente no entendí mucho esta clase pero este vídeo me ayudo un poco: <https://www.youtube.com/watch?v=e7J7Ng2eeoQ>

Les recomiendo que busquen en la comunidad de Figma los badges que se muestran en clase para que no tengan que recrearlos uno por uno. Lamentablemente no me deja pegar el link, pero yo busque "AppStore and GooglePlay" y me funciono.

Tengo una duda, el último plugin que se enseña en este video Link spacing variables, solo funciona en medidas de autolayaout no? porque lo use para ancho y alto y no me funcionó