A antigravidade recebeu muita atenção no espaço de codificação desde que o Google a retirou do ar, mas mal aparece nos círculos de design, o que é estranho porque pode ser uma das melhores coisas que aconteceram no fluxo de trabalho de design este ano. É um agente, primeiro a GUI, e para quem não mora em um terminal, o apelo é que você não precisa pensar nele como uma ferramenta de codificação.
Você precisa do conector Figma MCP para ser útil em seu fluxo de trabalho de design. Depois de implementado, o Antigravity foi capaz de ler meus projetos como dados estruturados, e seu fluxo de trabalho aberto se mostrou mais útil do que eu imaginava. Estou usando há uma semana ou mais e aqui está o que descobri…
Quer se manter atualizado sobre as últimas IA? O boletim informativo XDA AI Insider é publicado semanalmente com análises aprofundadas, recomendações de ferramentas e informações práticas que você não encontrará em nenhum outro lugar do site. Assine alterando suas preferências de boletim informativo!
A configuração é tão fácil quanto alguns cliques
Mas o plano que você escolhe determina o quanto você pode fazer com ele
A configuração foi quase um não-evento. O Antigravity tem um armazenamento MCP integrado, basta ir em Configurações> Personalizações, procurar Figma e clicar em Adicionar. Durante a instalação, você precisará abrir o aplicativo de desktop Figma, ir ao menu Ações rápidas (Ctrl + K), procurar MCP e marcar a opção “Ativar servidor Desktop MCP”. Pode ser necessário atualizar o conector no Antigravity ou até mesmo reiniciar tudo. Mas a partir daí eles deveriam estar conectados.
Uma coisa que vale a pena saber antecipadamente é que o Figma, na verdade, tem dois servidores MCP. O controle remoto é executado na nuvem, enquanto o desktop local é executado no próprio aplicativo de desktop Figma. Estou usando um servidor de desktop para ver tudo o que você vê aqui, e ferramentas como get_variable_defs para marcadores de design são apenas para desktop. Ao planejar, o servidor remoto funciona em todos os locais, mas o servidor desktop requer um desenvolvedor ou espaço completo em um plano Figma pago.
Dei ao Antigravity um design Figma e recebi de volta um aplicativo real
Por que é diferente do protótipo Figma, embora inicialmente pareça o mesmo
O fluxo de trabalho em si é embaraçosamente simples. Eu tinha um pequeno fluxo de implementação do aplicativo Figma – uma tela inicial e três destinos fora dela (tela de prática, tela de login e tela de modo visitante), e selecionei todos os quatro quadros e fiz com que o Antigravity criasse uma versão interativa da web móvel deles, combinando exatamente com os marcadores de design. O mesmo pensou em toda a pilha e criou um projeto Vite React, instalou o Tailwind, criou uma navegação baseada em estado entre as quatro telas com botões de retorno funcionais e bloqueou a janela de visualização em 390×844 para que eu pudesse visualizá-la como um quadro móvel no navegador. Três minutos de reflexão e tudo estava ao vivo no host local.
Então, por que não usar o próprio modo de prototipagem do Figma?
O protótipo figma é uma demonstração, mas este é o produto. Dentro do Figma, o protótipo vive – você compartilha um link, as pessoas clicam e ponto final. A antigravidade me deu um aplicativo web real em infraestrutura real. Eu poderia enviá-lo para Vercell esta tarde e funcionaria em qualquer telefone do mundo. A precisão também é maior que a do protótipo; Os protótipos do Figma não rolam como aplicativos reais, não respondem ao toque real e as animações parecem um pouco estranhas. O que estou vendo no navegador é o mecanismo de renderização real.
O mais importante, porém, é que os designers podem enviar mais do que apenas especificações. Dois anos atrás, passar de um arquivo Figma para um aplicativo da web sem escrever uma linha de código era ficção científica. E como este é um código real em um projeto real, agora posso adicionar essa tela de login à autenticação real, mudar o cronômetro de meditação para o estado real e replicá-lo como um produto em vez de uma imagem.
O fluxo de trabalho sobre o qual ninguém fala
Pedi uma crítica à Antigravidade
Depois que o aplicativo estava em execução, pedi para comparar o código de ação com o arquivo Figma e me dizer onde eles diferiam. Três segundos de reflexão e ele voltou com o relatório de garantia de qualidade do projeto correto. E quero deixar claro que não foi trivial – detectou bugs visuais reais e significativos.
Por exemplo, o posicionamento gradiente foi desativado, o que mudou toda a sensação do plano de fundo. Os deslocamentos de camada que eram deliberadamente assimétricos no Figma foram perfeitamente centralizados no código, que é exatamente a intenção sutil do designer que é achatada na renderização. A tipografia estava próxima, mas errada tanto no tamanho quanto no espaçamento entre letras, e onde Figma usou SVG gradiente, o código o falsificou com formas CSS. Foram todas pequenas coisas que teriam levado uma hora com o Inspetor Figma.
Portanto, a história não é sobre a IA escrevendo códigos perfeitos a partir de projetos, porque esse não é o caso. É mais que ele escreve um código 90% correto e depois verifica seu trabalho em relação à fonte da verdade.
Pedi tokens de design e recebi todo o sistema
Outro caso de uso que eu queria brincar era apontar o Antigravity para o mesmo arquivo Figma e pedir para extrair cada marcador de design e gerar o JSON e a configuração correspondente do Tailwind. O Figma MCP possui algumas ferramentas para esse tipo de coisa; na verdade, ele vem com seis ferramentas, mas get_variable_defs é aquele que lida especificamente com a recuperação de variáveis.
No entanto, esta ferramenta só retorna marcadores se o design realmente usar variáveis Figma, e a maioria dos designers (inclusive eu) deseja codificar valores hexadecimais posteriormente, o que nem sempre acontece. Então voltou vazio.
Mas, em vez de desistir, a Antigravity fez engenharia reversa do sistema de token a partir do código já gerado. Ele agrupou tudo semanticamente, deu os nomes corretos às coisas e criou um design-tokens.json real com a configuração apropriada do Tailwind conectada para importar dele no momento da construção. Então obtive a estrutura de design como subproduto da construção do aplicativo e agora estou pronto para reutilizar JSON em projetos futuros. Para qualquer pessoa que tenha uma base de código existente e queira construir um sistema sem copiar os códigos hexadecimais em um arquivo de configuração, só isso pode valer a pena configurar o MCP.
A lacuna entre design e entrega está diminuindo
Eu não esperava muito da chegada desse conector, mas acabei com um sistema de construção, revisão e design. Todos esses fluxos de trabalho são essencialmente a mesma coisa, com funções diferentes e, para os designers, é uma combinação que preenche a lacuna entre design e código.
