Variants de 0 a 100
Clase 9 de 19 • Curso de Figma Avanzado
Contenido del curso
Sebastian Heredia
student•
hace 4 años
Guzman Geraldine
student•
hace 4 años
Helen Natasha Cordova Pata
student•
hace 4 años
Sebastian Heredia
Guzman Geraldine
Helen Natasha Cordova Pata
Andy Fernando Salazar Monterrosa
Martin Coronel
Santiago Ramirez
Yusting Andrés Mora González
Bryam Joseph Cavero Echevarria
Violeta María Pugliese
Diana Aldana
SANTIAGO D ANDRE
Jeisson Espinosa
Bryan C. Orellana
Daisy Arcos
María Valentina Reyes Leon
Paolo Carrion
arturo
Pablo Antipan Quiñenao
Paolo Carrion
José Reinaldo Duque Serna
Noelieth Mariana Lanza Longart
Edhu Nuñez Alvarado
Alexis Acosta
Karen Valdivia
Dani Landa
María Luisa Barboza Restrepo
Nidia Liz Alvarez
Jimena Haran
Esta es la función mas genial que he visto en figma no se como diablo nunca la había usado. ¡Gracias!
me paso igual
Recién estoy aprendiendo, y siii es geniaaal!! :)
En las clases que llevo he notado algunas malas prácticas. Como autolayouts infinitos; también el haber comenzado a diseñar sin antes haber hecho los componentes con sus variantes. Siento que el curso no está bien estructurado.
Andy excelente comentario, esto es realmente una mala practica, ya que yo defino los coponentes primero y después diseño las interfaces, pero con las tantas idas y vuelta con los desarrolladores, me recomendaron diseñar todo, y cuando este resuelto armar los componentes, alguien me podría confirmar sobre esto, muchas gracias.
Yo siento lo mismo. Entiendo que es un curso avanzado por lo que ya deberíamos tener el conocimiento necesario y buenas practicas. Pero él nunca las usa o recomienda usarlas..
A mi me explotó la mente cuando descubrí que las variants pueden usarse con las funciones de prototipe y hacer las animaciones de manera muuuuuuuuy sencilla.
Solo miren esa locura que tuve que hacer para el menú lateral de una web.
Madre mía, entiendo que cuando pasamos a prototipo salen las telarañas jaja. ¿Sabes alguna forma de poner por ejemplo colores a las líneas cuando prototipamos?
VARIANTS Permite crear variantes de un mismo componente según sus propiedades. Por ejemplo un botón en sus distintos estados: hover, focus o deshabilitado. O distintos tipos de botones, por ejemplo filled / outline. Es buena práctica crear los componentes en una página aparte. Quedan almacenados como recursos reutilizables en Assets.
Sinceramente he tenido que buscar tutoriales en YouTube para poder entender más a profundidad este curso, tristemente dice ser un curso avanzado, pero parece más un curso supremamente básico.
Prueba de Componentes y variantes para Boton e icono Primario: Standard, Hover, Pressed e inactive Secundario: Standard, Hover, Pressed, Inactive Terciario: Standard, Hover, Pressed, Inactive
Información resumida de esta clase #EstudiantesDePlatzi
Un variant podemos entenderlo como un componente que tiene cierto estado, pero que puede tener varias instancias con estados diferentes
Es importante ir haciendo los ejercicios para crear una mejor sinapsis
Una buena practica es tener los componentes en una página aparte
Un componente tiene su icono que lo hace reconocible
No se puede combinar como variants si no son componentes
Los componentes que hemos creado los podemos encontrar en la pestaña de Assets
Interesante
Podríamos considerar también el botón de tipo ICON, para identificar el icono de la Lupa.
Entre a este curso por que pense que sería un curso más estructurado, pero parece un curso de figma básico. Hay muchas malas practicas, como no poner nombre de los frames, no hacer elementos madres o bases, no se si eso lo normal. AUnque hace muchos autolayouts a veces. no es malo, recuerden que una pagina es acomodar un moton de cajas.
ESTO ME VOLO LA CABEZA AMO DEMASIADO FIGMA
Los Variants me recuerdan a el estado de los componentes en React.js.
Hola profesor quisiera saber cuales son las medidas que debemos aplicar a un boton para diseñarlo en web. O si hay alguna guia para trabajar con medidas reales sin dar medidas random por asi decirlo. Gracias
Hola Arthur! Quizas lo que estas buscando son patrones! Esta clase te puede servir para ello
igualmente, no dejes de revisar la escuela de producto
Saludos!
Hola Arturo 😀 No existe una medida exacta que indique qué tamaño de botón se debe de usar en una pagina web. Todo dependerá de su importancia en la interfaz y de la posición en la que esté. Para que puedas tener una mejor referencia sobre la composición de los elementos de un sitio web te recomiendo que leas la documentación de Material Design, ahí te explican a detalle el tema.
Comparto un video de Figma acerca del uso de Variants. Está genial!
Esta función y auto-layout son simplemente ✨genial ✨
Que fantastica función
Me encanta la manera en que se puede optimizar tanto trabajo mediante esta función. Está genial.
Consulta sobre buenas prácticas, por ejemplo si tengo variantes de botones, los cuales pueden tener recuadros y otros solo pueden ser tipo texto underline, se recomienda crear átomos de los textos antes de hacer las mil variantes de botones que incluyen sus estados como default, hover, focus,etc. para sólo aplicar el cambio al texto componentizado inicial, o debería crear todos los botones en forma de moléculas ya hechas (cuadro + texto) sin antes atomizarlas y hacer el cambio ahí. No quiero sobrecomponentizar elementos, pero si conocen una buena práctica, me ayudarían harto. Gracias :)
¡Hola Karen! Sí, siempre usar la metodología de atomic design. Que habla de crear moléculas y átomos de los elementos, es mucho más fácil trabajar con esta metodología y tenemos muchos cursos que hablan de esto, todos los puedes encontrar en la escuela de Product Design.
¡Saludos!
Mi actividad de esta clase
No tengo el botón "Empresas"así que lo hice con el mismo de iniciar sesión
