Interactive Components avanzados

Clase 15 de 19 • Curso de Figma Avanzado

Contenido del curso

Introducción y community

AutoLayout y Variants

Design Systems

Prototipado

Plugins

Despedida

Tomar examen

Comentarios

Abiel Oswaldo Robledo Montoya

student•

Figma cada día está llegando más lejos, es genial el progreso que ha tenido en estos años. ¡Desde años lo uso, pero nunca había profundizado tanto!! Este curso es genial.

Paolo Carrion

student•

I totally agree.

Jimmy Caicedo

student•

Hola! Les comparto un avance de un proyecto personal en el que estoy trabajando y que desarrollé más a profundidad con este curso 😎

Tania Hernández Martínez

student•

Los interactive components hacen referencia a la lógica de los frames en animaciones, son layers con micro movimientos que unidos como variants recrean una"accion" que buscamos resaltar. Cuando Figma rescata esa lógica para la construcción de los prototipos hizo mucho mas fácil la ejecución de los Diseñadores!

Hrach Kaderyan Midence

student•

En el minuto 9:39 el video salta a una parte avanzada de la explicación y no se entiende que termina de hacer con las animaciones, esta a mitad de la creación de las animaciones y de ahí salta a borrar el frame 9 y de paso ya se ve que montó la animación en el landing page

Angie Tathiana Reyes Muñoz

student•

Exacto, he tratado de seguir cada paso exacto y después de ese corte ya no me funciona la animación...

Anayet Aranda

student•

Me paso lo mismo, sin embargo ya pude saber que hizo.... después de terminar de hacer el carrousel, borran el frame 9 como dice ahi y en seguida se van a assets y ahi van a encontrar el componente Corrousel que crearon, lo arrastran a su área de trabajo y ese es el que ya se va a reproducir en su versión final.

David Santiago Gaona Rodríguez

student•

¿Alguien sabe porque dentro de figma no me aparece la opción variants? ¿Cómo podría activarla?

Leiver Choconta Gomez

student•

Hola David, cuando tengas dos elementos seleccionados, puedes cliquear en la opción superior "Create components", y allí te aparecen distintas opciones, debes seleccionar "create component set" ya que agrupa distintos componentes y allí podrás sumar todas las variantes y propiedades que necesites.

Luisa Perez

student•

Hola! no he podido hacer la animacion del carousel y no se porque hay alguna manera especifica que se tiene que conformar el frame de las fotografias? o no se cual sera el problema pero no sucede la animacion

Ita marquez

student•

yo tampoco pude :( si encuentro solucion te la comparto :(

María Valentina Reyes Leon

student•

Muy bueno me encanta este curso

Julio Servan

teacher•

Muchas gracias Maria Valentina! Cualquier duda ya sabes donde estoy. Un saludo!

Gisy Natali Zambrano Montecinos

student•

Acabo de duplicar el archivo de los recursos y no me sale esto, solo un cuadro negro, que puede ser?

Carlos Pérez

student•

a los 10min deja de verse lo que esta configurando el profesor

María Alejandra Paz Arce

student•

Si la plataforma que estoy haciendo tiene versión mobile y desktop, tengo que hacer dos archivos aparte?

Brayan omar cabrera diez

student•

Nuevo link de los componentes interactivos actualizados. Componentes

Diana Aldana

student•

Si alguien le ocurrió como a mi, que se quedó a mitad de camino con la explicación, aquí les dejo el link de un video que me ayudó muchísimo a entender como hacer el carrusel, espero les sirva 😃

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

Jandry Delgado Godoy

student•

Me salvaste....

Yeraldine Ladino Figueroa

student•

Super, aunque tuve un problema, pero entendí todo. Gracias.

https://www.figma.com/proto/tSGyVUtcvxQPCJ6W9BHkQc/Figma-avanzado.1?page-id=2%3A204&node-id=14%3A238&viewport=1242%2C2242%2C0.6&scaling=min-zoom

Juan David

student•

Justo queria realizar esta animacion y no tenia idea de como hacerla, esta clase me salvó :3

Dario Espinosa

student•

Para selección rápida, ubicate en digamos la opción padre, es decir, vete adonde están las capas. en este caso selecciona la capa de algún variant, dale clic, luego presiona Enter en tu teclado y veras que selecciona todo el contenido, en este ejemplo seleccionará todas las capas de fotos Personas, en lugar de hacerlo a mano como lo hace en el video, el enter te ayuda a navegar seleccionando los layers de padre hacia hijo

Miguel Rendón

student•

Gracias por la data! es mucho más rapido. Yo lo estaba haciendo con shift, tenía que seleccionar el elemento padre para desplegar los elementos hijos y una vez allí seleccionaba al primer elemento hijo y oprimia shift + clic al ultimo elemento hijo, de esa manera se seleccionaban todos los elementos que estaban entre estos dos.

Sebastian Heredia

student•

Esto esta realmente increíble, poco a poco Figma nos permite realizar cualquier cosa que imaginemos.

Julio Servan

teacher•

Verdad que sí? Llega un momento en el que el límite es tu imaginación! Comparte con la comunidad tus progresos!

Julio Servan

teacher•

Exacto, el límite es tu imaginación!

Guzman Geraldine

student•

Animación

Iván Sánchez

student•

No me quedó claro y no pude hacerlo, pasaré a la siguiente video.

SANTIAGO D ANDRE

student•

Yo tampoco, no me scrolea el carrousel, intente de varias maneras y no lo he logrado

Leiver Choconta Gomez

student•

Hola Ivaan & Santiago, alguna duda sobre cómo tienen propuesto su diseño y que podamos resolver con la lección del profesor?

Lorena Gambarrota

student•

Hola muy buenas!! en esta clase el recurso no esta guardado, solo aparece la caratula. Donde puedo descargarme el recurso? muchas gracias! saludos

Guzman Geraldine

student•

En enlace solo tiene la imagen de presentación ?

Sura Naileth Cedeño Lopez

Team Platzi•

Hola:wave: Tiene la imagen para que puedas duplicarla en tu tablero.

Interactive Components avanzados

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?