Variants de 0 a 100

Clase 9 de 20 • Curso de Figma Avanzado

Clase anteriorSiguiente clase

Sebastian Heredia

student•

Esta es la función mas genial que he visto en figma no se como diablo nunca la había usado. ¡Gracias!

Guzman Geraldine

student•

me paso igual

Helen Natasha Cordova Pata

student•

Recién estoy aprendiendo, y siii es geniaaal!! :)

Andy Fernando Salazar Monterrosa

student•

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.

Martin Coronel

student•

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.

Santiago Ramirez

student•

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..

Yusting Andrés Mora González

student•

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.

Bryam Joseph Cavero Echevarria

student•

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?

Violeta María Pugliese

student•

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.

Diana Aldana

student•

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.

SANTIAGO D ANDRE

student•

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

Jeisson Espinosa

student•

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

Bryan C. Orellana

student•

Podríamos considerar también el botón de tipo ICON, para identificar el icono de la Lupa.

Daisy Arcos

student•

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.

María Valentina Reyes Leon

student•

ESTO ME VOLO LA CABEZA AMO DEMASIADO FIGMA

Paolo Carrion

student•

Los Variants me recuerdan a el estado de los componentes en React.js.

arturo

student•

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

Pablo Antipan Quiñenao

student•

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!

Paolo Carrion

student•

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.

José Reinaldo Duque Serna

student•

Comparto un video de Figma acerca del uso de Variants. Está genial!

https://www.youtube.com/watch?v=y29Xwt9dET0

Noelieth Mariana Lanza Longart

student•

Esta función y auto-layout son simplemente ✨genial ✨

Edhu Nuñez Alvarado

student•

Que fantastica función

Alexis Acosta

student•

Me encanta la manera en que se puede optimizar tanto trabajo mediante esta función. Está genial.

Karen Valdivia

student•

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 :)

Dani Landa

student•

¡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!

María Luisa Barboza Restrepo

student•

Mi actividad de esta clase

Nidia Liz Alvarez

student•

Jimena Haran

student•

No tengo el botón "Empresas"así que lo hice con el mismo de iniciar sesión

Variants de 0 a 100

Introducción y community

Hemos actualizado el curso de Figma Avanzado

Introducción y bienvenida

Figma community: conoce, comparte y remixea

Platzi Card Community

Proyecto Landing Page Multi-idioma

AutoLayout y Variants

¿Qué es y por qué es importante el AutoLayout?

AutoLayout: dirección, paddings, resizing y constraints

AutoLayout dentro de AutoLayout

Variants de 0 a 100

Variants: complejos

Design Systems

Introducción a los sistemas de diseño

Sistemas de diseño en Figma

Prototipado

Construcción de pantallas

¿Qué son los Interactive Components?

Interactive Components avanzados

Plugins

Mejores Plugins

Plugins: multi-lenguaje y diseño dinámico

Despedida

Despedida

Autoevaluación del Curso de Figma Avanzado