4 maneras para que los equipos de diseño exploren nuevos territorios con Figma Make

Con Figma Make, los diseñadores están encontrando nuevas formas de pasar de la imaginación a la realidad. Ya sea obteniendo aprobación, explorando direcciones divergentes o colaborando con socios multifuncionales, la herramienta de solicitud a la aplicación ayuda a los diseñadores a validar y comunicar ideas, todo mientras se mantienen consistentes con los sistemas de diseño establecidos. Eso significa pasar menos tiempo construyendo disposiciones redundantes y conectando conexiones, y más tiempo en gusto, estrategia y visión. Para inspirar ideas para sus propios flujos de trabajo, aquí está cómo los equipos de diseño en Maven Clinic, Pendo, ServiceNow y LinkedIn usan Figma Make como socio de diseño.

1. Plasma tus ideas en la hoja de ruta

La plataforma de salud para mujeres y familias, Maven Clinic ayuda a sus miembros a navegar desde tratamientos de fertilidad y embarazo, hasta crianza y pediatría, menopausia y salud en la mediana edad. A principios de 2024, lanzaron el programa Maven Managed Benefit patrocinado por el empleador, que conecta a los miembros con una red cerrada de clínicas de fertilidad acreditadas. Para cumplir con los plazos ajustados, el equipo tuvo que retrasar ciertas funciones para el lanzamiento, incluida una búsqueda de clínicas de fertilidad basada en mapas. Cuando llegó el momento de retomar la idea, la gerente de diseño de producto de Maven, Loric Avanessian, sabía que necesitaría más que una maqueta para generar apoyo, por lo que recurrió a Figma Make.

“El superpoder de un diseñador es ser capaz de convertir ideas y conversaciones en algo tangible que entusiasme a las personas sobre nuevas funciones”, dice Loric, quien introdujo algunos de sus diseños iniciales en Figma Make para crear un prototipo de alta fidelidad con el que la gente realmente pudiera interactuar. “Parecía que pertenecía a nuestro producto, y se sentía real”, continúa. “Se compartió ampliamente en Slack, nuestro CEO hizo un comentario, y pude volver a incluirlo en nuestra hoja de ruta cuando fácilmente podría haber quedado por debajo de nuestra línea de corte de características para priorizar este año”.

Loric envió el prototipo a otro diseñador, quien iteró sobre el diseño antes de volver a Figma Make. Ese prototipo les ayudó a obtener una aceptación transversal más profunda y a recibir comentarios más rápidos y enfocados. “Nos ayudó a identificar las microinteracciones que no notas hasta que empiezas a construir,” dice Loric. “Porque comenzamos al 45 % en lugar de cero, pudimos diseñar, desarrollar, probar y lanzar el MVP del buscador de clínicas en menos de cuatro sprints cuando había estado estancado en nuestro backlog durante dos años”.

Con Figma Make, dice Loric, el papel del diseñador está cambiando el énfasis de la ejecución al gusto, la estrategia y la visión. Ella describe un proyecto reciente donde Figma Make precedió al Documento de Requisitos del Producto (PRD); de hecho, el equipo escribió los requisitos basándose en lo que funcionaba y lo que faltaba en el prototipo inicial. "Figma Make te ayuda a resolver el problema del lienzo en blanco al darte algo sobre lo cual improvisar", dice. "También te ayuda a probar un montón de ideas realmente rápido, y luego volver a tu conjunto de habilidades de diseñador principal para refinar y pulir".

2. Dedica tiempo a explorar lo desconocido

En algunos casos, un producto completamente nuevo tiene precedentes claros de los cuales Draw, y en otros, el plan no es tan claro. La compañía de plataformas de IA ServiceNow se encontraba en la segunda categoría cuando se propusieron diseñar un panel que diera a los clientes una visión general del ROI de diferentes agentes de IA. “Figma Make ha sido excelente en este sector porque hay muchas incógnitas que son increíblemente difíciles de investigar”, dice Guy Meyer, diseñador de producto sénior en ServiceNow.

Además, los equipos separados en ServiceNow tenían ideas diferentes sobre cómo abordar la jerarquía de información en el panel. “Figma Make me dio un mapa para entender, en cierto nivel, lo que la gente necesitaría ver en un panel”, dice Guy. “En cinco minutos, pude validar algunas de nuestras ideas”. Si bien fue clarificador entender qué estaba funcionando, fue aún más instructivo ver dónde el prototipo inicial fallaba. Por ejemplo, la matriz de agentes de IA que presentó Figma Make no se adaptaría, dice Guy, porque se convertiría en una cuadrícula demasiado grande: “Fue una buena solución para hoy, cuando la mayoría de las empresas están en las primeras etapas de su viaje de IA, pero estamos intentando sentar las bases para el futuro cuando los clientes puedan trabajar con miles de sistemas. Así que comenzamos a buscar soluciones más personalizadas”.

La facilidad con la que la gente puede indicar su camino a nuevas ideas ha "democratizado el diseño", dice Guy. "Cualquiera puede crear su propia versión, y podemos seleccionar las piezas que más nos gustan. También elimina el ego y el compromiso de tiempo que te ata a una idea". Mientras que el equipo habría tardado semanas en diseñar y recibir comentarios sobre diferentes direcciones, Figma Make reduce el ciclo a dos o tres días. "Figma Make es la herramienta que alinea a los socios multifuncionales porque puede ejecutar rápidamente los artefactos para que los discutamos", dice Guy. "Eso eleva el papel de los diseñadores de solo ejecutar para mejorar la calidad de lo que construye la IA".

3. Colabora y desarrolla nuevas interfaces

Con herramientas para aprovechar el análisis conductual y agéntico, crear guías dentro de la aplicación y capturar comentarios cualitativos, Pendo ayuda a los equipos de productos a tomar decisiones más informadas. Cuando el diseñador de producto sénior Brian Greenbaum fue encargado de crear una IU conversacional para Pendo, ahora llamada modo Agente, recurrió a Figma Make. "Era la herramienta adecuada porque A, quería que se viera como Pendo; B, quería crear múltiples variaciones; y C, era un diseño experiencial. Quería experimentar con el tiempo y cómo los mensajes entrarían y saldrían de la vista”, dice.

Comenzando con un marco de Figma Design, Brian creó una interfaz en Figma Make para iterar sobre cómo los mensajes de razonamiento y las respuestas de llamadas a herramientas se transmitirían. Para jugar con diferentes variaciones, agregó un menú desplegable que le permitía elegir entre vistas más minimalistas y detalladas, y entre texto en una sola línea o apilado. Cualquiera podía entrar en el archivo, hacer clic y entender cómo se vería y sentiría la IU. Finalmente, el equipo decidió mantener un rastro más persistente de mensajes para orientar al usuario dentro de la herramienta. Sin un artefacto de diseño, dice Brian, "estás debatiendo sobre lo que hay en la mente de las personas. Si te describo algo, tienes una imagen visual de lo que eso significa, y yo tengo otra visual, y tal vez no estén alineadas".

Tener un diseño tangible también significó que otras personas pudieran improvisar sobre el trabajo de Brian. Cuando un colaborador sugirió reemplazar el icono de carga circular con un logotipo animado de Pendo, él rápidamente sugirió una forma de activar esa opción. “Antes, habría creado diseños estáticos porque los prototipos quizás no habrían valido la pena con todas estas variaciones”, dice Brian. “Pero con programar, puedo hacerlo más rápido”.

4. Incorpora tu sistema de diseño en las exploraciones iniciales

En LinkedIn, el equipo de sistemas de diseño se centra en proporcionar a los diseñadores los estilos, datos y herramientas que necesitan para crear experiencias que se sientan visualmente alineadas con el resto de la plataforma. Dice Grant Blakeman, ingeniero de diseño del personal de LinkedIn, “Así como vienen a nosotros y preguntan, ‘¿Qué patrón necesito para esta parte de la aplicación?’ También vienen a nosotros por herramientas”.

Con ese fin, el equipo ha creado una plantilla Inicial en Figma Make que genera automáticamente tres variaciones de cualquier diseño desde la primera ejecución de un aviso, lo que permite a los diseñadores crear fácilmente disposiciones para web, móvil y tablet, y cambiar entre modos claro y oscuro. "Estábamos tratando de obtener salidas más deterministas que cumplieran con precisión no solo con nuestros componentes y estilos, sino también con nuestros patrones de producto", dice la diseñadora de producto Cherin Yoo. Ella también suministró la plantilla con pautas para componentes de uso frecuente y rampas de color CSS internas. "Los LLM hacen elecciones dentro de los límites que les damos", explica Cherin, "y esta plantilla nos ayuda a estrechar esos límites". Recientemente, el equipo utilizó la plantilla para presentar una página de registro de plan premium para el equipo de liderazgo.

Para mantener la información del usuario privada durante las presentaciones, el diseñador de producto Ray Sun también ha personalizado el código, integrando un conjunto de metadatos que llena los diseños con contenido ficticio de empresas y personas ficticias. De esta manera, los diseñadores pueden mantenerse en el flujo de Figma Make sabiendo que están utilizando datos legalmente aprobados en la plantilla.

En 2003, el Consejo de diseño desarrolló el modelo Doble Diamante del proceso de diseño, que identificaba cuatro fases distintas: Descubrir, Definir, Desarrollar y Entregar.

Desde un punto de vista del flujo de trabajo, Figma Make permite a los diseñadores no solo explorar más ampliamente, sino también comunicarse de manera más efectiva, dice Giuliano Manno, director de sistemas de diseño en LinkedIn. “En el clásico patrón de pensamiento de diseño del Doble Diamante, Figma Make nos permite estirar los dos vértices del diamante porque nos permite hacer un trabajo de divergencia y exploración más rápido”, dice. “También es muy bueno para transferir un modelo mental sobre patrones de UX cuando estás en conversación con ingenieros y gerentes de producto. En cinco minutos, puedo usar Figma Make para generar algo que ayude a que la idea haga clic para todos”.

“Es una herramienta de comunicación con una combinación de fidelidad y facilidad de uso que nunca tuvimos con otros tipos de prototipos”, coincide Grant, quien ve que herramientas como Figma Make reducen la barrera para que los diseñadores experimenten programando. “Creo que los diseñadores van a evolucionar para volverse más técnicos, y estoy viendo a diseñadores que usan Figma Make volverse menos temerosos de programar para jugar con cosas. Ahora pueden crear demostraciones que habrían tomado mucho tiempo a un ingeniero, o que no habrían sido priorizadas en primer lugar”.

Figma Make ha salido de la fase beta y actualmente está disponible para que todos los usuarios lo prueben.