Automatize GitHub + Figma com GAIA
Vincule specs de design a PRs de código e avise designers no deploy
Times de design e engenharia trabalham em paralelo, com designers no Figma e desenvolvedores no GitHub, mas a passagem entre os dois raramente é tranquila. Desenvolvedores caçam o frame certo enquanto o designer já passou para a próxima tela. Designers não sabem quando seus designs entraram em produção. Revisões acontecem em ferramentas separadas sem contexto compartilhado, e divergências de versão entre o arquivo de design e a implementação passam despercebidas até o QA pegar.
O GAIA vincula os dois criando uma conexão contínua entre as especificações de design e o código que as implementa. Quando um desenvolvedor abre um pull request, o GAIA anexa automaticamente o frame ou componente relevante como comentário no pull request, para que revisores comparem a intenção do design com a implementação sem sair do GitHub. Quando esse pull request mescla, o GAIA avisa o designer no Figma (ou pelo canal preferido) para que ele verifique a implementação e aprove.
Isso serve bem a times de produto que praticam desenvolvimento liderado por design. Designers ficam por dentro do progresso da engenharia sem cobrar desenvolvedores, desenvolvedores têm sempre a spec certa anexada ao pull request e nada entra em produção sem que o time de design possa revisar.
5 coisas que você pode automatizar
Tudo que o GAIA pode fazer quando GitHub e Figma estão conectados.
Anexe specs de design a pull requests no automático
Quando um desenvolvedor abre um pull request, o GAIA busca o frame correspondente pelo nome do branch, título do pull request ou link para o frame no corpo do PR e publica um link direto de prévia como comentário, para que revisores comparem implementação e intenção de design sem trocar de ferramenta.
Avise designers quando os designs entram em produção
O GAIA observa pull requests mesclados que implementam componentes ou telas específicos e envia uma notificação ao designer responsável via comentários no arquivo de design, Slack ou e-mail, para que ele verifique se a implementação corresponde ao design aprovado.
Acompanhe o status de implementação no Figma
O GAIA atualiza anotações ou comentários de frames com o status do pull request (aberto, em revisão, mesclado ou revertido), dando aos designers um rastreador de implementação em tempo real dentro dos arquivos de design.
Sinalize divergências design-código para revisão
Quando um componente é atualizado depois que um pull request relacionado já foi mesclado, o GAIA cria uma issue sinalizando a possível divergência entre o design novo e o código em produção, para que a equipe decida se atualiza a implementação.
Gere changelogs de mudanças de design nos repositórios
Quando um designer publica uma versão nova de uma biblioteca de componentes, o GAIA publica um resumo das mudanças como issue ou comentário de pull request nos repositórios afetados, para que desenvolvedores saibam quais componentes podem precisar de atualização na implementação.
Como configurar
Conecte GitHub e Figma ao GAIA em três passos.
- 1
Conecte o GitHub e o Figma ao GAIA
Vincule seus repositórios e arquivos de design da equipe nas configurações de integração do GAIA. O GAIA usa OAuth do GitHub e um token de acesso pessoal do Figma para ler estruturas de arquivos e publicar comentários sem precisar de permissões de edição.
- 2
Configure seu mapeamento de design para código
Diga ao GAIA como associar branches ou pull requests a páginas e frames de design: por convenção de nomes, links explícitos em descrições de PR ou nomes de componentes. Você configura preferências de aviso aos designers por arquivo ou página.
- 3
O GAIA conecta design e código no automático
O GAIA cuida da comunicação entre as duas ferramentas continuamente. Specs de design aparecem nos pull requests sem esforço do desenvolvedor, e designers recebem updates automáticos quando o trabalho deles entra em produção, sem pings no Slack nem reuniões de status.
Perguntas frequentes
Explorar integrações individuais
Compare the tools
Mais automações com 
GitHub
As 20 automações de GitHub
Mais automações com 
Figma
As 11 automações de Figma
Guias na documentação
Explorar mais combinações de automação
O GAIA suporta dezenas de combinações de ferramentas. Explore mais formas de automatizar seu fluxo de trabalho.
Explorar marketplace