Figma es una gran herramienta para la creación rápida de prototipos. Cuando desee presentar sus diseños a los clientes, pruebe los flujos más importantes con los usuarios o transfiera las microinteracciones a los desarrolladores. Sin embargo, actualmente no es posible usar variables o crear animaciones de fotogramas clave que funcionen en la vista Presentación.
Aquí es donde entra en juego ProtoPie. Le permite transformar sus diseños de Figma en prototipos de alta fidelidad con interacciones condicionales, gestos multitáctiles, acceso a sensor de cámara y dispositivo, reproducción de medios, control de voz y más. Hoy le mostraré cómo usar la entrada en ProtoPie.
Contenido del Articulo
1. Crea tu diseño
En primer lugar, necesitamos tener algunos diseños con los que trabajar. Supongamos que desea diseñar una vista con entradas que permitan a los usuarios agregar nuevos perfiles a sus cuentas. Para hacerlo un poco más interesante, agregaremos una ilustración simple allí, que también animaremos. No olvides nombrar todas las capas correctamente para que todo esté ordenado y te haga la vida más fácil más adelante.
2. Exportar a ProtoPie
Deberá exportar su diseño desde Figma. Primero instale el complemento ProtoPie. Aquí hay un enlace a la comunidad de Figma:
Cuando su complemento esté listo y la aplicación ProtoPie se esté ejecutando en segundo plano, simplemente seleccione el marco en el que desea trabajar y presione el botón exportar para enviarlo directamente a ProtoPie. Su marco de nivel superior se importará como una escena con exactamente la misma jerarquía de capas, nombre y ubicación como se configuró en Figma.
3. Agregar entrada interactiva
¡Ahora comienza la diversión! Cuando cambie a la ventana de ProtoPie, notará que la interfaz es muy similar a Figma. El panel izquierdo contiene todas sus capas, la barra de herramientas superior le permite agregar diferentes tipos de objetos al prototipo y el panel derecho incluye propiedades, línea de tiempo e interacciones. Incluso el botón de vista previa está en el mismo lugar, por lo que navegar dentro de esta aplicación debería ser fácil para cualquier persona con experiencia con cualquier software de diseño de interfaz de usuario.
Primero, reemplace el marcador de posición con una capa de entrada interactiva. Se encuentra en la barra de herramientas superior debajo del texto. Después de eso, cambia sus propiedades en el panel de propiedades a la derecha. Puede ocultar el texto del marcador de posición, redondear los bordes, cambiar el relleno y el borde del fondo y, finalmente, ajustar la fuente y el color del texto para adaptarlo a su diseño.
Para crear una interacción, necesita tres componentes: un objeto, un disparador y una respuesta. Nuestro objeto es la entrada. Los disparadores hacen que se ejecuten una o más respuestas. La respuesta es una modificación del objeto activado.
Usaremos el disparador de enfoque. Cuando nuestra capa de entrada está enfocada, por defecto muestra un cursor parpadeante y un teclado de teléfono inteligente nativo. Además, nos gustaría agregar un borde verde alrededor de la entrada. Un disparador de enfoque haría todo lo contrario.
Para agregar un disparador, seleccione la capa de entrada interactiva, vaya al panel Interacción, haga clic en el botón Agregar disparador para expandir todas las opciones y seleccione Foco. Luego, debajo del activador Focus, haga clic en el signo más para crear una respuesta. Seleccione “Borde” y cambie el ancho a 2px.
Debe agregar otro disparador de enfoque para definir qué debe suceder cuando la entrada ya no está activa. Seleccione la entrada nuevamente y haga clic en Agregar disparador, foco. Luego, en el panel Propiedades, cambie de “Enfocar” a “Enfocar fuera”. Después de eso, puede agregar la respuesta “Borde” y cambiar el ancho a 0.
4. Vista previa del prototipo
Puede comprobar su prototipo en la ventana de vista previa. Se puede abrir en la esquina superior derecha de la barra de herramientas. Si alguna de sus interacciones falla, lo descubrirá durante la prueba en el panel de vista previa. Cuando realiza cambios en sus capas o interacciones, el prototipo se actualiza automáticamente de forma predeterminada.
5. Conecte la entrada con la ilustración
Agreguemos una cereza al pastel y animemos la ilustración en función de lo que sucede con nuestra entrada, ¿de acuerdo? 🙂 Digamos que queremos que los ojos del avatar sigan la posición del cursor dentro de la entrada.
Con la capa de ojos seleccionada, puede agregar una reacción de “Mover” a los disparadores de enfoque. De esta manera, puede mover esta capa a coordenadas predefinidas. Desea que los ojos se fijen en el cursor cuando se enfoca la entrada. Puede determinar aproximadamente su ubicación contando la cantidad de caracteres en el texto ingresado. Puede hacer esto pasando el texto de entrada como parámetro a la fórmula length(). Seleccione la posición x y haga clic en el símbolo de la fórmula. Uso la fórmula 53+longitud(‘texto-de-entrada’.texto)/4 para x y 83 para y en mi ilustración. Luego agregue una respuesta “Mover” al evento de enfoque para restablecer la posición de los ojos (en mi ejemplo, x: 55 e y: 80).
Finalmente, para hacer que los ojos sigan el cursor mientras escribe, agregue un activador “Detectar”. A continuación, pegue la respuesta “Mover” del enfoque en el disparador.
Es hora de revisar la micro-interacción terminada 🙂
La creación de prototipos de microinteracciones es una forma muy eficaz de discutir y validar sus decisiones de diseño. El flujo de trabajo de ProtoPie y Figma es casi perfecto. Todos los bocetos se pueden preparar en Figma. En ProtoPie, los diseñadores pueden crear fácilmente prototipos interactivos utilizando fórmulas, variables y lógica condicional. De esta manera, también es más fácil para los desarrolladores hacer maravillas en el código, porque las recetas de interacción eliminan todas las conjeturas necesarias al recrear animaciones de After Effects.
