4 maneras en que los equipos de diseño pueden explorar nuevos territorios con Figma Make

Con Figma Make, los diseñadores están descubriendo nuevas formas de convertir la imaginación en realidad. Ya sea para obtener aprobación, explorar direcciones divergentes o colaborar con socios multifuncionales, la herramienta de indicación a app ayuda a los diseñadores a validar y comunicar ideas, todo ello manteniendo la consistencia con los sistemas de diseño establecidos. Eso significa dedicar menos tiempo a crear disposiciones redundantes y conectar conexiones, y más tiempo al criterio, la estrategia y la visión. Para inspirarte en tus propios flujos de trabajo, aquí tienes cómo los equipos de diseño de Maven Clinic, Pendo, ServiceNow y LinkedIn utilizan Figma Make como socio de diseño.

1. Plasma tus ideas en la hoja de ruta

Maven Clinic, una plataforma de atención médica para mujeres y familias, ayuda a sus miembros a orientarse en todo tipo de cuestiones, desde tratamientos de fertilidad y embarazo hasta maternidad y pediatría, pasando por la menopausia y la 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 ajustados plazos, el equipo tuvo que retrasar ciertas funciones para el lanzamiento, incluido un buscador de clínicas de fertilidad basado 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 conseguir respaldo, así que recurrió a Figma Make.

"El superpoder de un diseñador es ser capaz de convertir ideas y conversaciones en algo tangible para que las personas se entusiasmen con las nuevas funciones", afirma Loric, quien introdujo algunos de sus diseños iniciales en Figma Make para crear un prototipo de alta fidelidad con el que las personas pudieran interactuar realmente. "Parecía que formaba parte de nuestro producto y daba la sensación de ser real", continúa. "Se compartió ampliamente en Slack, nuestro director general lo comentó y pude volver a incluirlo en nuestra hoja de ruta, cuando fácilmente podría haber quedado fuera de nuestra lista de funciones prioritarias para este año".

Loric envió el prototipo a otro diseñador, quien iteró sobre el diseño antes de volver a incorporarlo en Figma Make. Ese prototipo les ayudó a obtener un mayor respaldo multifuncional y recibir un feedback más rápido y enfocado. "Nos ayudó a identificar las microinteracciones que no se notan hasta que se empieza a crear", dice Loric. "Como empezamos al 45 % y no desde 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 nuestra lista de tareas pendientes durante dos años".

Con Figma Make, afirma Loric, el papel del diseñador está cambiando su enfoque de la ejecución al criterio, la estrategia y la visión. Describe un proyecto reciente en el que Figma Make se adelantó al documento de requisitos del producto (PRD). De hecho, el equipo redactó los requisitos a partir de lo que funcionaba y de lo que faltaba en el prototipo inicial. "Figma Make te ayuda a resolver el problema del lienzo en blanco al darte algo a partir de lo cual iterar”, afirma. "También te ayuda a probar un montón de ideas muy rápidamente y luego volver a tus habilidades básicas de diseñador para refinar y pulir el producto".

2. Tómate el tiempo para explorar lo desconocido

En algunos casos, un producto completamente nuevo tiene precedentes claros de los que partir; en otros, el plan no está tan claro. La empresa de plataformas de IA ServiceNow se encontraba en el segundo caso cuando se propuso diseñar un panel que ofreciera a los clientes una visión general del retorno de la inversión de diferentes agentes de IA. "Figma Make ha sido fantástico en este sector, ya que hay muchas incógnitas que son increíblemente difíciles de investigar", afirma Guy Meyer, diseñador de producto sénior de ServiceNow.

Además, los distintos equipos de ServiceNow tenían ideas diferentes sobre cómo abordar la jerarquía de la información en el panel. "Figma Make me dio un mapa para entender, hasta cierto punto, qué necesitaban ver las personas en un panel", afirma Guy. "En cinco minutos, pude validar algunas de nuestras ideas". Si bien fue esclarecedor comprender lo que funcionaba, resultó aún más instructivo ver dónde fallaba el prototipo inicial. Por ejemplo, la matriz de agentes de IA que presentaba Figma Make no escalaba, según Guy, porque se convertiría en una cuadrícula demasiado grande: “Era una buena solución para hoy, cuando la mayoría de las empresas están dando sus primeros pasos en el ámbito de la IA, pero estamos tratando de sentar las bases para el futuro, cuando los clientes puedan estar trabajando con miles de sistemas. Por lo tanto, empezamos a buscar soluciones más personalizadas".

La facilidad con la que las personas pueden generar nuevas ideas ha "democratizado el diseño", afirma Guy. Cualquiera puede crear su propia versión y nosotros podemos seleccionar las piezas que más nos gustan. Además, elimina el ego y el compromiso de tiempo que te mantiene ligado a una idea". Mientras que el equipo habría tardado semanas en diseñar y obtener feedback 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 debatamos", dice Guy. "Eso eleva el papel de los diseñadores, que pasan de la simple ejecución a mejorar la calidad de lo que genera la IA".

3. Colabora y prueba nuevas interfaces

Con herramientas para aprovechar la analítica del comportamiento y la analítica agéntica, crear guías dentro de la app y recopilar feedback cualitativo, Pendo ayuda a los equipos de producto a tomar decisiones más informadas. Cuando el diseñador de producto sénior Brian Greenbaum recibió la tarea de crear una UI conversacional para Pendo, ahora llamada Modo Agente, recurrió a Figma Make. "Era la herramienta adecuada porque, en primer lugar, quería que se pareciera a Pendo; en segundo lugar, quería crear muchas variaciones; y, en tercer lugar, se trataba de un diseño experimental. Quería experimentar con la sincronización y con la forma en que los mensajes aparecerían y desaparecerían de la vista", afirma.

A partir de un marco de Figma Design, Brian creó una interfaz en Figma Make para iterar sobre cómo se mostrarían los mensajes de razonamiento y las respuestas de las herramientas. Para explorar distintas variantes, agregó un menú desplegable que le permitía elegir entre vistas más minimalistas o detalladas, y entre texto de una sola línea o apilado. Cualquiera podía abrir el archivo, hacer clic y entender cómo se vería y cómo se percibiría la UI. Al final, el equipo decidió mantener un historial de mensajes más persistente para orientar al usuario dentro de la herramienta. Sin un artefacto de diseño, dice Brian, "se debate sobre lo que hay en la mente de las personas". Si te describo algo, tú tienes una imagen de lo que significa, y yo tengo otra, y es posible que no coincidan".

Tener un diseño tangible también significaba que otras personas podían aprovechar el trabajo de Brian. Cuando un colaborador sugirió sustituir el ícono de carga circular por un logotipo animado de Pendo, rápidamente propuso una forma de activarlo. Antes, solía crear diseños estáticos porque quizá no valiera la pena prototipar con todas estas variaciones”, afirma Brian. “Pero con código, 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, los datos y las herramientas que necesitan para crear experiencias que se ajusten visualmente al resto de la plataforma. Grant Blakeman, ingeniero de diseño de LinkedIn, afirma: "Al igual que acuden a nosotros y nos preguntan: '¿Qué patrón necesito para esta parte de la app?', también acuden a nosotros por herramientas".

Con ese fin, el equipo creó una plantilla inicial en Figma Make que genera automáticamente tres variaciones de cualquier diseño desde la primera ejecución de una solicitud, lo que permite a los diseñadores crear fácilmente disposiciones para web, dispositivos móviles y tabletas, y cambiar entre los modos claro y oscuro. Intentábamos obtener resultados más predecibles que se ajustaran con precisión no solo a nuestros componentes y estilos, sino también a los patrones de producto”, afirma la diseñadora de producto Cherin Yoo. Ella también proporcionó la plantilla con pautas para los componentes de uso frecuente y rampas de color CSS internas. "Los LLM toman decisiones dentro de los límites que les imponemos", explica Cherin, "y esta plantilla nos ayuda a reducir esos límites". Recientemente, el equipo utilizó la plantilla para mostrar una página de registro al plan premium para el equipo directivo.

Para mantener la privacidad de la información de los usuarios durante las presentaciones, el diseñador de producto Ray Sun también ha personalizado el código, integrando un conjunto de metadatos que rellenan los diseños con contenido ficticio de empresas y personas inventadas. De esta manera, los diseñadores pueden seguir trabajando con Figma Make sabiendo que están incorporando datos legalmente verificados a la plantilla.

En 2003, el Design Council desarrolló el modelo Double Diamond del proceso de diseño, que identifica cuatro fases distintas: descubrir, definir, desarrollar y entregar.

Desde el 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 eficaz, afirma Giuliano Manno, director de sistemas de diseño de LinkedIn. "En el patrón clásico de pensamiento de diseño Double Diamond, Figma Make nos permite estirar los dos vértices del diamante, ya que facilita un trabajo de divergencia y exploración más rápido”, afirma. "También es muy bueno para transferir un modelo mental en torno a los patrones de UX cuando se conversa con ingenieros y gerentes de producto. “En cinco minutos, puedo utilizar Figma Make para generar algo que ayude a que todos comprendan la idea".

"Es una herramienta de comunicación que combina fidelidad y facilidad de uso, algo que nunca habíamos tenido con otros tipos de prototipos", coincide Grant, quien considera que herramientas como Figma Make reducen las barreras para que los diseñadores experimenten con el código. “Creo que los diseñadores van a volverse más técnicos, y estoy viendo que quienes utiliza Figma Make cada vez tienen menos miedo de meterse en el código y experimentar. Ahora pueden crear demostraciones que a un ingeniero le habría tomado mucho tiempo, o que ni siquiera se habrían podido llevar a cabo por falta de recursos.

Figma Make salió de la versión beta y ya está disponible para que todos los usuarios lo prueben.