Fundada em 2020, com uma equipe atuando em Oslo e Londres, a Findable é uma plataforma de inteligência de documentos com tecnologia de IA voltada para o ambiente construído. A empresa ajuda proprietários de imóveis, gestores e consultores a buscar, extrair e analisar documentação de edifícios usando IA.

A plataforma da Findable permite que usuários façam perguntas em milhares de documentos de construção usando linguagem natural, extraiam dados estruturados de arquivos não estruturados e gerem relatórios de conformidade automaticamente. Esses recursos impulsionados por IA exigem interfaces que equilibrem poder e simplicidade.

Assim, quando a empresa precisou atualizar a estrutura do seu app, a equipe de design viu isso como uma oportunidade para otimizar seu fluxo de trabalho de desenvolvimento de produto. Eles já haviam entregue reformulações da estrutura do app usando o Figma, mas com uma cultura que enfatiza a eficiência e a experimentação, explorar as capacidades do Figma Make foi o próximo passo.

A Findable não apenas concluiu a construção da estrutura do app 50% mais rápido, utilizando 90% do código gerado pelo Figma Make, como também democratizou o processo de construção de produtos, trazendo equipes de fora do design e desenvolvimento para a integração.

Desafio: lidar com a estrutura do app com cuidado

A estrutura de um app fornece a base para um aplicativo web. É a primeira coisa a ser carregada, e é fundamental para a experiência geral do usuário. Riccardo Busato, designer de produto da Findable, liderou o projeto, e suas atribuições incluíram a concepção da navegação, do layout e da estrutura. Esses elementos formam a base de que os demais produtos da Findable dependem.

O desafio é que a estrutura de um app pode ser frágil. Pequenos erros podem se propagar por toda parte, a flexibilidade futura depende das decisões arquitetônicas tomadas inicialmente, e requer testes e iterações extensivas.

Solução: trazendo designs estáticos à vida

A complexidade de um site ao vivo pode ser difícil de simular em uma imagem estática, então a Findable anteriormente dependia de um processo de transferência longo e detalhado para manter designers e desenvolvedores alinhados. E muitas vezes, lacunas de interpretação surgiam durante o fluxo de trabalho de design para código, sendo detectadas apenas na produção.

Foi isso que levou a equipe ao Figma Make. Começou como um projeto para dar aos desenvolvedores maior profundidade e clareza desde o início, e então evoluiu para algo muito maior.

Construindo estruturas além dos designs

O primeiro momento de revelação para Riccardo foi quando ele percebeu que o Figma Make não estava apenas gerando visuais—ele também estava construindo a estrutura do app.

Aproveitando sua experiência em front-end e design system, ele conseguiu recriar o mesmo design system, componentes, temas e estilos do app Findable — tudo dentro do Figma Make.

Isso significava que a equipe poderia construir uma estrutura de app de alta fidelidade com navegação real e lógica de roteamento dentro de um esqueleto arquitetônico real.

Em outras palavras: um protótipo totalmente funcional e operacional, permitindo que os envolvidos não apenas vejam o app, mas sintam ele.

O protótipo se torna o handoff

A equipe da Findable descobriu que não apenas estavam gerando ideias mais rapidamente, como o Figma Make também ajudou na transição do design para o código.

Anteriormente, o processo detalhado de handoff exigia múltiplas reuniões e frequentemente uma ferramenta de transferência específica. Agora, o protótipo se tornou o handoff, simplificando o fluxo de trabalho de design para código.

Além disso, os arquivos do Figma Make, assim como o Figma, ainda podem ser facilmente compartilhados com um simples link e ainda permitem a colaboração ao vivo para um trabalho ágil entre o designer e o desenvolvedor.

Um modelo reutilizável

Nessa altura, o protótipo já era mais fácil de projetar, testar, compartilhar e entregar do que qualquer coisa que a equipe já tivesse criado antes.

Então Riccardo percebeu que ele havia construído algo ainda mais poderoso. Dado que o design system e os padrões arquitetônicos já estavam codificados no protótipo, poderia ele ser um modelo reutilizável para designs futuros?

Com isso em mente, a equipe avançou ainda mais, adicionando padrões de recursos-chave e fluxos representativos populados para transformar a estrutura do app em um modelo. Isso deu vida além do projeto inicial, já que o modelo se tornou a base para o design system da Findable, layout, navegação e fundamentos arquitetônicos.

Figma Make impõe as regras

A equipe entendeu que, apesar das bases sólidas, o sistema gradualmente perderia consistência e estrutura se não fossem definidas diretrizes. As páginas ficariam inconsistentes, os padrões se desviariam, a qualidade do código se deterioraria e a facilidade de manutenção seria prejudicada.

Para resolver isso, a Findable mudou radicalmente de direção, usando o Figma Make para determinar as regras do próprio app, definindo regras de design, padrões de layout, restrições de arquitetura, diretrizes de qualidade de código e até mesmo regras de uso do Tailwind.

Como resultado, a equipe conseguiu manter designs consistentes com base em uma estrutura previsível e código mais limpo.

“Ao definir as regras antecipadamente com o Figma Make, criamos um sistema que permanece consistente, previsível e resiliente à medida que cresce”, diz Hans Christian Berge, Designer Sênior. “Mas a verdadeira liberação é que democratiza o design–qualquer pessoa na Findable agora pode contribuir com o produto sem quebrar o que já existe.

Democratizando o processo de prototipagem

Enquanto a combinação de conhecimento em engenharia front-end e pensamento arquitetônico ajudou a construir o protótipo, foi a introdução das regras de design que mudou tudo para a Findable. Isso significava que outros designers poderiam usar o modelo sem causar erros, ao mesmo tempo em que evitava as variações individuais que costumam surgir quando um projeto é trabalhado por várias pessoas.

Mas o momento realmente transformador foi a percepção de que não eram apenas os designers que poderiam usar o modelo. Se os fundamentos do modelo forem sólidos, se a arquitetura estiver codificada, se as regras forem explícitas, outras equipes poderiam se unir ao processo.

Isso democratizou o processo de prototipagem, desbloqueando casos de uso totalmente novos e, para a Findable, inesperados:

• Sucesso do Cliente esboçando ideias ao vivo com clientes
• Solicitações de recursos de prototipagem para vendas em reuniões
• PMs explorando fluxos sem bloquear o design
• Ciclos de feedback mais rápidos e claros em toda a empresa

“O Figma Make me permite criar protótipos de ideias enquanto são discutidas”, diz Hans. “Seja durante uma reunião com cliente ou logo após, posso dar forma ao conceito dentro do produto e confiar que está embasado em como o Findable realmente funciona.”

RESULTADOS

Lançamento no mercado 50% mais rápido, com base em 90% do código gerado pelo Figma Make

A estrutura final do app foi entregue 50% mais rápido, com mais de 90% do código do Figma Make usado no produto final, e o código foi implementado em menos de um dia.

O que começou como um redesenho da estrutura do app tornou-se algo muito maior. Ao final, a Findable tinha um protótipo que funcionava como um motor de design e desenvolvimento para toda a empresa — um modelo, uma ferramenta de handoff, um multiplicador de força e um acelerador de inovação.