Variables para Tipografía en Figma

[@diegomantilla6714]

Maravilloso.

[@fabrizioibarra9545]

El otro día estaba pensando que sería bueno variables aplicadas a la tipografía y de repente aparece Figma con la actualización . Aunque tu servidor sabe inglés, siempre es mejor escuchar esta información en nuestra lengua materna, se agradece el esfuerzo por tu trabajo. como siempre, buen video.

[@mokkapp]

Gracias Fabrizio! Si, se llevaba tiempo esperando variables para tipografía y aunque de momento debamos seguir manteniendo estilos de tipografía para almacenar esas variables... es un gran avance! Un saludo!! 🫡

[@BeaBea-o2v]

Muy buen video con el ejemplo de variables en CSS. Se entiende mucho mejor 👍

[@mokkapp]

Muchas gracias!

[@charlysalega4386]

Aprendo mucho con cada video tuyo. Podrías hacer una pequeña guía sobre como creas tus Mockups?

[@mokkapp]

Hola Charly! Me alegro que te sirvan de ayuda! En cuanto a lo que propones, si, tengo previsto hacer un video de este tipo. Igualmente el prototipo que muestro, la versión desktop lo he sacado del curso de Figma 2024 capítulo 2 y 3 que tienes en el canal. Un saludo 👋

[@arielmoreno2624]

Hola Xavi como estas? ...estaba esperando ver este video y una vez mas tengo que decirlo 📢 Estas en los detalles, desde mi humilde punto de vista y por que digo esto, luego de anuncio de figma, muchos post y video que e visto se titulaban nuevas variables en figma, 🚨lo cual no era cierto y por un momento me creo una confusión eses títulos, mas alla del pequeño error, de esos títulos lo que siempre destaco de Mokkapp es esto mismo, esta todo bien claro y eso para mi es muy valioso🙌

[@mokkapp]

Hola Ariel!! Qué tal? Pues si, he visto lo mismo que comentas en algunas publicaciones. Quizás había gente que esperaba variables propias de tipografía... pero no! Desde mi punto de vista, esto le da mucho más poder ya que veo una semejanza con desarrollo. Ya sea en CSS o JS siempre tienes las mismas variables y mediante funciones puedes hacer mil cosas con ellas. Yo me imaginaba que iría por aquí el asunto, ya que como te dije hace algún tiempo, cada vez veo más similitud y puntos en común entre diseño y desarrollo a través de Figma. Un saludo!! 👋🏽😎

[@SanOC]

Hola! Muy buen resumen y video! Una pregunta, para las variables como letter-spacing que pueden tener valores negativos y quiero mantenerlos en %, hay alguna manera?

[@mokkapp]

Hola! Es lo único que falta, el uso de % en la propiedades que comentas. No podemos usar variables de string en este caso (20%) dentro de la altura de línea ya que no podemos usar valores % (solo las variables numéricas funcionan en ese campo, por lo que no se permite %). Lo que he leído es que están trabajando en ello. Cuando vea la actualización os lo hago saber.

[@axelhunger]

Y si quisieras hacer para dark mode de ambas. Lo unico que tendrias que hacer es crear otras 2 columnas, para ambos tipos de pantallas y ajustar el grosor? Siendo que en dark me parece que es más grueso. Si de 10 pt. En light en 4, en dark seria 6 ? Sería decir como, light a semibold? Pero no tan así? Si fuese ultra light no le pondría ultra bold o heavy. Que cierto contraste, siendo texto, y x tamaño cumple o no, es accesible, legible, y que si no cumple, tengas ahi botones para seleccionar como starck y se engruese, como separe letras entre sí? Hay algun plugin que diga, quizá con Starck? Que la tipografía

[@mokkapp]

Hola Axel! En cuanto a lo que dices del Dark Mode, se podría hacer tal y como dices.. Lo que quiero esperarme a ver que sacan en Junio para el evento del Config. Lo ideal aquí sería poder crear MediaQuery como sucede en CSS por ejemplo. En cuanto a plugins prueba uno que se llama: Adee Comprehensive Accessibility Tool Un saludo! 👋

Muy buen video! La duda que me quedo es si la unica diferencia en este caso de definir las variables en vez de los estilos es para que puedas tener 2 modos? Como en este caso que tenes Desktop y Mobile, entiendo que si no es responsive y es solo un dispositivo con los estilos alcanzaria, no?

[@mokkapp]

Hola! Exacto, las variables pueden tener un comportamiento dinámico y eso hace posible cambios de modos, etc. En el caso de que quieras crear una tipografía concreta y no cambiarla, los estilos de tipografía es la mejor opción. Gracias y un Saludo!