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.
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.
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.
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.
¿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.
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.
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.
Genial Juanpol! Interesante y práctico artículo para los que nos estamos iniciado en este mundo, gracias!
Muchas gracias a ti amiga Lena!
Ya me llego el mail pero no se como activar los componentes, me podras ayudar?
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?
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?
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.
hola!tengo esta misma duda, como cambias el texto?lo has solucionado?
Hola Arantxa… en breve publicaré un vídeo para explicar cómo hacerlo.
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.
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!