Saltar hasta el contenido principal

Los prototipos son los nuevos PRD

Emma WebsterContent Strategist, Figma
Ilustración abstracta de aves interactuando con un sistema digital.Ilustración abstracta de aves interactuando con un sistema digital.

Un número creciente de gerentes de producto está descubriendo que la forma más rápida de lograr claridad es construir. Dentro de Figma Make, están poniendo a prueba sus suposiciones, creando impulso y uniendo a los equipos alrededor de algo tangible.

Compartir Los prototipos son los nuevos PRD

Ilustración principal de Raven Jiang

Al igual que muchas disciplinas a lo largo del proceso de desarrollo de productos, el papel de los PM está evolucionando. A medida que los flujos de trabajo de producto tradicionales colapsan, los PM de hoy en día se encuentran guiando y haciendo prototipos con su equipo en lugar de compartir documentos estáticos para revisión.

Al convertir las indicaciones iniciales en prototipos interactivos de alta fidelidad, puedes explorar más fácilmente múltiples conceptos y llevar las ideas más lejos. En lugar de pasar tiempo escribiendo documentación que puede no capturar las sutilezas de un producto, los prototipos te permiten mostrar, en lugar de contar, creando ejemplos funcionales que ilustran la intención y fomentan la discusión. Aquí está cómo los equipos de PM en Figma están creando prototipos usando Figma Make en cada etapa de sus flujos de trabajo, y por qué los prototipos han comenzado a reemplazar por completo los Documentos de Requisitos de Producto (PRDs).

Exploración

La exploración de conceptos iniciales tradicionalmente ha dependido de maquetas, diagramas o presentaciones. Debido a que estos documentos no pueden mostrar un comportamiento real, los equipos tienen que imaginar la experiencia, lo que puede hacer que la alineación sea lenta. Pero cuando se está delimitando un proyecto, los prototipos pueden ofrecer una imagen más completa y algo a lo que se puede reaccionar.

Definir el espacio del problema

Cuando hay demasiadas incógnitas o restricciones mal definidas, puedes usar Figma Make para aportar más claridad. "Uso Figma Make cuando siento que no entiendo muy bien un problema," dice Tara Nadella, gerente de producto de Figma. Cuando su equipo comenzó a explorar características potenciales en Comprobar diseños, un analizador de código del sistema de diseño que muestra valores en bruto y recomienda las variables correctas, su contraparte de ingeniería compartió un prototipo de función y especificaciones técnicas, emocionado por dar vida a sus primeras ideas. El equipo de diseño también había comenzado a pensar en las sutilezas de las características del producto, sugiriendo enfoques visuales potenciales. Pero como Tara todavía estaba trabajando para entender la forma del problema, no pudo alinearse con una solución. "La gente empezaba a avanzar con ello y me di cuenta de que necesitaba formar una opinión. Pero no sabía por dónde empezar."

Para orientarse, Tara abrió Figma Make y comenzó a introducir comandos. Trabajar a través de flujos e interacciones preliminares le ayudó a articular las ideas y preguntas que necesitaba llevar de vuelta al equipo, desde opinar sobre si usar plugins envolventes hasta sugerir ajustes de diseño que harían que la experiencia de principio a fin fuera más intuitiva.

Elaborar sobre ideas iniciales

Cuando estás dando forma a los conceptos iniciales, Figma Make te permite generar varios enfoques en minutos para ver cuáles vale la pena perseguir en serio. "Figma Make te ayuda a resolver el problema del lienzo en blanco al darte algo sobre lo que improvisar," dice Tara. Y con kits de Make, esas exploraciones se mantienen ancladas en componentes reales del producto, produciendo resultados que se ven y se comportan más como algo que realmente podrías lanzar. "[Figma Make] reduce la barrera de entrada para la generación de ideas: no hay necesidad de depender solo de bocetos a mano o texto," dice la gerente de producto de Figma, Summer Wang.

Figma Make te ayuda a resolver el problema del lienzo en blanco dándote algo con lo que improvisar.
Tara Nadella, gerente de producto, Figma

La función de Copiar diseño convierte una vista previa de Figma Make en capas editables en Figma Design, ayudando a los equipos a crear variaciones, explorar múltiples direcciones más rápidamente y añadir manualmente más refinamiento visual. Después de actualizar el diseño en Figma Design, puedes adjuntarlo de nuevo a Figma Make para actualizar el prototipo.

Recientemente, el gerente de producto de Figma, Sean Lee, estaba explorando cómo la IA en Figma Slides podría aplicar automáticamente los colores de marca de un usuario cuando su indicación indica que están creando una presentación de marca. Recurrió a Figma Make para crear un prototipo de cómo podría ser esa experiencia en la práctica. Sean duplicó las plantillas existentes de Figma Slides e indicó a Figma Make remezclar sus paletas basándose en pistas indicadas, simulando cómo podría comportarse un sistema automatizado. "Nos ayudó a generar confianza en el enfoque y demostrarlo en acción, en lugar de simplemente describirlo", dice Sean.

Sean usó Figma Make para crear un prototipo de variaciones de paleta de colores en Figma Slides.

Las funciones de imagen impulsadas por IA en Figma Make aceleran la exploración visual. Puedes eliminar fondos, aislar objetos o reenmarcar imágenes directamente en el lienzo.

Consejos de los PM de Figma

  • Arraiga tu prototipo en tu sistema de diseño: utiliza kits de Make para conectar las bibliotecas de diseño de tu equipo, asegurando que lo que Make genere se sienta fundamentado en tu producto real, no en una maqueta genérica. “Al dar instrucciones, siempre comienza desde una IU base y adjunta bibliotecas para que puedas simular tu producto real”, dice Summer.
  • Deja que tu Figma Make descanse: aléjate de tu prototipo y regresa con una perspectiva fresca. “Muchas de mis sesiones de Figma Make tienden a durar varias horas seguidas, así que revisarlo más tarde es útil porque sales de ese agujero y vuelves con la mente fresca”, dice Tara. Esto puede ayudarte a notar pequeñas incoherencias o detalles que de otra manera podrías haber pasado por alto.

Las plantillas de Make te permiten establecer una base de alta calidad para la exploración. Después de construir un prototipo pulido, puedes publicarlo como una plantilla con directrices que controlen lo que los compañeros de equipo pueden cambiar. Esto asegura que todos exploren desde la misma base mientras se mantiene la coherencia de la marca.

Validación

Puede ser difícil pasar de ser generativo y explorar ideas tempranas a validar cuáles merecen dedicarles recursos. La clave es lograr el compromiso de las partes interesadas internas y la retroalimentación de los usuarios, los prototipos evitan comentarios engañosos y confirman que estás en el camino correcto.

Recoger comentarios de los usuarios

Crear prototipos con Figma Make coloca ejemplos que funcionan frente a los usuarios rápidamente, dándote comentarios rápidos y fiables que aseguran que estás abordando problemas reales de los usuarios. "La calidad de salida de Figma Make es lo suficientemente buena como para que puedas tener una conversación real con los usuarios sobre una función o una idea," dice Ezra Mechaber, gerente de producto de Figma. “No estás programando pero estás ajustando drásticamente el ciclo de crear-medir-aprender”. Y, cuando Figma Make está conectado a un sistema de diseño, los prototipos no solo lucen pulidos, sino que también se mantienen en línea con la marca, dando a los PM la confianza de que lo que los usuarios ven refleja el producto real.

Al preparar el lanzamiento reciente de ChatGPT en Figma Slides, Sean solo tenía dos días para recopilar datos de los usuarios. Rápidamente usó Figma Make para fusionar la interfaz de ChatGPT con los patrones de diseño propios de Figma para crear un prototipo de un flujo de muestra. En un día, tenía un prototipo funcional listo para cinco entrevistas con usuarios. “Los datos dieron forma directamente a nuestros criterios de calidad para las evaluaciones y nos dieron la confianza para tomar una decisión clara de continuar o no”, dice él.

La calidad de [Figma Make] es lo suficientemente buena como para que puedas tener una conversación real con los usuarios sobre una función.
Sean Lee, gerente de producto, Figma

Ganar aceptación

Cuando estás haciendo la transición de una idea y no todos están convencidos, un prototipo rápido puede ayudarte a obtener la aprobación que necesitas mostrando cómo satisface las necesidades de los usuarios. Ver conceptos en contexto ayuda a tu equipo a priorizar con confianza e incluso a reincorporar ideas latentes en la hoja de ruta. "[Figma Make] es una herramienta muy poderosa para la alineación”, dice Tara. "A menudo tenemos conversaciones teóricas sobre funciones teóricas en alguna parte del producto. Pero si muestras un visual, es mucho más rápido lograr que todos estén en sintonía. De esa manera, todos hablamos el mismo idioma y podemos avanzar”.

La integración de Supabase añade funcionalidad de backend a los prototipos creados con Figma Make, permitiendo funciones como pantallas de inicio de sesión que funcionan, formularios que realmente guardan datos y aplicaciones que recuerdan la información entre sesiones. En lugar de simular flujos de usuario con maquetas interactivas, puedes probar prototipos que funcionan como aplicaciones reales, haciendo la investigación de usuarios más realista y revelando cómo se desempeñan las funciones en uso real.

Figma Make es igualmente útil para revisar ideas que se quedaron fuera de la hoja de ruta. Las características que una vez parecieron demasiado vagas o arriesgadas pueden recibir una segunda mirada cuando puedes crear un prototipo rápido. “Para ideas sobre el trabajo pendiente, puedo mostrar rápidamente lo que estoy imaginando, ayudándonos a revisar ideas con más contexto”, dice Summer.

Consejos de los PM de Figma:

  • No tengas miedo de compartir un prototipo sin terminar: ve los prototipos como iniciales de conversación, no entregas finales. “La mayor trampa es pensar que tu proyecto de Make necesita estar 'listo' antes de compartirlo. Úsalo pronto y frecuentemente, incluso para ideas desordenadas y medio formadas”, dice Sean.
  • Añade interacciones realistas: asegúrate de que la IU refleje tu producto actual lo más fielmente posible. "Pide a Make que cree páginas enlazadas, botones y otras interacciones para que parezca real," dice Summer. Esto ayuda a los usuarios y partes interesadas a interactuar con el prototipo como si fuera el producto real.

Toma de decisiones

Las decisiones de producto a menudo dependen de detalles que son difíciles de imaginar hasta que puedas realmente interactuar con ellos. ¿Con qué rapidez debería aparecer un estado de carga? ¿Tiene sentido realmente una disposición cuando comienzas a interactuar con ella? Comunicar estas sutilezas es esencial al evaluar múltiples enfoques.

Obtén los detalles de forma correcta

"El desafío entre producto, diseño de producto e ingeniería sobre cómo describir y articular comportamientos específicos de productos siempre es un área difícil", dice Holly Li, gerente de producto de Figma. "Figma Make ha condensado y simplificado ese problema para nosotros enormemente". En lugar de pedir a los equipos que imaginen cómo podrían funcionar diferentes opciones, puedes poner prototipos funcionales frente a ellos para comparar. "Los PMs constantemente viven en ese espacio entre describir una idea de producto y mostrarla", dice Ezra. "Cuando alguien trae un prototipo funcional a un taller de pilares, la discusión cambia completamente. Puedes decir inmediatamente qué funciona en la práctica versus lo que solo suena bien en teoría".

Los PM constantemente viven en ese espacio entre describir una idea y mostrarla.
Ezra Mechaber, gerente de producto, Figma

Por ejemplo, cuando el equipo de Holly estaba evaluando diferentes comportamientos de desplazamiento para una función, le resultaba difícil capturar las compensaciones de cada opción en palabras. "Sé que es algo que le importa a todos porque impacta enormemente en la calidad de la experiencia, pero es algo casi imposible de describir", dice ella. En lugar de explicar las sutilezas de la velocidad, dirección y tiempo para cada enfoque, Holly y su equipo usaron Figma Make para crear un prototipo de cada versión. Ver las opciones en movimiento una al lado de la otra facilitó entender cómo funcionaban en contexto y elegir la que mejor se adaptaba a su caso práctico.

Comparte contexto

Una vez que existe un prototipo, se convierte en un artefacto compartido para reunir opiniones del equipo y refinar ideas. Pero cómo compartas ese prototipo es importante. "No se trata solo del artefacto, sino también de crear una narrativa a su alrededor", dice Tara. "A veces, simplemente dejar un enlace a tu creación de Figma Make en un chat es abrumador". En su lugar, muchos PM graban vídeos de Loom donde realizan una demostración de su prototipo o lo presentan en vivo en reuniones.

Por ejemplo, cuando Summer estaba definiendo la dirección para una nueva página de inicio y un feed de actividad, utilizó Figma Make para crear prototipos de varias variaciones de sus conceptos principales y los integró en un FigJam para compartirlos con su equipo. Al organizar capturas de pantalla de cada flujo y anotar cómo podrían funcionar las interacciones, creó una narrativa visual clara que facilitó a las partes interesadas evaluar los compromisos y proporcionar comentarios específicos.

Pantallas que muestran el trabajo reciente en FigJam utilizado para hacer un prototipo de página de inicio.Pantallas que muestran el trabajo reciente en FigJam utilizado para hacer un prototipo de página de inicio.
Summer creó un archivo de FigJam recorriendo su prototipo para comunicar claramente su idea y obtener comentarios.
Pantallas que muestran maquetas de prototipos de FigJam para vistas de gestión de actividades y archivos.Pantallas que muestran maquetas de prototipos de FigJam para vistas de gestión de actividades y archivos.

Figma Make ofrece a los equipos formas flexibles de compartir prototipos de manera segura. Puedes publicar un proyecto de Make internamente, restringido a personas que han iniciado sesión en su organización de Figma, o añadir protección mediante contraseñas para revisiones externas, lo que facilita la colaboración en el trabajo y la recopilación de comentarios sin exponer los prototipos en la web abierta.

Una vez que tienes todas las entradas correctas, mantener los prototipos alineados con las decisiones y comentarios evolutivos es otro desafío. Para agilizar este proceso, puedes usar conectores de Make para sincronizar el contexto de herramientas como Coda, Notion o Linear directamente en tus prototipos. Esto asegura que los ciclos de comentarios permanezcan ajustados y que todos trabajen desde la misma fuente de verdad sin tener que abandonar su flujo de trabajo.

Haz espacio para el perfeccionamiento

Cuando usas Figma Make como un área de pruebas para prototipos, ya has trabajado en muchos de los detalles críticos: flujos, lógica y casos extremos, antes de que una función llegue a producción. Lo que sigue es la refinación, donde el enfoque se desplaza hacia el arte y el pulido de los detalles. “Figma Make libera tiempo para la parte divertida de la gestión de productos: tomar decisiones basadas en el gusto y tomar decisiones de flujo de trabajo con mucha más confianza”, dice Holly.

Figma Make libera tiempo para la parte divertida de la gestión de productos: tomar decisiones basadas en el gusto y en el flujo de trabajo con mucha más confianza.‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌‍‍‌‌‍​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​‌​​‍‍​‍​‍‌‍‌‍‌‍‍‌‌‍‌‌‍‌‌‍​‌​‍‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌​‌‌​‌‌‌‌‍‌​‌‍‍‌‌‍​‍‌‍‍‌‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​​‍‌‍‌‌‍‌‍‌​‌‍‌‌​‌‌​​‌​‍‌‍‌‌‌​‌‍‌‌‌‍‍‌‌​‌‍​‌‌‌​‌‍‍‌‌‍‌‍‍​‍‌‍‍‌‌‍‌​​‌‌‍‌​‌‍​‍‌‍​​​‌‌‍​​​‌​​​‍‌​‍‌​‌‌‍‌‍​​‍​‍​​‍‌​‌​​‌‌​‌​‌‍‌‍​‍‌​‍‌‌‍​​‌‌​​‌​‍‌​‌‌​​​​​‌​‌​‌‍‌‍​‍​​​​​‍​​​‌‌‍‌‍​‌‌‍​​‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍‌‍‌‍‍‌‌‍‌‌‍‌‌‍​‌‌​​‍‌‍​‌‍‌‍‌‌‌​​‌‍‌​‌‌​​‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍​‌‍​‌‌‌‍‌‌​​​‍‌​‌‌‌‍‌‌​‍​​‌​‍​​‍‌​‌‍​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‍​‌‍‍‌‌‍​‌‍‌​‌​‍‌‍‌‌‌‍‍​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍​‌‍‌‍​‌​‌‍​‍​​‌‌​​‍​‌‌‌‍‌​​‌​​​​‌‌‌‍​​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‌​‌‍‌‌‌‍​‌‌​​‌‍​‍‌‍​‌‌​‌‍‌‌‌‌‌‌‌​‍‌‍​​‌‌‍‍​‌‌​‌‌​‌​​‌​​‍‌‌​​‌​​‌​‍‌‌​​‍‌​‌‍​‍‌‌​​‍‌​‌‍‌‍‌‍‌‍‍‌‌‍‌‌‍‌‌‍​‌​‍‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌​‌‌​‌‌‌‌‍‌​‌‍‍‌‌‍​‍‌‍‌‍‍‌‌‍‌​​‌‌‍‌​‌‍​‍‌‍​​​‌‌‍​​​‌​​​‍‌​‍‌​‌‌‍‌‍​​‍​‍​​‍‌​‌​​‌‌​‌​‌‍‌‍​‍‌​‍‌‌‍​​‌‌​​‌​‍‌​‌‌​​​​​‌​‌​‌‍‌‍​‍​​​​​‍​​​‌‌‍‌‍​‌‌‍​​‍‌‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍‌‍‌‍‍‌‌‍‌‌‍‌‌‍​‌‌​​‍‌‍​‌‍‌‍‌‌‌​​‌‍‌​‌‌​​‍‌‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‍​‌‍‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍​‌‍​‌‌‌‍‌‌​​​‍‌​‌‌‌‍‌‌​‍​​‌​‍​​‍‌​‌‍​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‍​‌‍‍​‌‍‍‌‌‍​‌‍‌​‌​‍‌‍‌‌‌‍‍​‍‌‌​‌‌‌​​‍‌‌‌‍‍‌‍‌‌‌‍‌​‍‌‌​​‌​‌​​‍‌‌​​‌​‌​​‍‌‌​​‍​​‍​‌‍‌‍​‌​‌‍​‍​​‌‌​​‍​‌‌‌‍‌​​‌​​​​‌‌‌‍​​‍‌‌​​‍​​‍​‍‌‌​‌‌‌​‌​​‍‍‌‌​‌‍‌‌‌‍​‌‌​​‍​‍‌‌
Holly Li, gerente de producto, Figma

A medida que los prototipos se acercan a la producción, los equipos pueden conectar paquetes npm de React a Figma Make para asegurar la consistencia con su base de código en vivo. Esto permite a los ingenieros trabajar con componentes reales desde el principio y ayuda a los gerentes de producto a ver cómo se comportarán las características una vez implementadas, cerrando la brecha entre prototipo y producción.

Este punto de partida más fuerte también remodela la entrega. “Las especificaciones que nuestros equipos de ingeniería siguen hoy a menudo es un archivo de Figma Make más los diseños”, dice Holly. Los ingenieros pueden usar el prototipo de Figma Make como referencia para saber cómo deberían funcionar las interacciones, o hacer la transición de los códigos directamente a GitHub para usarlos como base para el desarrollo continuo. También pueden usar el servidor MCP de Figma para extraer el contexto del diseño, componentes, variables y estructura, en su entorno de codificación. Al conectarse a los mismos archivos de Figma desde los que trabajan los PM, MCP ayuda a los ingenieros a programar de manera que se alineen con la intención del prototipo.

Consejos de los PM de Figma:

  • Indicaciones del taller con ChatGPT: úsalo para ayudarte a estructurar ideas en indicaciones claras. “A veces solo quiero volcar mis pensamientos y pregunto, ‘¿Cómo dividirías esto?’” dice Tara.
  • Sé minuciosoy específico: añade tanto detalle como sea posible, incluso si es a lo largo de varias indicaciones más pequeñas. “Tienes que ser específico y explicar un poco,” dice Holly. “De esta manera, tú y el modelo están en la misma página sobre tus objetivos”.

A medida que el desarrollo de productos sigue evolucionando junto con la IA, los prototipos ofrecen una forma más rápida y clara de explorar ideas y alinear a tu equipo. En este escenario nuevo, los gerentes de producto que prosperen serán aquellos que adopten la iteración en tiempo real, moviéndose fluidamente a través de los límites tradicionales de los roles.

Create and collaborate with Figma

Get started for free