Fundada en 2020, con un equipo que opera desde Oslo y Londres, Findable es una plataforma de inteligencia documental basada en IA para el sector de la construcción. La empresa ayuda a propietarios, administradores y consultores inmobiliarios a buscar, extraer y analizar documentación de edificios mediante IA.

La plataforma de Findable permite a los usuarios hacer preguntas en miles de documentos de construcción utilizando lenguaje natural, extraer datos estructurados de archivos no estructurados y generar informes de cumplimiento automáticamente. Estas funciones impulsadas por IA requieren interfaces que equilibren potencia y simplicidad.

Así pues, cuando la empresa necesitó actualizar la estructura de su app, el equipo de diseño lo vio como una oportunidad para optimizar su flujo de trabajo de desarrollo de productos. Ya habían llevado a cabo rediseños de la estructura de la app antes de usar Figma, pero, dada una cultura que hace hincapié en la eficiencia y la experimentación, explorar las capacidades de Figma Make era el siguiente paso.

Findable no solo completó la construcción de la estructura de la app un 50 % más rápido, utilizando el 90 % del código generado por Figma Make, sino que la empresa también democratizó el proceso de creación de productos, incorporando a equipos ajenos al diseño y al desarrollo.

El reto: manejar el “app shell” con cuidado

Un “app shell” proporciona la estructura básica de una aplicación web. Es lo primero que se carga y es clave para la experiencia de usuario. Riccardo Busato, diseñador de producto en Findable, dirigió el proyecto, y sus instrucciones incluían el diseño de la navegación, la disposición y la estructura. Estos elementos sientan las bases de las que dependen el resto de los productos de Findable.

El reto es que la estructura de una app puede ser frágil. Los pequeños errores pueden propagarse por todas partes, la flexibilidad futura depende de las decisiones arquitectónicas tomadas desde el principio y requiere pruebas exhaustivas e iteraciones.

Solución: dar vida a los diseños estáticos

La complejidad de un sitio web en vivo puede ser difícil de simular en una imagen estática, por lo que Findable solía recurrir a un proceso de traspaso largo y detallado para mantener la coordinación entre diseñadores y desarrolladores. Y, a menudo, se producían diferencias de interpretación durante el flujo de trabajo del diseño al código, que solo se detectaban en producción.

Eso es lo que llevó al equipo a Figma Make. Comenzó como un proyecto para brindar a los desarrolladores mayor profundidad y claridad desde el inicio, y luego se convirtió en algo mucho más grande.

Creación de estructuras y diseños

El primer momento revelador para Riccardo fue cuando se dio cuenta de que Figma Make no solo generaba elementos visuales, sino que también construía la estructura del armazón de la app.

Aprovechando su experiencia en front-end y sistemas de diseño, pudo recrear el mismo sistema de diseño, componentes, temas y estilos de la app Findable, todo dentro de Figma Make.

Esto significó que el equipo pudo construir una carcasa de app de alta fidelidad con navegación real y lógica de enrutamiento dentro de un esqueleto arquitectónico real.

En otras palabras: un prototipo totalmente funcional que permite a las partes interesadas no solo ver la app, sino también experimentarla.

El prototipo se convierte en la entrega

El equipo de Findable descubrió que, además de generar ideas más rápidamente, Figma Make también facilitaba la transición del diseño al código.

Anteriormente, el detallado proceso de traspaso requería múltiples reuniones y, a menudo, una herramienta específica para ello. Ahora, el prototipo se convirtió en el traspaso, lo que agilizó el flujo de trabajo del diseño al código.

Además, los archivos de Figma Make, al igual que Figma, se pueden seguir compartiendo fácilmente con un simple enlace y siguen permitiendo la colaboración en tiempo real para un trabajo ágil entre el diseñador y el desarrollador.

Una plantilla reutilizable

En ese momento, el prototipo ya resultaba más fácil de diseñar, probar, compartir y entregar que cualquier cosa que el equipo hubiera creado anteriormente.

Entonces, Riccardo se dio cuenta de que había creado algo aún más potente. Dado que el sistema de diseño y los patrones arquitectónicos ya estaban implementados en el prototipo, ¿podría servir como plantilla reutilizable para futuros diseños?

Con esto en mente, el equipo fue más allá, añadiendo patrones de características clave y flujos representativos para convertir la estructura de la app en una plantilla. Esto le dio vida más allá del proyecto inicial, ya que la plantilla se convirtió en la base del sistema de diseño, la disposición, la navegación y los fundamentos arquitectónicos de Findable.

Figma Make hace cumplir las reglas

El equipo comprendió que, a pesar de contar con unos cimientos sólidos, el sistema perdería gradualmente coherencia y estructura si no se definían unas directrices claras. Las páginas se desviarían, los patrones se desvanecerían, la calidad del código se degradaría y la facilidad de mantenimiento se vería afectada.

Para resolver esto, Findable cambió radicalmente de rumbo y utilizó Figma Make para determinar las reglas de la propia app, definiendo reglas de diseño, disposiciones de diseño, restricciones de arquitectura, directrices de calidad del código e incluso reglas de uso de Tailwind.

Como resultado, el equipo pudo mantener la coherencia de los diseños basándose en una estructura predecible y un código más limpio.

“Al definir las reglas desde el principio con Figma Make, creamos un sistema que se mantiene coherente, predecible y resistente a medida que crece”, afirma Hans Christian Berge, diseñador sénior. “Pero la verdadera ventaja es que democratiza el diseño: ahora cualquier persona en Findable puede contribuir al producto sin alterar lo que ya existe”.

Democratización del proceso de creación de prototipos

Si bien la combinación de conocimientos de ingeniería front-end y pensamiento arquitectónico ayudó a construir el prototipo, fue la introducción de las reglas de diseño lo que lo cambió todo para Findable. Esto significó que otros diseñadores pudieran utilizar la plantilla sin alterar nada, al tiempo que se evitaban las variaciones individuales de los diseñadores que suelen surgir cuando varias personas participan en un proyecto.

Pero el verdadero punto de inflexión fue darme cuenta de que no solo los diseñadores podían usar la plantilla. Si los cimientos de la plantilla son sólidos, si la arquitectura está codificada y si las reglas son explícitas, otros equipos podrían sumarse al proceso.

Esto democratizó el proceso de creación de prototipos, lo que dio lugar a casos de uso totalmente nuevos y, para Findable, inesperados:

• El equipo de Éxito del cliente esboza ideas en vivo con los clientes.
• El equipo de ventas crea prototipos de solicitudes de funciones en reuniones.
• Los PM exploran flujos sin atascarse en el diseño.
• Ciclos de feedback más rápidos y claros en toda la empresa.

“Figma Make me permite crear prototipos de ideas a medida que se discuten”, dice Hans. “Ya sea durante una reunión con el cliente o inmediatamente después, puedo dar forma al concepto dentro del producto y confiar en que se basa en cómo funciona realmente Findable”.

Resultados

Lanzamiento al mercado un 50 % más rápido gracias al uso de más del 90 % del código de Figma Make

La estructura final de la app se entregó un 50 % más rápido, con más del 90 % del código de Figma Make incorporado en el producto final, y el código se implementó en menos de un día.

Lo que comenzó como un rediseño del shell de la app se convirtió en algo mucho más grande. Al final, Findable tenía un prototipo que funcionaba también como un motor de diseño y desarrollo para toda la empresa: una plantilla, una herramienta de transferencia, un multiplicador de fuerzas y un acelerador de innovación.