Fuente: Figma.com
Figma ha estado ocupada trabajando en muchas funciones nuevas recientemente y una que ha captado mi atención son los componentes interactivos. Esta característica nos permite ensamblar rápidamente componentes interactivos reutilizables y darle vida a nuestros diseños como prototipos en los que se puede hacer clic.
Antes de que se desarrollara esta función, podíamos crear prototipos interactivos, pero implicaba soluciones alternativas y mucho esfuerzo para duplicar y ajustar múltiples fotogramas para demostrar la interactividad. No fue un proceso eficiente a la hora de realizar actualizaciones.
La diferencia con la nueva característica es que podemos definir interacciones entre variantes a nivel de componente. Estas interacciones luego se integran en el componente y estarán disponibles en todas las instancias del mismo.
Anteriormente, uníamos cuadros completos para crear nuestros prototipos. Luego Figma lanzó su función Variantes, lo que nos permite tener múltiples estados de cualquier componente. Sin embargo, esto todavía significaba usar soluciones alternativas para simular interacciones.
Fuente: Figma.com
Como puede ver arriba, para demostrar la interacción con tres casillas de verificación, anteriormente necesitábamos 8 pantallas, que serían todas iguales, excepto por la selección de la casilla de verificación. También necesitaríamos 24 interacciones definidas entre esas ocho pantallas.
La función Componentes interactivos se basa en la función Variantes, lo que nos permite crear interacciones entre las variantes dentro de un componente.
Estas interacciones se pueden configurar para que funcionen en función de una variedad de activadores, más comúnmente “Al hacer clic”, pero también “Al arrastrar”, “Mientras se desplaza”, “Mientras se presiona” y otros activadores. “Después del retraso” es útil y lo analizaré más adelante. Esto nos permite producir animaciones después de un retraso predefinido, es decir, sin ninguna interacción del usuario.
Fuente: Figma.com
Usando nuevamente el ejemplo de la casilla de verificación, con la función Componentes interactivos, las 8 pantallas y las 24 interacciones se reemplazan definiendo la interacción a nivel de componente. Esto da como resultado solo 1 pantalla y 2 interacciones.
Usaré un estado de desplazamiento sobre un botón como ejemplo.
Para comenzar, cree un componente de botón con variantes para “predeterminado” y “hover”. Si eres nuevo en las variantes, consulta primero esta guía de Figma.
Cambie al modo Prototipo. Seleccione la variante “predeterminada” dentro del componente. Verá los mismos nodos azules de creación de prototipos en las variantes de componentes que ve al crear prototipos utilizando marcos. Arrastre este nodo a la variante “desplazarse” en el componente. Seleccione “Mientras se desplaza” para crear un estado de desplazamiento. Figma reconocerá que está trabajando dentro de una variante y proporcionará una nueva opción “Cambiar a”. Esto le permite cambiar de una variante a otra. Es una opción que sólo estará disponible al crear prototipos con variantes.
Este componente ahora está configurado con una interacción de estado de desplazamiento. Cada instancia del componente ahora heredará estas nuevas propiedades.
Para ver cómo funciona esta interacción, agregue su componente a un marco, seleccione el marco y haga clic en el botón Presentar.
También puede anidar componentes interactivos, del mismo modo que puede anidar componentes normales. En el siguiente ejemplo, los componentes Botón y Elemento de menú que se muestran a la izquierda tienen interacciones de desplazamiento.
Fuente: Figma.com
Estos componentes están anidados dentro del componente Menú desplegable a la derecha. Se agregan interacciones de clic adicionales al componente desplegable.
Fuente: Figma.com
Puedes ver cómo este enfoque es mucho más eficiente cuando necesitas cambiar algo. Por ejemplo, cambiar el color del estado de desplazamiento una vez en el componente Elemento de menú lo cambiará en sus tres instancias en el componente Menú desplegable.
Componentes interactivos es una excelente característica para mostrar la interacción en componentes estándar de la interfaz de usuario, como botones, interruptores y menús desplegables. También se puede utilizar junto con las funciones de animación de Figma para configurar múltiples animaciones dentro de un solo cuadro en su prototipo. Por ejemplo, configuro un componente de un botón animado, con variantes para las diferentes etapas de su animación, usando la función “Animación inteligente” y el disparador “Después del retraso”. También configuré el texto del título en un componente separado, para animarlo después de un retraso.
Esto se hizo configurando un componente para el botón con siete variantes para cada paso de la animación del botón. Luego agregué una interacción entre cada variante.
El disparador “Después del retraso” y la función Smart Animate se pueden utilizar para simular una pelota que rebota y se convierte en un botón.
El texto del título se configuró en otro componente para animarlo después de un retraso separado.
Luego, estos dos componentes se agregaron a un marco. Las propiedades de interacción definidas en cada componente funcionan de forma independiente unas de otras.
La capacidad de agregar múltiples componentes (cada uno con sus propias reglas de animación integradas) a un solo cuadro nos permite crear ricas microanimaciones en prototipos.
La función Componentes interactivos es una adición bienvenida para aquellos de nosotros que creamos prototipos. Hace que el proceso de creación de prototipos sea mucho menos abrumador, más modular y eficiente. Permite a los diseñadores experimentar con conceptos, iterar diseños rápidamente y, en última instancia, producir prototipos más avanzados y realistas. Tener mejores prototipos también mejora las pruebas de usabilidad, ya que les brinda a los usuarios un prototipo más realista para probar, lo que debería generar conocimientos más completos.