¿Qué son los Interactive Components?

Clase 14 de 19 • Curso de Figma Avanzado

Clase anteriorSiguiente clase

Mikel Garcia Prieto

student•

Ya no hace falta llenar el forms, creo que ahora todos pueden hacer uso de componentes interactivos!!

Julio Servan

teacher•

Correcto! Desde este fin de semana ya está abierto para tod@s!

Guzman Geraldine

student•

Me encantan los componentes interactivos y su funcionalidad, son tan útiles, antes hacia 5 pantallas :D

Julio Servan

teacher•

Me alegra que te haya gustado! Está genial!

Paolo Carrion

student•

Los Interactive Components hacen que ya no tengamos que crear muchas instancias de un mismo componente para poder conectar los diferentes estados de este, sino que ahora solo es necesario crear una única instancia y esta cambiará según como interactuemos con esta y como hallamos conectado las diferentes variantes de nuestros componentes.

Jimmy Caicedo

student•

https://www.youtube.com/watch?v=ReNbXhaL3Xk&ab_channel=Figma Esta explicación oficial de Figma sobre este tópico es interesante

Juan Esteban Galvis

student•

Lo mejor!!!! 🤩🤩🤩 ya llene el formulario para probarlo porque me parece genial!! el curso ya venia bien pero esta parte me ha gustado bastante

Julio Servan

teacher•

Justo acaban de lanzarlo abierto al público!

Julio Servan

teacher•

Desde este fin de semana ya está abierto para tod@s! No hace falta rellenar el Google Docs! Disfrutadlo y aprended mucho!

Yusting Andrés Mora González

student•

Yo hice los míos y funcionan a la perfección.

Julio Servan

teacher•

Brutal! Qué es lo que más te gustó de esta funcionalidad?

Aarón González

student•

A hoy, ya están disponibles los Interactive Components para los planes de Figma :D

Jeisson Espinosa

student•

Información resumida de esta clase #EstudiantesDePlatzi

La funcionalidad de Figma interactive components nos permite crear interacciones entre nuestros componentes
Puedo conectar las variantes de un componente para que realicen cierta acción dependiendo del trigger

Himar Del rio plata

student•

Cómo crear "interactive components"

Cuando tengas todas las variaciones (variants) de un componente creadas, selecciona el primer componente.
A continuación cambia el inspector a Prototype, haz clic en el + de Interactions (o arrastra el círculo azul al siguiente componente).

La novedad aquí es la opción «Change to», que es la que permite relacionar componentes entre sí. El resto se mantiene como antes, porque continuar indicando que es al hacer hover, al poner el cursor encima, hacer clic, presionar…

Ahora solo te queda continuar añadiendo el resto de interacciones para poder lograr el efecto deseado.

Pedro Isaac Aguilar

student•

Excelente funcionalidad de Figma, por lo que veo es un estuche de monerías al que constantemente le añaden nuevas cosas!! ... Se está volviendo una de mis herramientas favoritas, jeje

María Luisa Barboza Restrepo

student•

comparto mi actividad de la clase

Jimena Haran

student•

Lo usé para el botón de inicio y aproveché para usarlo en un botón de check

Himar Del rio plata

student•

Me parecen súper útiles estos componentes interactivos, ya estoy deseando hacer uso de ellos!

Guadalupe Lucía Fernández

student•

me encantó esta clase, me ahorró un montón de tiempo y pantallas :)

Ehitel Rodríguez Castro

student•

Buenísimo. Yo tengo la funcionalidad activa y completamente funcional.

Me encanta

Juan David

student•

Antes realizaba varias pantallas para lograr esto, ahora con una sola herramienta puedo lograr toda esta animacion :3

Diego Perdomo

student•

Te quiero mucho, Figma.

Diego Perdomo

student•

Interacciones:

Active (datos por default) -> hover -> pressing -> active (datos modificados) -> hover -> pressing -> active (datos por default)

¿Qué son los Interactive Components?

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