Microinteracciones con variantes en Figma

Curso de Figma: Técnicas Avanzadas de Diseño

Contenido del curso

Cómo iniciar los proyectos en Figma

Diseño Responsive y Técnicas Avanzadas

Crea componentes avanzados

Variables en Figma

Inteligencia Artificial para Figma

Crear Landing Pages con Figma

Interacción Avanzada con Prototipos

Prototipado avanzado con Figma

Cómo trabajar con los equipos de desarrollo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:49

Microinteracciones con variantes en Figma

Curso de Figma: Técnicas Avanzadas de Diseño

Clase 23 de 29

Clase 23 / 29

Comentarios (13)13 comentarios

Giuliana Armentia Ramirez

Hace 3 años•editado

**Me esta gustando mucho este curso **, realmente acualizaron los que ya tenian de figma!, eso si , estaría bueno que den la opción de subtítulos en los videos porque a veces no se escucha bien lo que hablan los profes ,o simplemente puede pasar que a algún alumno no le ande bien los auriculares y necesite leer mientras va reproduciendo

Marcela Roa

Hace 2 años

Estas son las cosas que si me gustaria aprender a hacer, pero ella solo muestra pero no explica. De todo el curso las animaciones del final en mi caso persona son las mas utiles y no las enseña. :(

Andersson Rios Infante

Hace 2 años

Yo practicare bastante por Youtube.

Yhoshua Bernal

Hace 2 años

Me parecio increible los cambios que pude aportar al aplicar lo del input a mi proyecto

Walkiria Arteaga

Hace 3 años

Holaa, hubo un cambio en la nueva versión y ya no se debe hacer el flujo que se hace desde el panel de prototype en una card aparte sino que se puede hacer desde las propias variantes.

Ocurre que a las variantes nos les sale el nombre de Hover o Click (parece que Figma no los asocia porque son muy parecidos) sino que hay que conectarlos como si fueran frames y allí saldrá una línea hacia el destino.

Si notan algo diferente porfa hagánmelo saber.

Cristian Herrera Periañez

Hace 3 años

Yo creo propiedades pero no me funciona, ella tiene 3 propiedades y yo solo tengo dos: element (button) y state (normal, hover, click), no entiendo como hacerlo

Carmen Ansio

Profesor

Hace 3 años

Hola Christian! ¿Puedes pasar el link al ejemplo, así puedo revisar que te está sucediendo?

Juliana Ordoñez

Hace 3 años

Hola quisiera saber porque no me sale la opcion activa de change to y como puedo activarla? ![](

Jose Basanta

Hace 2 años

me ocurre lo mismo

Jose Basanta

Hace 2 años

ya resolvi, tienes que seleccionar el botton el layer correcto

Melissa Ortíz

Hace 3 años

Hola, quisiera saber que hacer si no me aparece la opción "On click"

Carmen Ansio

Profesor

Hace 3 años

Hola Melissa!

Estas son las opciones que me aparecen al crear una nueva interacción en un prototipado imágen

RICARDO ANDRES MALAVE RODRIGUEZ

Hace 3 años

Hola Melissa, me solía confundir mucho con esa misma situación en figma. Hasta que descubrí que eso sucede cuando a un objeto que ya le tienes aplicado la opción de On Click esta se suprime del menú de interacciones ya que un solo objeto no puede tener más de una interacción del mismo tipo. Solo es que le des una revisada a tu objeto para ver si ya tiene aplicada una interacción. Saludos!

Candy Pérez

Hace 3 años

Cree un Menú deslizable y le eh dado la interacción de sombra cuando pasa por cada elemento (Texto con icono)sin embargo note que en algunas se desliza y sombrean el texto e icono al mismo tiempo y en otras se desliza antes el icono y luego el texto para luego sombrearlo, no se porque pasa si ambas interacciones las hice completamente igual ¿alguien sabe que onda? 🥲

Carmen Ansio

Profesor

Hace 3 años

Hola Candy! Si incluyes la url con el ejemplo al archivo de Figma le puedo echar un vistazo.

Carolina Gómez

Hace un año

Objetivo:

Aprender a crear botones y componentes interactivos sin necesidad de duplicar pantallas, utilizando Variants y el panel de prototipado en Figma.

Pasos principales trabajados en clase

Revisar la Card creada en el curso — Verificar que todo funcione correctamente antes de seguir.
Crear interacciones en el botón — Agregar distintos estados del botón:
- Estado Fall (normal)
- Estado Hover
- Estado On Click — Ya no se usa "Navigate to" entre pantallas duplicadas, sino que se trabaja todo dentro del componente.
Uso de Variants para los estados — Dentro del componente botón:Element: Button
- Property2: ButtonProperty3: Hover — Crear los tres estados duplicando el botón y asignándolos como variantes.
Configurar interacciones en el panel de prototipado — Hacer clic en el botón → Agregar interacción:
- On hover → cambiar al estado "hover"
- On click → cambiar al estado "clicked"
Personalizar el flujo — Cambiar el nombre del flujo desde el panel derecho (barra azul o lápiz). — Añadir una descripción útil para el equipo de desarrollo.

Ejemplos vistos en clase

Un listado con hover y cambio a estado tachado al hacer clic.
Uso de estados Check, Hover, y Tachado en un solo componente.
Cómo se pueden simular interacciones complejas aunque no sean 100% funcionales (como rellenar campos de texto de forma "fake").
Uso de delays y transiciones automáticas para mostrar el flujo de interacción.

Finalidad

Mejor comunicación con el equipo de desarrollo: Las interacciones creadas permiten visualizar claramente cómo debe comportarse el diseño.
Optimizar prototipos: Evitar pantallas duplicadas y mostrar animaciones realistas dentro de un solo componente.

Cristian Martinez

Hace 2 años

Excelente, creo que era justo lo que estaba buscando para darle vida a mis prototypes

Danna Lucia Alfonso Valderrama

Hace 3 años

Hola equipo platzi necesito una ayuda... estoy intentando hacer el check list y tengo el siguiente problema:

Al intentar modificar el texto del imput check se modifica en el estado inicial y en los otros dos estados no cambia el texto

Como puedo lograr que el texto sea dinamico y no este anclado a la variable?

Agradezco su apoyo

Rubén Vega

Hace 3 años

Muy buen curso, la verdad

Erika Ramirez

Hace 3 años

Me ha encantado esta clase, me va servir muchísimo, de aqui en adelante ahorrare mucho tiempo haciendo este tipo de interacciones.

Gracias Carmen =)

Un beso desde México

Recursos

Diseñar microinteracciones en Figma con componentes interactivos te permite mostrar cambios de estado realistas en botones y elementos sin duplicar pantallas. Aquí verás cómo configurar hover, click y animaciones falsas de inputs usando variantes, ideal para diseñadores UI/UX que quieren entregar prototipos claros al equipo de desarrollo.

¿Por qué usar componentes interactivos en lugar de duplicar pantallas?

Antes, cuando querías mostrar el cambio de estado de un botón, duplicabas la tarjeta completa, cambiabas el color y conectabas las pantallas desde el panel de prototipado. El problema es que esa técnica no anima el botón: salta entre pantallas y confunde al usuario.

Con los componentes interactivos, el cambio ocurre en el propio elemento. El usuario ve que el botón reacciona, no que la pantalla cambia.

¿Qué es un componente interactivo en Figma? Es un componente con variantes que cambian de estado dentro del mismo elemento, sin necesidad de duplicar frames ni saltar entre pantallas.

¿Cómo crear las variantes de un botón con estados hover y click?

Partimos de la tarjeta original con un botón en estado por defecto. Para sumar los otros dos estados, seleccionas el componente y usas el panel de variantes para añadir nuevas opciones con el botón de “más”.

Los tres estados que vas a definir son:

Primary: el estado por defecto, con el azul claro original.
Hover: cambias el color a un violeta o lila para indicar que el cursor está encima.
Click: aplicas un tono más oscuro para señalar que el botón fue presionado.

Nombrar cada variante de forma semántica es clave. Si las llamas “hover” y “click” en lugar de “botón 2” o “botón 3”, te será mucho más fácil conectarlas después en el panel de prototipado [02:30].

¿Dónde se configura la interacción dentro del componente?

En el nuevo panel de prototipado, a la derecha, seleccionas el botón y añades una interacción. La primera regla la configuras así: cuando haya un hover sobre el botón, cambia de la variante primary a la variante hover.

Luego pulsas el símbolo de “más” para sumar una segunda interacción: cuando haya un click, cambia de primary a click. Un mismo elemento puede tener varias interacciones encadenadas.

Para verlo funcionando, pulsas play y entras al preview. Al pasar el cursor verás el cambio al lila, y al hacer clic notarás el tono oscuro activarse.

¿Qué otras microinteracciones puedes prototipar con variantes?

La misma lógica se aplica a interacciones más complejas. Un ejemplo claro es una to-do list: al pasar el cursor sobre un ítem se resalta, y al hacer clic el texto se tacha.

Para lograrlo solo necesitas dos variantes principales:

Una variante de check, que controla el estado del checkbox.
Una variante de card, que controla el estilo del ítem (normal o tachado).

La configuración sigue el mismo patrón: con hover cambias a un estado intermedio, y con click pasas al estado tachado o de regreso al default. Esta claridad ayuda a que el equipo de desarrollo implemente el efecto exacto que diseñaste [05:10].

¿Se pueden simular inputs que se llenan solos?

Figma tiene una limitación: no puede poblar campos de texto con información real. No puedes escribir dentro de un input como lo harías en una app funcional. Pero sí puedes falsear esa animación para que parezca que el usuario está escribiendo.

La técnica consiste en crear varias variantes del input con el texto en distintos momentos y conectarlas con delays automáticos entre estados. Así el prototipo transiciona solo, mostrando cómo el cursor cambia de flecha a mano al hacer hover, y cómo aparece la animación del input al hacer clic.

¿Para qué sirve falsear una animación en Figma? Para comunicarle al equipo de desarrollo cómo debería verse y comportarse la interacción final, aunque Figma no pueda ejecutarla de forma nativa.

¿Cómo organizar tus flujos de prototipado para que sean claros?

Dentro del panel de prototipado puedes renombrar cada flow haciendo clic en la etiqueta azul o desde la barra de navegación derecha. También puedes usar el ícono del lápiz para editar el nombre o agregar una descripción de cuándo se usa esa interacción.

Esta organización es especialmente útil cuando entregas el archivo a tu equipo de desarrollo. Un flow llamado “button animation” con una descripción clara vale más que diez frames sueltos.

Usar variantes con nombres semánticos, encadenar interacciones de hover y click en el mismo componente, y simular animaciones de inputs son las tres prácticas que convierten un prototipo estático en una experiencia que tu equipo puede traducir a código sin ambigüedades.

¿Qué microinteracción quieres prototipar primero en tu próximo proyecto? Cuéntame en los comentarios.

Resumen

¿Por qué usar componentes interactivos en lugar de duplicar pantallas?

Con los componentes interactivos, el cambio ocurre en el propio elemento. El usuario ve que el botón reacciona, no que la pantalla cambia.

¿Qué es un componente interactivo en Figma? Es un componente con variantes que cambian de estado dentro del mismo elemento, sin necesidad de duplicar frames ni saltar entre pantallas.

¿Cómo crear las variantes de un botón con estados hover y click?

Los tres estados que vas a definir son:

Primary: el estado por defecto, con el azul claro original.
Hover: cambias el color a un violeta o lila para indicar que el cursor está encima.
Click: aplicas un tono más oscuro para señalar que el botón fue presionado.

¿Dónde se configura la interacción dentro del componente?

Luego pulsas el símbolo de “más” para sumar una segunda interacción: cuando haya un click, cambia de primary a click. Un mismo elemento puede tener varias interacciones encadenadas.

Para verlo funcionando, pulsas play y entras al preview. Al pasar el cursor verás el cambio al lila, y al hacer clic notarás el tono oscuro activarse.

¿Qué otras microinteracciones puedes prototipar con variantes?

La misma lógica se aplica a interacciones más complejas. Un ejemplo claro es una to-do list: al pasar el cursor sobre un ítem se resalta, y al hacer clic el texto se tacha.

Para lograrlo solo necesitas dos variantes principales:

Una variante de check, que controla el estado del checkbox.
Una variante de card, que controla el estilo del ítem (normal o tachado).

¿Se pueden simular inputs que se llenan solos?

¿Para qué sirve falsear una animación en Figma? Para comunicarle al equipo de desarrollo cómo debería verse y comportarse la interacción final, aunque Figma no pueda ejecutarla de forma nativa.

¿Cómo organizar tus flujos de prototipado para que sean claros?

Esta organización es especialmente útil cuando entregas el archivo a tu equipo de desarrollo. Un flow llamado “button animation” con una descripción clara vale más que diez frames sueltos.

¿Qué microinteracción quieres prototipar primero en tu próximo proyecto? Cuéntame en los comentarios.

Cómo iniciar los proyectos en Figma

Diseño responsivo en Figma con Atomic Design

Cómo construir una card con Atomic Design

Estilos y librerías compartidas en Figma

Diseño Responsive y Técnicas Avanzadas

Cómo crear una grid de 12 columnas en Figma

Constraints en Figma para diseño responsive

Menú responsive con Auto Layout y constraints

Wrap y min/max width en Figma Auto Layout

Cómo usar el design system en Figma

Ensamblando una interfaz mobile en Figma

Breakpoints y Responsively para probar diseño responsive

Crea componentes avanzados

Componentes y variantes en Figma con Atomic Design

Propiedades de Componentes en Figma para Diseños Flexibles

Copies dinámicos en Figma con Google Sheets

Variables en Figma

Variables en Figma: Creación y uso para diseño eficiente

Traducciones automáticas en Figma con variables

Inteligencia Artificial para Figma

Genera iconos, copies e imágenes con Magician

Muse y Builder contra la página en blanco

Crear Landing Pages con Figma

Crea briefings y sitemaps con IA en Figma

Paleta de Colores Corporativos para Banco Transfer

Wireframes de landing page en tres secciones

Landing page responsive con Auto Layout en Figma

Interacción Avanzada con Prototipos

Creación de Microinteracciones en Figma: Guía Paso a Paso

Microinteracciones con variantes en Figma

Prototipado de Navegación en Figma: Interacciones y Animaciones

Prototipado avanzado con Figma

Cómo dar y recibir feedback constructivo en proyectos de diseño

Diseño Web Responsive con Figma y Atomic Design

Documentación de Diseño en Figma: Elementos y Plugins Esenciales

Cómo trabajar con los equipos de desarrollo

Dev Mode de Figma para desarrolladores

Figma dentro de Visual Studio Code

Microinteracciones con variantes en Figma