Acciones múltiples y variables en Figma
Contenido del curso
Carolina Melo
Roberto Daniel Baltazar Macias
Noelia Maldonado
Alberto Caro Martinez
Jhonny Iván Chapetón
Harold Sánchez
Maria Paula Betancourt
Gabriela Diaz Cubillos
Alexandra García
William Henry Luis Sánchez
JONATHAN RUBEN HERNANDEZ GONZALEZ
Julio Antonio Bencosme Campos
Ariel Hernán Contini
Karina Marcela Vargas Gallego
Noelia Maldonado
Victor Orellana Infante
Jessica Coanqui
Noelia Maldonado
Walkiria Arteaga
Magda Camargo
Diana Marcela Herrera Pacheco
Liliana Mancera
Sailyn Mantilla
Damian Araya
Maria Paula Betancourt
John Cortés
Liliana Perico
Raúl Giner Llorens
Carolina Gómez
rolando muñoz flores
Josué Emanuel Pérez Rodriguez
soy yo o hizo falta una clase de variantes?
si, hizo falta la parte de las variantes
Hola a todos.
Esta es la primer clase en donde me senti perdida.
Les dejo el link a un video de youtube, donde hace una intro que a mi me ayudo muchisimo.
Espero sea de utilidad para alguien mas.
Saludos
GRACIAS!!!!!!
También me sentí perdido, la licencia para estudiantes ya no funciona. Veo que todo es un constante cambio de estados, flujos e instancias.
Sería bueno que todos los accesos rapidos que se hacen en la Mac los coloquen también para Windows, puede ser en 'Aportes', sería muy util para los team Windows 🙌
Estuve revisando en youtube y primero hay que tranformar los elementos en componentes con Ctrl+Alt+K (Para windows) y luego en la parte superior derecha , donde aparece el noombre del compomente hay un rombo con un mas en el centro que es "add variant" automaticamente se hace una copia del componente
1
2
3
Espero sirva de ayuda :D
Creo que falta explicar como hacer esa variable booleana
En Windows, el comando equivalente para pegar en el mismo lugar en Figma es Ctrl+Shift+V
no,es ctrl shift R, PEGAR para reemplazar
Lo malo que ya no tenemos la opcoin de Figma para estudiantes, entonces no puedo ver las funciones avanzadas, ojala resuelvan esto.
de pana que hace falta
command option shift v --- en mac
control alt shift v --- en win
LAS VARIABLES NO ME FUNCIONA BIEN YA QUE NO TENGO EL PREMIUM :(
Hola Karina ¿como estas ? En una de las primeras clases dejaron como adjunto, un link para obtener Figma Profesional. Teniendo tu cuenta de Platzi habilitada, una cuenta ya en figma (gratuita) y conociendo el email con el cual te registraste en Platzi, podes acceder a figma premium. Te dejo el link: Suerte.
para los que no tienen la cuenta profesional, suscríbanse con su correo de su universidad de estudio y tendrán acceso como los de pago
no permite
Despues de estar dos dias dandole vueltas, pude avanzar.
Dejo los pasos que me ayudaron (en mi caso me faltaba que cada elemento sea un componenete POR SEPARADO)
Crea los botones como componentes individuales (si aún no lo son).* Si no los has hecho componentes aún, selecciona cada botón y presiona Cmd + Alt + K (Mac) o Ctrl + Alt + K (Windows) para convertirlos en componentes.
Saludos.
Para encontrar donde esta la variable de SoloArboles? pueden acceder por el ¿set? "Prueba":
En mi caso, la variable SoloArboles? no estaba creada, así que la cree tipo boolean, true
Ya hace algún tiempo por mi trabajo he estado usando figma y habia cosas que todavia no hallaba como hacerlas mejor, ¡esta clase fue genial!, gracias, aunque si hay que tener una clase previa de variables para poder entender mejor. También pueden profundizar en el tema de variantes con el Curso de Figma: Técnicas Avanzadas de Diseño 🥰
Hola, me podría ayudar para saber como acceder a cuenta estudiantil,ya que no puedo realizar varios ejercicios :(
hay otra manera de realizar esta clase en figma sin usar el premium???
Puedes activar la version estudiante gratis con el mismo correo que usas en Platzi!
Como puedo generar la flecha rosa que conecta el componente de guardado en el frame de expression hacia la variante del componente de guardado donde el color es verde biche?
La flecha rosa muestra la conexión de una interacción. En el ejemplo que se muestra, cuando se hace click sobre el botón guardado sin relleno (componente-1), pasa a ser el botón con relleno verde biche (componente-2). Por eso se ve la flecha rosa, indicando que la interacción es:
'componente-1' --> 'componente-2'.
Ahora, para crear esa interacción sigue estos pasos:
¡Espero que esto te ayude!
La flecha rosada se genera automáticamente cuando copias el componente negro.
Para crear una variable boolean en Figma, primero debes definir el estado de la variable (true o false) en el componente que estás usando. Cuando vinculas un botón a una acción, como encender o apagar un estado, puedes usar "Set Variable" para cambiar el valor de la variable.
El recuadro "guardado" aparece mediante la acción "Open Overlay". Cuando haces clic en el botón, se activa el overlay y se muestra el mensaje de confirmación. Esta interacción incluye un "After Delay" para que el overlay se cierre automáticamente después de un tiempo específico.
En esta clase se avanzó desde los fundamentos del prototipado hacia un nivel más profesional y dinámico usando After-delay, Smart Animate, componentes con variantes y variables en Figma. El profesor comenzó con elementos ya creados, pero aún sin interacciones, pues estaba en modo prototipo.
La primera interacción se construyó conectando un botón a un Overlay. Para lograrlo, se utilizó la opción "Open Overlay", que ya estaba disponible gracias a configuraciones previas guardadas. Se personalizó el Overlay para que apareciera y luego desapareciera automáticamente, aplicando una interacción con After-delay de 1200 ms. Esto dio como resultado una experiencia más fluida y profesional.
Posteriormente, se reemplazó un botón dentro de la interfaz usando el atajo Cmd + Option + Shift + V, y se verificó que la interacción funcionara correctamente: al hacer clic, se mostraba el mensaje de que el sendero fue guardado y luego desaparecía.
Luego, se trabajó con un scroll vertical (Crawl) dentro de un Auto Layout, donde se clasificaron los senderos según si tenían árboles o no. Para esto, se usaron variables que permitían filtrar los elementos visibles al activar o desactivar un botón. Por ejemplo, al activar el botón "árboles", solo se mostraban los senderos que sí los incluían.
El profesor aplicó estas variables desde el menú de apariencia, seleccionando los senderos específicos y asignándoles condiciones. Aunque en algunos casos los elementos aún conservaban su opacidad, no afectaba el scroll ni el diseño visual.
Finalmente, al conectar las variables a la interacción del botón, el sistema respondía dinámicamente, ocultando o mostrando elementos según su estado. Esto hizo que el prototipo comenzara a sentirse más cercano a una aplicación real con lógica, lo que dio una sensación mágica del potencial que tiene el prototipado avanzado.
alguien sabe como hiso ese procedimiento en el minuto: 3.39?
Por alguna razón no explica como hacer la variante. resulta que era cuando creas un componente hay una opción de crear variante arriba a la derecha es la tercera opción de derecha a izquierda.
