Variables y estilos en Figma para dark mode
Contenido del curso
Maria Paula Betancourt
Roberto Patrón
Gerson Antonio Cabrera
Héctor Alonso Padilla Ramírez
Patrick Jhonatan Hernandez Blanco
Christian Marquez
Santiago Andres Gelvez Camargo
Julio Antonio Bencosme Campos
Andres Barrera
Martina Moreno Quiñones
Liliana Mancera
Jhonny Iván Chapetón
Jhonny Iván Chapetón
Alexandra Garces
Juan David Estrada Ramirez
Sabrina Salinas
Manuel Martínez Ortiz
angelica londoño
Alexander Flores Rayme
Gabriela Diaz Cubillos
John Sebastián Montaña Rodríguez
Nicolas Alpargatero
Barbara Camila Inostroza Vildósola
William Henry Luis Sánchez
Carolina Gómez
Nelson Alayón
Mariana Barrios
William Henry Luis Sánchez
A pesar de que el curso es casi nuevo, e notado que algunos iconos y comandos han cambiado, en este caso el icono de cambiar de light a dark, me aparece como se ve en la imagen compartida. Y para que cambie de color el componente apenas este sobre un frame , hay que oprimir el boton (Auto)
Espero sirva de ayuda :)
Santiago, ¿cuándo consideras que es más conveniente usar estilos y cuando variables? para color o para textos
En Figma, usa estilos cuando necesites consistencia para elementos más estáticos, como colores de marca, fuentes corporativas o estilos de texto que no cambian, ya que son como "recetas" fijas para aplicar en varios proyectos. Por otro lado, usa variables para sistemas dinámicos donde los valores pueden cambiar según el contexto, como temas de modo claro/oscuro o ajustes flexibles.
Los estilos son ideales para mantener estabilidad y los variables para adaptarte a cambios o necesidades específicas.
En Figma, el uso de estilos o variables depende del contexto del proyecto y de la flexibilidad que necesites para manejar colores o textos.
Cuándo usar estilos:
1. Consistencia visual: Si necesitas mantener una coherencia visual en todo el proyecto, como en los sistemas de diseño donde los colores y textos se repiten en varios elementos, los estilos son ideales. Con los estilos puedes aplicar colores, tipografías y otros atributos de forma centralizada y reutilizable.
• Ejemplo: Para definir colores de marca, fuentes corporativas o tamaños de texto específicos, es recomendable usar estilos. Si decides cambiar el color primario del proyecto, puedes actualizar el estilo y se aplicará automáticamente a todos los elementos que lo usan.
2. Documentación y mantenimiento: Los estilos permiten que tu equipo vea rápidamente qué colores o tipografías se usan en el proyecto. Son útiles para definir paletas de colores globales o jerarquías tipográficas que se mantendrán uniformes a lo largo del proyecto.
3. Escalabilidad: Si tu proyecto crece, los estilos te permiten mantener una estructura clara y escalar sin perder control sobre la apariencia visual.
Cuándo usar variables:
1. Flexibilidad y cambios dinámicos: Si trabajas en un proyecto que requiere una mayor personalización, como el uso de temas dinámicos (modo claro/oscuro) o colores/textos que cambian en función de estados o interacciones, las variables son más flexibles que los estilos. Te permiten cambiar valores de manera dinámica sin tener que redefinir estilos.
• Ejemplo: Si tienes un sistema donde el color de un botón cambia entre diferentes estados (activo, inactivo, hover), usar variables facilita la gestión de estos cambios. Puedes definir una variable de color y cambiar su valor según el estado sin tener que duplicar estilos.
2. Personalización en múltiples temas: Las variables permiten cambiar rápidamente entre diferentes configuraciones de color o tipografía, lo que es especialmente útil cuando trabajas con diferentes temas dentro del mismo proyecto, como modos de accesibilidad o branding variable.
3. Valores condicionales: Si tienes un diseño donde el color o el estilo de texto depende de ciertos factores o condiciones, las variables te permiten manejar estos cambios de manera más eficiente.
También se pueden definir variables de la siguiente manera
Hola. Para el que no sepa o no lo haya notado, en la barra de propiedades, los íconos de las Variables locales son cuadrados, mientras que los íconos de Estilos son redondos:
¿Alguien sabe qué sucedió con la licencia de educación? Trato de hacerlo pero no me lo permite y de igual forma, trato de entrar al post pero no aparece. Parece que nos quedamos sin licencia.
Resolviste algo con respecto a la licencia?
Hola, yo tengo la misma pregunta. Alguien sabe como resolver?
ℹ No se encuentra disponible la clase anterior sobre Variantes y Propiedades.
Me hubiera gustado poder generar mas variables y estilos pero no me deja :( solo pude crear el color blanco
Recomiendo mucho seguir la página de figma en instagram, cada tanto publican tutoriales muy útiles. El último fue sobre una actualización de efecto glass, como el de la última actualización de iOS.
Por otra parte al tratar de aplicar a la licencia de estudiante me sale esto.
Hoy inico esa clase, alguien me puede ayudar con lo de licencia? les agradeceria.
Al parecer hay una clase que no se esta visualizando, al inicio se habla de variantes y propiedades, pero no logró visualizar ese contenido en la ruta y en la clase pasada no está este contenido.
también me preguntaba si había alguna clase específica de variantes, pero en la clase anterior eso se ve en más detalle en las actividades del playground, al menos es lo que yo encontré
Quiero saber cuales son los usos prácticos para las variables en figma
Las variables en Figma sirven para guardar valores recurrentes —de color, números, textos o booleanos— y aplicarlos en toda la interfaz. Su uso más potente es mantener consistencia y cambiar dinámicamente entre modos, como pasar de dark mode a light mode con un solo clic.
¿Vemos si quedó claro cómo se aplican en el día a día?
Hola, que puedo hacer si no tengo la lincencia de educación para figma?
¿cuál es la diferencia entre las variables y los estilos?
las variables en Figma son valores específicos (como colores, números, texto o booleanos) que puedes asignar y reutilizar en tu diseño. Los estilos, por otro lado, agrupan diferentes variables (como las de un gradiente o una tipografía completa) en un solo lugar para facilitar su aplicación consistente.
Tengo un problema, en el min 7:53 cuando muevo el componente del frame light al frame dark el boton de descarga no se actualiza no se que hacer para que me funcione :c
No sé si te sirva, pero también me pasó, y era que no me había fijado que hay que darle la propiedad a los 2 frames de cuál modo quiero que use cada uno, ya que por defecto agarran el modo DARK).
El frame debe estar en modo Dark o Light y el botón en Auto, asi me funciono.
Hola, quisiera entender bien ¿cuál es la diferencia entre las variables y los estilos?
Saludos
ojala se pueda en el community
Se puede adquirir la version pro de figma con la suscripcion a platzi?
Si se puede, aquí te dejo el enlace con los pasos a seguir:
Licencia de Figma para Estudiantes de Platzi - Programa Figma for Education
no deja ya lo intente
