Guía completa de la nuevas variables de color en Figma

[@jesusreyesXYZ]

¡Vaya pedazo de píldora! Genial que hayas explicado los casos de uso con ejemplos para entender todo su potencial. ¡Mil gracias Raúl.

[@RaulMarin_Figma]

Gracias a ti Jesússs!!

[@manuelcardenas89]

¡Genial Raúl! Gracias 😍

[@MalenaMerlina]

Grande Raúl!! siempre explicando y compartiendo todo

[@angelabarreiro1190]

Gran vídeo! súper bien explicado muchas gracias!

[@RaulMarin_Figma]

Gracias a ti!

[@pedromrgluum2322]

:) Primero :) viene de maravolla este video me estaba preguntando como integrarlo a Token Studio , Muchas gracias raul.

[@paurosbas969]

¡Buenos días Raúl! Muchísimas gracias por esta masterclass sobre variables. Me ha parecido realmente interesante sobretodo el tema del sistema multidimensional. Si no en he entendido mal, en cada "colección de marca" deberíamos tener toda la batería de colores base de cada una de las marcas, cierto? Reds, Oranges, Greens... etc ¡muchas gracias una vez más por la mega píldora!

[@RaulMarin_Figma]

Hola perdona el retraso en responder... estoy preparando un vídeo sobre DS multidimensional y en ese os dejo el link del ejemplo que estará todo más ordenado ;)

[@sebastianriggio5588]

Genial Raul, puedes compartirme el doc del ejemplo multidimensional.

[@DiegoPemberthy]

ufff graciasssss!!

[@RaulMarin_Figma]

Gracias por comentar

[@tanyacequi6556]

Hola Raúl, gracias por este video, lo vuelvo a ver porque necesito crear un sistema multi dimensional parecido al que mencionas a partir del min. 45. Será que puedas compartirnos ese Figma? creo que nos ayudaría un montón a entender mucho mejor la lógica de esas colecciones de variables. 🙏🏽

[@tanyacequi6556]

Traté de rehacer las colecciones como tú, pero la colección 4.Brand (Global) no me queda como a tí, con esos alias "Marca A/BG" por ejemplo... :(

[@tanyacequi6556]

Yo y mi soliloquio mientras me puedes responder 😅ya pude hacerlo funcionar! Tenía que crear primero la colección numero 5! jeje Oye y este sistema es sólo escalable a 4 marcas sin pagar Figma Enterprise, verdad? La otra opción sería directamente hacer colecciones por Brand y luego cada uno su light y dark modes en cada colección de marca? Quiero hacerlo funcionar para más de 4 marcas... y luego creo que tengo que ocupar Tokens Studio para manejar distintas tipografías por marca 🥴 todo un reto. Ojalá luego que tengas un poco de tiempo nos puedas mostrar como manejar Figma variables + TS para manejar tokens de tipografía en sistemas multibrand gracias por toda tu ayuda Raúl! Eres mi Figma sensei!

[@victorhidalgorico]

Gracias, Raúl. Eres la puta leche!!!

[@RaulMarin_Figma]

Gracias por el piropo ;)

[@nativoluis]

Se puede integrar component properties con variables o recomiendas elegir solo un camino para la construcción de componentes?

[@RaulMarin_Figma]

Hola de momento las variables no conectan con props. Pero si pueden trabajar juntas en algún componente que lo necesites... Quiero decir que un componente puede llevar variantes, propos y variables. Estoy preparando un vídeo de ello, a ver is lo termino para este finde. ;)

[@jhordanvasquez9554]

Alguien sabe cómo hago swap library con variables?

[@RaulMarin_Figma]

Hola! No es posible hacerlo aún. No se si será una opción que incluya Figma a futuro. 🤞

[@einnerjo]

Hola Raúl, gracias por el video. ¿Compartes el link del archivo que hiciste? Es para tenerlo como material de apoyo 👌

[@RaulMarin_Figma]

perdona el retraso en responder... estoy preparando un vídeo sobre DS multidimensional y en ese os dejo el link del ejemplo que estará todo más ordenado ;)

[@MauricioPinto-qe1qq]

👀@@RaulMarin_Figma

[@debdeb11337]

Genial Raúl! Hace días que venía pensando cómo se combinan o usan ahora las variables con Design Tokens y en este video me has despejado las dudas :-) Podrías compartir el archivo? Gracias

[@RaulMarin_Figma]

A ti siempre ❤️

[@andreaabreu108]

Hola Raúl, muchas gracias por el vídeo :) En el caso de tener el plan org y querer trabajar con más de 4 marcas, ¿no habría ninguna manera de hacerlo con los modos a menos que haga upgrade del plan?

[@RaulMarin_Figma]

Hola Andrea, exacto. El plan Org admite hasta 4 modos por Collection. Si quieres más hay que pasarse a Enterprise que admite 40 (pero para poder tener ese plan hacen falta mínimo 6 editores y a 75$ cada uno, unos 5500$ al año). La otra es hacer las marcas/modos en varias collections pero significa duplicar variables y diseños...) :(

[@aztago]

@@RaulMarin_Figma Hola! Explicarías en la píldora que estás preparando sobre el DS multidimensional, como hacer esto en varias collections aunque haya que duplicar variables y diseños? Gracias!

[@astronois6714]

Hay alguna manera de agilizar la selección y aplicación de las variables a cada elemento para no tener que ir seleccionandolas en el menú desplebale? Me he lanzado a usarlas en un nuevo sistema de diseño y me parece un proceso demasiado lento. Lo ideal sería poder vincularlas a las teclas con comandos personalizados

[@RaulMarin_Figma]

Hola, totalmente de acuerdo con que el acceso para aplicarlas no es demasiado eficiente... Solo se me ocurre aplicarlas por lotes (si lo permite le tipo de proyecto) con plugins de selección de capas (tipo Similayer, Select layers by...). Veremos como evoluciona la cosa, está muy verde. :(

[@anagabrielauchuyavillegas5047]

Hola Raúl, increíble video. He estado haciendo el ejemplo contigo pero no he logrado conectar la variable de true o false de la imagen. No sé como enlazar para que también funcione con las variables. Como podría lograrlo?

[@RaulMarin_Figma]

Hola Ana, no se si ya has podido hacerlo pero recuerda que para eso tienes que aplicar la variable en la zona de Layer del inspector (haciendo botón derecho sobre el ojo de mostrar/ocultar.

[@debdeb11337]

Hola Raúl, tengo una duda con respecto al orden y nombramiento de las colecciones. En tu ejemplo básico de variables y modos dark/light (y también en la documentación de Figma), en la colección de específicos están los tokens de colores junto con el radius + border + spacing con 2 modos que son necesarios sólo para los tokens de color lo que te obliga a duplicar todos los valores del resto de tokens (radius, border y spacing - valores para modo dark + light). Esto a mi modo de ver no debería pasar, no habría que separar las colecciones de los colores? Cuál sería la mejor forma de organizar las colecciones y los modos?

[@RaulMarin_Figma]

Hola Deby gracias por comentar ;) Tienes toda la razón. Salvo que quieras tener una Collection con todos los "primitives" o "gobales" (color, spacing, etc.) y luego hacer alias en diferentes temas, lo ideal si solo va a hacer modo dark y light es quitar el resto de variables que no afecten al color. Estoy preparando el siguiente video de variables numéricas y ahí lo comento un poco. 🤗

[@debdeb11337]

Gracias Raúl 👍

[@araujooskr9492]

Hola Raúl cómo estás? Nuevamente yo por aquí... 😂😂 Una consulta, quiero agregar a mis variables de color un gradient style, pero no sé si figma lo permita. Que me recomiendas?estoy creando un proyecto multimarca y quisiera poder crear variables de degradados, aún estoy descifrando como hacer el cambio de marca a la hora de prototipar

[@RaulMarin_Figma]

Hola ;) Efectivamente los gradients son solo posibles con "styles". No te queda mas remedio que hacer algunos estilos para esos degradados.

[@robertogomez1519]

Muchas gracias por tu esfuerzo y trabajo pero sobre todo por compartirlo. Muchisimas, muchisimas Gracias. Podrías pasarme los archivos que has utilizado de ejemplo? Estoy ahora justo en el momento de cambiar y actualizar todo mi sistema de diseño y me vendrían bien para aprender mientras realizo la actualización

[@Humboyz]

Lo del alias no he acabado de entenderlo, en el ejemplo es el mismo rojo que cuando modificas el "padre" modifica tambien la instancia, correcto? No acabo de verlo....

[@RaulMarin_Figma]

Hola! Una alias es una variable que depende de otra. Como cuando usas un componente y su instancia. Si el componente cambia la instancia adopta esos cambios. Son variables dependientes de otras que permiten llevar el diseño más lejos y hacerlo más eficiente.

[@Humboyz]

@@RaulMarin_Figma Muchas gracias por la aclaración!

[@Seineldin918]

Serias tan amable de compartir ese figma?

[@RaulMarin_Figma]

Hola perdona el retraso en responder... estoy preparando un vídeo sobre DS multidimensional y en ese os dejo el link del ejemplo que estará todo más ordenado ;)