• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página

Juanpol

Diseño UX y UI / Creación de productos digitales

  • Inicio
  • Tutoriales de Figma
  • Blog
  • Newsletter
Figma / Los componentes interactivos de Figma

Los componentes interactivos de Figma

Durante el evento Config Europe 2020 Dylan Field anunció la implementación de los componentes interactivos de Figma. El CEO también habló sobre el tema en el post que publicó unas horas después de la conferencia.

componentes interactivos figma
Los componentes interactivos de Figma

Cuando supe que en algún momento íbamos a poder crear prototipos más reales, con más rapidez, facilidad y mejores interacciones me puse a contar los días con mucha ilusión.

Hoy 25 de febrero de 2021 Figma ha publicado una nota en su apartado de releases para anunciar que abre la beta de los componentes interactivos.

Lo sabes de sobra, es muy valioso poder ver y probar todas o casi todas las opciones y funcionalidades de los productos que creamos. Todos los integrantes del equipo se beneficiarán de una herramienta como la que Figma nos ofrecerá en breve.

componentes interactivos para crear prototipos
Aquí tienes el Canvas de Figma con alto contraste para ver en detalle las interacciones que he creado entre los componentes interactivos y los Frames de nuestro diseño de prueba, sigue leyendo para encontrar más información

Justamente hoy en mitad de una reunión le propuse a mis compañeros crear una serie de prototipos rápidos antes de pasar a la fase de UI design. Estoy seguro que esta nueva herramienta nos ayudará a realizar mejor nuestro trabajo.

Como ya lo hago con otros seguiré curando este post a medida que vaya llegando información, durante mis pruebas, etc.

Cómo crear componentes interactivos con Figma

Antes de explicar los pasos que debes seguir para crear componentes interactivos quiero compartir las palabras que mentalmente me dije a mí mismo cuando Figma hizo el anuncio de esta nueva funcionalidad.

«Los componentes interactivos de Figma son pequeños prototipos dentro de un prototipo mayor.»

Si sabes trabajar con los prototipos de Figma entenderás lo que quería decir con mis pensamientos. Con esta nueva funcionalidad ganaremos control sobre los prototipos que hacemos y sobre todo tiempo. 

Ahora veamos cuáles son los pasos para crear componentes interactivos. Usaré como ejemplo la prueba simple y rápida que hice para ilustrar este artículo.

Crear interacciones entre las variantes de un componente

El primer paso es crear las interacciones entre las variantes de un componente. Evidentemente para hacerlo debemos antes haber creado el componente y sus Variants.

variants de un componente interactivo de figma
Un componente interactivo con sus variantes

En la captura anterior puedes ver el componente y un detalle del panel Variants donde se puede ver cómo las he organizado, por tipo (Types) y estado (States).

Para crear las interacciones debemos:

  • Pinchar en la pestaña Prototype del sidebar derecho de Figma.
  • Seleccionar dentro del componente la variante inicial de la interacción que vamos a crear.
  • Pinchar en el botón (+) que aparece en el margen derecho del cuadro delimitador.
  • Arrastrar la interacción hasta la variante destino.
  • Por último utilizaremos el panel Interactions para ajustar los detalles de la interacción (cómo se lanza, animación, etc).

Las interacciones sólo funcionan entre variantes de un mismo componente.

Cómo utilizar un componente interactivo

El segundo paso es utilizar los componentes interactivos en los prototipos que hagamos.

interacciones de un componente interactivo de figma
Interacciones entre las variaciones de un componente de Figma

¿Cómo usar los componentes?

  • Arrastrar el componente a uno de los Frames de nuestro diseño. No hay misterio, haremos lo mismo que hacemos con los componentes normales.
  • Crear las interacciones deseadas entre los componentes y los Frames.
  • Podemos incluso añadir más de una interacción utilizando diferentes disparador o triggers.
  • Editar las interacciones en la instancia de un componente interactivo, siempre que nuestro prototipo y diseño así lo requieran.

A partir de aquí imaginación al poder, las necesidades de nuestro proyecto nos llevarán a combinar todas las posibilidades que nos ofrecen los componentes interactivos.

Si deseas saber más sobre las interacciones que podemos usar te recomiendo leer el post dedicado a la creación de prototipos en Figma.

Por mi parte seguiré creando ejemplos de uso de componentes interactivos, algunos de ellos con más complejidad.

Crear tu propio diseño utilizando los componentes interactivos

Si quieres copiar y usar el archivo que hice para probar los nuevos componentes interactivos de Figma puedes acceder al mismo siguiendo el enlace del párrafo siguiente.

Realiza una copia del archivo en tu cuenta de Figma y úsalo para probar la nueva herramienta.

Si creas un nuevo diseño utilizando parte del mío por favor cita la fuente, muchas gracias.

Pruebas con los componentes interactivos

24 horas después de hacer el registro para sumarme a la beta me llegó un correo electrónico dándome la bienvenida a la beta de los nuevos componentes interactivos de Figma.

En el mensaje decían que la nueva función se ofrecerá a todos los usuarios en unos meses y que la empresa estará encantada en recibir comentarios, preguntas, notificación de errores y peticiones de funciones extra por partes de los usuarios que nos unimos a la beta.

Además nos invitaron a una demostración en vivo en la que el equipo de producto dará consejos, compartirá trucos y responderá preguntas de usuarios. También nos ofrecieron tres enlaces, uno para descargar un archivo de Figma para aprender a usar los componentes interactivos, otro hacia el Foro de Soporte de Figma y otros dos para compartir nuestros archivos en Figma Community y en Twitter.

Aquí te dejo un pequeño avance para veas el funcionamiento de esta prueba fácil con lo nuevos componentes de Figma

También nos recordaron que probaremos una versión beta por lo tanto nos recomiendan no utilizar esta nueva función en proyectos importantes, de trabajo, etc.

Por último nos dijeron que si teníamos alguna pregunta podíamos ir al Centro de ayuda donde encontraremos toda la documentación necesaria.

Únete a la beta de los componentes interactivos de Figma

La versión beta de componentes interactivos ha finalizado y la función ya está disponible para todos los editores de Figma.‎

Si deseas probar los componentes interactivos puedes registrarte ahora mismo completando un formulario electrónico.

Si quieres ser una de las primeras personas en incorporarlos en sus diseños date de alta y prepárate. Después de introducir tus datos te llegará un correo electrónico con más información y un link para añadir el evento a tu calendario.

Figma no deja de crecer y nos esperan muchas horas de aprendizaje e implementación, es una tarea ardua pero al mismo tiempo apasionante.

Aprende a usar Figma, Sketch y Webflow

Suscríbete gratis para recibir notificaciones cuando publique nuevos contenidos.

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Información de privacidad

En este sitio web te solicito algunos datos para enviarte correos electrónicos con las publicaciones que hago. Finalidad de los datos: Enviar correos electrónicos con las novedades publicadas en el blog. Legitimación: Aceptación expresa de la política de privacidad. Almacenamiento de los datos: Base de datos alojada en Siteground España. Duración: Hasta que lo solicites. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

juanpol

Acerca de Juanpol

Product Designer, Diseñador UX/UI y creador de contenido con 29 años de experiencia. Trabaja en Freepik Company.

Interacciones con los lectores

Comentarios

  1. Foto del avatarLena dice

    1 marzo, 2021 a las 20:00

    Genial Juanpol! Interesante y práctico artículo para los que nos estamos iniciado en este mundo, gracias!

    Responder
    • juanpolJuanpol dice

      1 marzo, 2021 a las 20:08

      Muchas gracias a ti amiga Lena!

      Responder
  2. Foto del avatarAnn dice

    22 julio, 2021 a las 17:49

    Ya me llego el mail pero no se como activar los componentes, me podras ayudar?

    Responder
    • juanpolJuanpol dice

      22 julio, 2021 a las 18:05

      Ann, si tu cuenta ya puede crear y editar componentes interactivos sólo falta que te pongas con ellos. En este post hay información sobre el tema. ¿Necesitas algo más? ¿Quieres que haga una clase en vídeo para explicar cómo crearlos?

      Responder
  3. Foto del avatarIrene dice

    4 octubre, 2021 a las 10:08

    Hola! yo tengo una consulta. Estoy probando los componentes interactivos con mis imputs, pero el problema es que mi textfield tiene en estado default el label donde al hacer focus está el texto input. Es decir que hace como una animación de que sube hacia arriba. El problema es que cuando lo aplico con componentes interactivos, el texto del input no me cambia a lo que yo deseo en el flujo, sino que me coje el por defecto del componente en la librería. No tengo forma de definir en el flujo que ese texto de input deberá ser por ejemplo «Juan», sino que al empezar el flujo con estado default (sin texto input), no me carga el nuevo específico del flujo. ¿Alguien sabe como solucionarlo?

    Responder
    • juanpolJuanpol dice

      4 octubre, 2021 a las 11:44

      Irene, podrías darme acceso a tu archivo? eso me permitirá saber cómo está construido. Quizás puedas subirlo a Community para que pueda hacer una copia, encontrar una solución y finalmente avisarte. ¿Qué te parece? Gracias.

      Responder
    • Foto del avatararantxa dice

      13 enero, 2022 a las 12:00

      hola!tengo esta misma duda, como cambias el texto?lo has solucionado?

      Responder
  4. juanpolJuanpol dice

    13 enero, 2022 a las 12:05

    Hola Arantxa… en breve publicaré un vídeo para explicar cómo hacerlo.

    Responder
  5. Foto del avatarMaria dice

    17 diciembre, 2022 a las 3:51

    Juanpol soy nueva en todo este mundo. no se como explicar lo que pasa pues tengo poco tiempo de estar estudiando. estoy creando un prototipo y creo que hago todos los pasos necesarios para la interacción pero al momento de ver mi proyecto me sale todo en desorden, incluso las imágenes no salen.

    Responder
    • juanpolJuanpol dice

      17 diciembre, 2022 a las 12:18

      Hola María, sin poder ver el archivo de Figma donde tienes tu prototipo podría decirte que:

      1) Compruebes si hay un frame marcado como Start (punto de inicio del prototipo)

      2) Si los frames están desordenados, comprobaría que las conexiones entre ellos están bien hechas, con los triggers correctos, etc.

      3) Si hay elementos que no aparecen en el prototipo, comprobaría si dichos elementos están dentro de los frames (pantallas) que componen el prototipo, algunas veces estos elementos si bien se ven «dentro» de los frames, en realidad sólo están ubicados en un layer (o capa) superior a la capa donde se encuentra el frame.

      Como te decía, si pudiera ver tu archivo me daría cuenta rápidamente de los errores que tiene, pero sin verlo sólo puedo compartir aquí algunas ideas.

      Échale un ojo y cualquier duda me avisas, gracias!

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


En este sitio web te solicito algunos datos para poder moderar y responder comentarios de usuarios. Responsable de los datos: Juan Pablo Olmo / Finalidad de los datos: Gestionar los comentarios y evitar el spam. / Legitimación: Aceptación expresa de la política de privacidad. / Almacenamiento de los datos: Base de datos alojada en Siteground España. / Duración: Hasta que lo solicites. / Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Juanpol

Juanpol

Diseño UX y UI / Creación de productos digitales

  • info@juanpol.com
  • LinkedIn
  • YouTube
  • Telegram
  • Twitter

  • Aviso legal, Privacidad y Cookies

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes informarte más sobre ellas en los

Resumen de privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes cambiar la configuración u obtener más información consultando la política de cookies.

Cookies de terceros

Esta web utiliza herramientas de estadística para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies.