Se você recebeu um layout pronto no Figma e quer transformá-lo em uma interface na Lovable sem manter o Figma aberto, o novo fluxo com arquivo .fig é uma das formas mais diretas de fazer o handoff.
A diferença principal é simples: em vez de enviar apenas uma captura de tela, você entrega o próprio arquivo de design. Isso dá à Lovable mais contexto sobre a estrutura visual que você quer reproduzir.
O que a Lovable lê dentro de um arquivo .fig?
Segundo o changelog oficial da Lovable, o arquivo é analisado no navegador e pode fornecer variáveis, cores, tipografia, estrutura de frames e a imagem de preview salva no próprio arquivo. Esse material é usado como contexto de estilo para a geração.
Como usar um arquivo .fig na Lovable passo a passo
1. Exporte ou obtenha o arquivo .fig
No Figma, tenha em mãos o arquivo de design que representa a tela ou fluxo que você quer usar como referência. Se o projeto veio de um designer ou cliente, peça o arquivo .fig original em vez de trabalhar somente com screenshots.
2. Abra o projeto certo na Lovable
Você pode usar o arquivo em um projeto novo ou em um projeto existente. Se a intenção for adaptar uma interface já criada, prefira trabalhar em uma etapa em que o fluxo principal esteja claro para evitar refazer componentes desnecessariamente.
3. Arraste o .fig para o chat
Solte o arquivo diretamente no chat da Lovable. A novidade adicionada em 16 de agosto permite que a plataforma leia o conteúdo do arquivo e utilize essas informações como contexto visual.
4. Explique exatamente o que deve ser construído
Não envie o arquivo sem contexto. Diga qual frame deve servir de referência, quais páginas devem ser criadas, o que precisa permanecer igual e quais partes podem ser adaptadas para responsividade ou usabilidade.
5. Revise a primeira versão antes de avançar
Compare a versão gerada com o design original. Antes de pedir novas funcionalidades, corrija diferenças de espaçamento, tipografia, proporção dos componentes e responsividade. Isso reduz a chance de o projeto se afastar do layout ao longo das próximas mudanças.
Arquivo .fig ou Figma conectado por MCP: qual usar?
A própria Lovable diferencia os dois cenários. O arquivo .fig é indicado para um handoff mais direto, quando você quer entregar o design como contexto sem manter o Figma aberto. Já para trabalho iterativo em um arquivo vivo, a Lovable recomenda conectar o Figma pelo aplicativo desktop.
- Use arquivo .fig quando o design já está aprovado e você quer entregar uma versão fechada como referência.
- Use o Figma Desktop via MCP quando o arquivo continua sendo atualizado e você quer que a Lovable consulte o design local durante o processo.
- Use screenshots apenas quando você não tem acesso ao arquivo ou precisa mostrar um detalhe visual específico.
Se o seu objetivo é trabalhar com o Figma conectado continuamente, veja também nosso guia sobre:
O conceito de conexão local ajuda a entender por que esse fluxo é diferente de anexar um arquivo estático.
