4 maneiras para equipes de design explorarem novos territórios com o Figma Make

Com o Figma Make, designers estão encontrando novas maneiras de passar da imaginação à realidade. Seja obtendo adesão, explorando direções divergentes ou colaborando com parceiros multifuncionais, a ferramenta de prompt-to-app ajuda os designers a validar e comunicar ideias—tudo isso enquanto mantêm a consistência com design systems estabelecidos. Isso significa gastar menos tempo construindo layouts redundantes e conectando brainstorm, e mais tempo em gosto, estratégia e visão. Para inspirar ideias para seus próprios fluxos de trabalho, veja como as equipes de design da Maven Clinic, Pendo, ServiceNow e LinkedIn usam o Figma Make como parceiro de design.

1. Coloque suas ideias de volta no roteiro

Uma plataforma de saúde para mulheres e famílias, Maven Clinic ajuda seus membros a navegar em tudo, desde tratamentos de fertilidade e gravidez até parentalidade e pediatria, menopausa e saúde na meia-idade. No início de 2024, eles lançaram o programa de Benefício Gerenciado Maven patrocinado por empregadores, que conecta membros a uma rede fechada de clínicas de fertilidade certificadas. Para cumprir prazos apertados, a equipe teve que adiar certos recursos para o lançamento, incluindo um localizador de clínicas de fertilidade baseado em mapa. Quando chegou a hora de revisitar a ideia, a Gerente de design de produto da Maven, Loric Avanessian, sabia que precisaria de mais do que um mockup para angariar apoio—então, ela recorreu ao Figma Make.

“O superpoder de um designer é ser capaz de transformar ideias e conversas em algo tangível para entusiasmar as pessoas sobre novas funcionalidades”, diz Loric, que alimentou alguns de seus designs iniciais no Figma Make para criar um protótipo de alta fidelidade com o qual as pessoas realmente pudessem interagir. “Parecia que pertencia ao nosso produto e parecia real”, ela continua. “Foi amplamente compartilhado no Slack, nosso CEO fez um comentário sobre isso, e consegui colocá-lo de volta no nosso roteiro quando facilmente poderia estar abaixo da nossa linha de corte de funcionalidades a priorizar este ano.”

Loric enviou o protótipo para outro designer, que fez iterações no design antes de trazê-lo de volta para o Figma Make. Esse protótipo ajudou eles a conseguir um apoio mais profundo e multifuncional e feedbacks mais rápidos e focados. “Isso nos ajudou a identificar as micro-interações que você não percebe até começar a construir”, diz Loric. “Como começamos em 45% em vez de zero, conseguimos projetar, desenvolver, testar e lançar o MVP do localizador de clínicas em menos de quatro sprints, quando ele estava no nosso backlog há dois anos.”

Com o Figma Make, diz Loric, o papel do designer está mudando o foco da execução para o gosto, estratégia e visão. Ela descreve um projeto recente em que o Figma Make precedeu o Documento de Requisitos do Produto (PRD); na verdade, a equipe escreveu os requisitos com base no que estava funcionando e o que estava faltando no protótipo inicial. "O Figma Make ajuda você a resolver o problema da tela de trabalho em branco ao dar-lhe algo para improvisar,” ela diz. "Também ajuda você a experimentar um monte de ideias muito rápido e, em seguida, voltar ao seu conjunto de habilidades básico de designer para refinar e acrescentar polimento."

2. Reserve tempo para explorar o desconhecido

Em alguns casos, um produto totalmente novo tem precedentes claros dos quais se pode desenhar – e em outros, o plano não é tão claro. A empresa de plataforma de IA ServiceNow estava no segundo grupo quando se propôs a criar um Design para um painel que desse aos clientes uma visão geral do ROI de diferentes agentes de IA. “O Figma Make tem sido excelente neste setor porque há muitas incógnitas que são incrivelmente difíceis de pesquisar”, diz Guy Meyer, designer sênior de produtos da ServiceNow.

Além disso, equipes separadas na ServiceNow tinham ideias diferentes sobre como abordar a hierarquia de informações no painel. “O Figma Make me deu um mapa para entender, de alguma forma, o que as pessoas precisariam ver em um painel”, diz Guy. “Em cinco minutos, eu poderia validar algumas de nossas ideias.” Embora fosse esclarecedor entender o que estava funcionando, foi ainda mais instrutivo ver onde o protótipo inicial falhou. Por exemplo, a grade de agentes de IA que o Figma Make apresentou não escalaria, diz Guy, porque se tornaria grande demais: “Foi uma boa solução para hoje, quando a maioria das empresas está no início de sua jornada de IA, mas estamos tentando preparar o terreno para o futuro quando os clientes possam estar trabalhando com milhares de sistemas. Então, começamos a buscar soluções mais personalizadas.”

A facilidade com que as pessoas podem solicitar novas ideias "democratizou o design", diz Guy. "Qualquer pessoa pode criar sua própria versão, e somos capazes de escolher as peças que gostamos." Isso também remove o ego e o compromisso de tempo que o prende a uma ideia." Enquanto a equipe levaria semanas para fazer o Design e obter feedback sobre diferentes direções, o Figma Make reduz o ciclo para dois ou três dias. “O Figma Make é a ferramenta que alinha parceiros multifuncionais porque pode executar rapidamente artefatos para discutirmos”, diz Guy. “Isso eleva o papel dos designers de apenas executar para aprimorar a qualidade do que a IA constrói.”

3. Colabore e desenvolva novas interfaces

Com ferramentas para aproveitar análises comportamentais e agente, criar guias no app e capturar feedback qualitativo, a Pendo ajuda as equipes de produto a tomar decisões mais informadas. Quando o Designer de Produto Sênior Brian Greenbaum foi encarregado de criar uma UI conversacional para a Pendo, agora chamada de modo Agente, ele optou pelo Figma Make. "Era a ferramenta certa porque A, eu queria que parecesse com a Pendo; B, eu queria criar várias variações; e C, era um design experimental. Eu queria experimentar com o tempo e como as mensagens iriam aparecer e desaparecer da visualização”, ele diz.

Começando com um quadro do Figma Design, Brian criou uma interface no Figma Make para iterar sobre como as mensagens de raciocínio e as respostas de chamadas de ferramenta seriam transmitidas. Para experimentar diferentes variações, ele adicionou um menu suspenso que permitia escolher entre opções para visualizar mais minimalistas e detalhadas, e entre texto em linha única ou empilhado. Qualquer pessoa podia acessar o arquivo, clicar e entender como a UI seria visualmente e sensorialmente. Finalmente, a equipe decidiu manter um rastreamento mais persistente de mensagens para orientar o usuário dentro da ferramenta. Sem um artefato de design, diz Brian, "você está debatendo sobre o que está na mente das pessoas. Se eu descrevo algo para você, você tem uma visualização do que isso significa, e eu tenho uma visualização, e elas podem não estar alinhadas."

Ter um design tangível também significava que outras pessoas poderiam se inspirar no trabalho de Brian. Quando um colaborador sugeriu substituir o ícone de carregamento circular pelo logotipo animado da Pendo, ele rapidamente sugeriu uma maneira de ativar isso. “Antes, eu teria feito designs estáticos porque a prototipagem poderia não ter valido a pena com todas essas variações”, diz Brian. “Mas com código, consigo fazer isso mais rápido.”

4. Incorpore seu design system nas explorações iniciais

No LinkedIn, a equipe de design systems se concentra em fornecer aos designers os estilos, dados e ferramentas de que precisam para criar experiências que estejam visualmente alinhadas com o restante da plataforma. Diz Grant Blakeman, engenheiro de Design sênior no LinkedIn, "Assim como eles vêm até nós e perguntam, ‘Qual padrão eu preciso para esta parte do app?’, eles também estão vindo até nós em busca de ferramentas."

Para esse fim, a equipe criou um modelo iniciante no Figma Make que gera automaticamente três variações de qualquer Design desde a primeira execução de um prompt, permitindo que os designers facilmente criem layouts para web, mobile e tablet, e alternem entre modos claro e escuro. “Estávamos tentando obter saídas mais determinísticas que obedecessem precisamente não apenas aos nossos componentes e estilos, mas também aos nossos padrões de produto,” diz a Designer de Produtos Cherin Yoo. Ela também forneceu ao modelo diretrizes para componentes frequentemente usados e rampas de cores internas CSS. “Os LLMs fazem escolhas dentro dos limites que damos a eles,” explica Cherin, “e este modelo nos ajuda a estreitar esses limites.” Recentemente, a equipe usou o modelo para demonstrar uma página de cadastro de plano premium para a equipe de liderança.

Para manter as informações dos usuários privadas durante apresentações, o Designer de Produto Ray Sun também personalizou o código, integrando um conjunto de metadados que preenche Designs com conteúdo fictício de empresas e pessoas fictícias. Dessa forma, os designers podem permanecer no fluxo do Figma Make enquanto sabem que estão inserindo dados legalmente aprovados no modelo.

Em 2003, o Design Council desenvolveu o modelo Double Diamond do processo de Design, que identifica quatro fases distintas: Descobrir, Definir, Desenvolver e Entregar.

Do ponto de vista do fluxo de trabalho, Figma Make permite que os designers não apenas explorem de forma mais ampla, mas também se comuniquem com mais eficácia, diz Giuliano Manno, diretor de design system do LinkedIn. “No clássico padrão de pensamento de design Double Diamond, o Figma Make nos permite esticar os dois vértices do diamante porque nos permite realizar um trabalho mais rápido de divergência e exploração”, ele diz. “É também muito bom em transferir um modelo mental sobre padrões de UX quando você está em conversas com engenheiros e gerentes de produto.” “Em cinco minutos, posso usar o Figma Make para gerar algo que ajuda a ideia a ser compreendida por todos.”

"É uma ferramenta de comunicação com uma combinação de fidelidade e facilidade de uso que nunca tivemos com outros tipos de protótipos," concorda Grant, que vê ferramentas como o Figma Make diminuindo a barreira para designers experimentarem programar. "Acho que os designers vão evoluir para se tornarem mais técnicos, e estou observando designers que usam o Figma Make ficarem menos receosos de programar e começarem a brincar com as coisas. Agora eles podem criar demonstrações que consumiriam muito tempo de um engenheiro — ou que simplesmente não teriam recursos alocados para serem feitas."

O Figma Make saiu da versão beta e está atualmente disponível para todos os usuários experimentarem.