Da ideia ao produto: 4 novos caminhos com ferramentas de IA

As equipes de produto estão se adaptando rapidamente à nova forma de trabalho na era da IA. Elas prototipam logo no início

, testando o conceito em código antes do design, exploram em uma escala sem precedentes e entregam com o contexto de design system que costumava se perder na transferência. Conversamos com construtores de produtos na FloQast, Merkle, Affirm e Accor sobre como isso acontece na prática.

1. Testar restrições no código

Testar uma ideia em relação a restrições complexas, como fluxos de várias etapas onde uma ação aciona a próxima, ou interfaces que se comportam de maneira diferente dependendo dos dados que utilizam, costumava exigir um investimento significativo dos desenvolvedores. Hoje, nas equipes de produto, as ferramentas de programação com IA possibilitam que mais pessoas construam e testem rapidamente esse tipo de interação antes de optarem por uma direção. Esse benefício abriu um novo fluxo de trabalho. Um construtor de produto pode criar um protótipo funcional usando código e movê-lo para a tela de trabalho do Figma usando Codex to Figma

para visualizar o quadro completo e refiná-lo em conjunto. Caso seja necessário trabalho adicional no código, o protótipo pode voltar via MCP mantendo o contexto de design intacto.

Como a FloQast testou um fluxo de trabalho complexo no código

A FloQast desenvolve software que ajuda equipes de contabilidade a gerenciar complexidades reais: tarefas que dependem da conclusão de outras para poder avançar, registros que precisam coincidir entre locais como um processador de pagamentos e uma conta bancária, e aprovações que são interrompidas até que tudo o mais tenha sido revisado.

O desafio

Recentemente, a equipe precisou repensar um dos fluxos de trabalho padrão, que obrigava os usuários a alternar entre várias páginas apenas para rastrear uma única discrepância. Por exemplo, um contador que detectava um problema precisava acessar uma página para ver o problema, navegar para outra página para investigá-lo e retornar à primeira página para resolvê-lo. A equipe queria consolidar tudo isso em uma única página onde os usuários pudessem ver suas tarefas, rastrear o que estava bloqueado e tomar medidas sem sair da tela.

Um protótipo inicial havia mostrado potencial, mas a página tinha muitas etapas interconectadas, cada uma delas dependendo de dados reais e lógica, impedindo sua avaliação pela equipe com base apenas em um mockup.

A chave

Benjamin Ellis, gerente de UX na FloQast, construiu um protótipo funcional em uma ferramenta de programação com IA com um back-end simulado e dados realistas baseados nos fluxos de trabalho de um cliente real. Com o protótipo baseado em código, a equipe podia navegar por cenários reais. A conclusão de uma etapa acionava a próxima, permitindo verificar se a página inteira realmente funcionava. A equipe logo identificou fluxos que pareciam corretos na superfície, mas não se sustentavam na prática, o tipo de problema que só aparece quando se trabalha com dados e lógica reais.

O impacto

Quando a equipe de Benjamin e o designer escolheram uma direção, ela já havia sido testada em código em cenários reais, revelando os tipos de problemas de interação que não teriam sido detectados apenas com um arquivo de design. O resultado foi a redução de surpresas nas etapas seguintes e o aumento de confiança no que estavam construindo.

Experimente esta abordagem quando:

• O comportamento da UI varia em função de condições que você não consegue avaliar em um mockup, como permissões de usuário ou fluxos de múltiplas etapas, em que uma ação afeta a próxima
• Você precisa fazer uma pequena correção e é mais rápido alterar diretamente o código do que voltar para o design
• Um designer e um desenvolvedor precisam definir o escopo de uma experiência complexa juntos e a disponibilidade de algo funcionando facilita essa interação

2. Experimentar IA na tela de trabalho

As equipes sempre exploraram na tela de trabalho, mas a IA ampliou os limites dessa exploração. Com o agente de IA do Figma

, um designer pode gerar variações de layout, escrever conteúdo realista e identificar lacunas nesse trabalho sem sair do arquivo, tudo em conformidade com o design system. Quando a equipe está pronta para seguir em uma direção, pode usar o Figma Make

7 tips for using Figma Make credits more efficiently

While everyone’s talking about “tokenmaxxing,” we’ve compiled seven best practices to help you build smarter—without prompting more—in Figma Make.

para transformar o arquivo em um protótipo interativo e usar o MCP para levar o contexto do design para o código de produção.

Como a Merkle explorou várias direções antes de se aprofundar

Easton Thomas, diretor criativo associado de UX da Merkle, estava repensando como um cliente de telecomunicações organizava e exibia produtos em seu site, um desafio de arquitetura de informação que exigia considerar muitas abordagens diferentes antes de encontrar a mais adequada.

O desafio

O trabalho exigia uma ampla exploração. Easton precisava testar muitos layouts e abordagens de conteúdo diferentes antes de ter confiança em uma direção. No entanto, com o conteúdo limitado do site existente, não era fácil avaliar se alguma das opções funcionaria com produtos reais na página.

A chave

Usando a tela de trabalho, Easton elaborou sete direções gerais de layout para explorar abordagens diferentes. Em seguida, ele pediu ao agente de IA do Figma que gerasse 10 variações de um dos layouts, depois mais 10, até chegar a cerca de 50. Nesse ponto, o agente já havia esgotado todas as combinações que conseguia encontrar. Easton separou as melhores ideias para prosseguir com o design.

Depois de escolher uma direção, ele continuou trabalhando com o agente Figma para refinar os detalhes. Ele usou o agente para:

• Gerar textos de apoio realistas para que a página não parecesse abstrata para os envolvidos
• Criar anotações de especificação para os desenvolvedores diretamente em seus cartões de anotação
• Revisar o trabalho finalizado e detectar possíveis lacunas não percebidas antes, como considerações de acessibilidade para leitores de tela

Após esse refinamento, ele passou a usar o Figma Make para prototipar a página de busca com interações reais, gerando todos os diferentes estados dos componentes, como menus de filtros, para avaliar o comportamento real da página. Em seguida, ele levou as telas de volta à tela de trabalho para fazer o handoff para os desenvolvedores.

O impacto

Um trabalho de produção que levaria dias foi comprimido para algumas horas. Mas o verdadeiro benefício foi a exploração detalhada proporcionada pelo agente de IA do Figma. Em vez de se comprometer com um dos sete layouts e esperar que fosse o correto, Easton pôde esgotar todo o espaço de opções—50 variações—antes de tomar uma decisão. Quando o trabalho chegou aos desenvolvedores, Easton já havia explorado mais possibilidades e identificado lacunas que, de outra forma, não teria tido tempo de buscar. Como resultado, sentiu-se mais confiante para seguir com uma direção.

Experimente esta abordagem quando:

• Você está construindo uma nova superfície e precisa explorar muitas direções antes de escolher a mais adequada
• Você precisa gerar e testar rapidamente vários estados e casos extremos de um fluxo complexo
• Você quer especificar interações detalhadas com base no design system antes do handoff para os desenvolvedores

3. Iniciar com um protótipo

Ferramentas como o Figma Make permitem que as equipes construam um protótipo funcional em horas, antes que alguém escreva um único requisito. Em vez de começar com uma especificação e esperar que os envolvidos consigam imaginar a visão, as equipes constroem antes algo real como ponto de partida para o que vem a seguir. O protótipo pode ser movido para refinamento na tela de trabalho, apresentação para revisão dos envolvidos ou programação por meio do MCP.

Como a Accor usou o Figma Make para fortalecer a convicção em torno de uma nova visão

A Accor é um grupo de hotelaria global com dezenas de marcas de hotéis. Recentemente, a equipe de design da Accor estava explorando como a IA poderia elevar a experiência na web para uma de suas marcas de luxo.

O desafio

O desafio era descobrir como a experiência de IA realmente deveria ser. Uma abordagem genérica, como acrescentar um chatbot ao site, não refletiria a identidade da marca nem atenderia às expectativas da base de hóspedes. Justine Grave, líder de design de marca da Accor, precisava entregar algo que capturasse o tom emocional e a personalidade que tornam a marca reconhecível.

O momento decisivo

Justine abriu o Figma Make e prototipou algo que não teria tempo para construir manualmente: uma página da web que se reorganizava com base no que o usuário digitava. Uma busca por “golfe” reestruturava a página com propriedades que ofereciam campos de golfe, passeios organizados e experiências relevantes. O Make lidou com as microinterações e transições, e o servidor do Figma MCP conectou tudo ao design system da marca. Em poucos dias, ela já tinha um protótipo funcional ambicioso o suficiente para mostrar à liderança o que era possível e concreto o suficiente para iniciar uma conversa real sobre o que construir em seguida.

O impacto

Agora, Justine e a equipe estão levando o protótipo para os envolvidos das áreas de marca e marketing, mostrando algo concreto como base para avaliação e alinhamento, em vez de uma apresentação de slides.

Experimente esta abordagem quando:

• Você precisa alinhar os envolvidos em torno de uma visão que ainda não existe
• A ideia é muito sutil para ser comunicada por meio de um documento ou apresentação de slides
• Você quer testar se uma ideia tem potencial antes de investir tempo em design e engenharia

4. Aumentar o valor do seu design system

Quando o trabalho passa do design para o código, é importante que a implementação use o design system real

como referência, em vez de padrões genéricos. Antes, esse processo não era automático: os desenvolvedores consultavam as especificações e recriavam manualmente os componentes. Agora, as equipes podem usar o MCP

5 shifts redefining design systems in the AI era

As AI reshapes how we make products, design systems are evolving from libraries of reusable parts into living frameworks that scale taste and craft. We spoke with product leaders and practitioners about the shifts they’re seeing in how design systems are built, used, and maintained.

para passar componentes, tokens e estrutura de layout reais diretamente para o ambiente de programação para que as ferramentas de codificação com IA usem esse sistema real desde o início.

Como a Affirm preservou o contexto do design da tela de trabalho até o código

A Affirm desenvolve produtos financeiros que permitem que os clientes dividam as compras em planos de pagamento durante o checkout. A experiência de checkout está disponível em desktops, web móvel, Android e iOS e manter essas experiências consistentes é um desafio constante.

O desafio

A equipe queria adicionar emblemas aos planos de pagamento para ajudar os clientes a encontrar rapidamente a opção mais adequada, como indicar qual plano tem 0% de juros ou qual seria pago em menos tempo. No entanto, havia muitas combinações para considerar: qual emblema mostrar para qual cliente, em qual checkout, em qual dispositivo. Cada variação precisava permanecer fiel ao design system em todas essas superfícies. Além disso, mesmo uma alteração simples costumava levar cerca de seis semanas para passar do conceito à produção.

A chave

Um GP prototipou as variações de emblema no Figma Make e avançou da ideia ao protótipo funcional em dois dias em vez das habituais seis semanas. Os designers refinaram a direção vencedora na tela de trabalho. Quando a equipe estava pronta para mover esse design para a produção, ela enviou os artefatos de design para o servidor do Figma MCP e o conectou ao Cursor. O MCP passou os componentes, tokens e estrutura de layout diretamente para o ambiente de programação, onde um agente de IA gerou a implementação do front-end. Usando essa implementação como ponto de partida, os desenvolvedores construíram um código de produção que já refletia os designs, em vez de reinterpretá-los do zero.

O impacto

Só a prototipagem passou de seis semanas para alguns dias. Mas o mais importante é que, como o MCP manteve o contexto de design durante todo o processo, os desenvolvedores não precisaram reinterpretar os designs ou reconstruir os componentes do zero. A entrega correspondeu às intenções dos designers.

Experimente esta abordagem quando:

• Você está movendo um design para produção e deseja que a implementação permaneça fiel ao seu design system
• Você precisa manter várias superfícies ou plataformas consistentes com o mesmo design
• Sua equipe de design systems está implementando mudanças e quer que essas atualizações sejam enviadas automaticamente ao ambiente de programação de cada engenheiro para que o novo código reflita o sistema atual desde o início

Hoje, as equipes que lançam produtos excelentes não estão presas a uma única ferramenta ou sequência. Elas escolhem onde começar de acordo com a pergunta que precisam responder e se deslocam entre superfícies acompanhando a evolução do trabalho. Saiba mais sobre os novos fluxos de trabalho que moldam produtos na era da IA.