Como importar um design do Figma para o Framer

Para importar um design do Figma para o Framer, instale o plugin gratuito Figma to HTML with Framer, selecione os frames que você quer e cole no seu projeto do Framer. O Framer mantém suas camadas, grupos e estrutura, então você cai num canvas web de verdade, e não num export estático de código. Tudo depois da colagem é limpeza, e a limpeza é a parte que ninguém avisa.

Como importar um design do Figma para o Framer, passo a passo

Instale o Figma to HTML with Framer pelo Figma Community. Ele é gratuito, e o Framer registra mais de 600 mil usuários, então esse é o caminho oficial, e não uma ponte de terceiros. Selecione as camadas ou frames que você quer mover e rode o plugin. Aparece uma mensagem dizendo quantas camadas foram copiadas. Vá para o seu projeto no Framer, clique no canvas e cole. A própria página Figma to HTML do Framer mostra os mesmos oito passos: instalar o plugin, copiar seus designs do Figma, colar no Framer, seguir editando, deixar responsivo, adicionar efeitos e animações, adicionar páginas e links, publicar.

Cole uma seção por vez

Não selecione o frame da página inteira e mova tudo de uma vez. Uma landing page tem centenas de camadas, e quando alguma coisa cai errada você não tem como saber qual parte causou. Cole o hero, ajeite o hero. Cole a faixa de logos, ajeite a faixa de logos. Desça a página na mesma ordem em que o visitante rola. O Framer diz sem rodeios que algumas estruturas complexas do Figma precisam de limpeza para a web, então se dê unidades pequenas para limpar.

As fontes são a primeira coisa a resolver

A documentação de ajuda do Framer é direta nisso. Quando você importa do Figma, uma fonte personalizada que o Framer não tem é trocada pela fonte padrão do Framer. Seu hero de repente aparece numa sans do sistema, o comprimento de cada linha muda e o espaçamento vai junto. Resolva a tipografia antes de mexer no layout. Adicione uma camada de texto, abra o seletor de fontes no painel da direita, vá até a aba Custom, clique em Upload Fonts e suba seu arquivo. O Framer recomenda .woff2 pela velocidade de carregamento. Depois selecione as camadas de texto importadas e reaplique a fonte. Confira antes a biblioteca que já vem embutida, porque o Framer traz Google Fonts e Fontshare, e uma delas pode já ter a sua tipografia.

O que vem junto e o que fica para trás

Camadas, grupos e hierarquia vêm junto. As configurações de layout também, e a aula da academy do Framer confirma que auto layout, hierarquia e propriedades de fill são levados automaticamente. Fica para trás tudo aquilo que o Figma nunca teve: breakpoints, estados de hover, efeitos de scroll ou componentes no sentido do Framer. O próprio FAQ do Framer manda substituir as peças estáticas por componentes de verdade depois da importação. Leve isso a sério. Reconstrua seu menu, seu botão e seu card como componentes do Framer em vez de ficar com quarenta cópias coladas que você vai ter que editar quarenta vezes.

Transforme os frames colados em stacks que se ajustam

Uma seção colada que ainda carrega larguras fixas em pixels vai estourar no celular. O artigo de troubleshooting do Framer aponta isso como a causa mais comum de uma página não preencher a tela no breakpoint Phone: um elemento mais largo que a viewport do celular, normalmente uma largura fixa tipo 321px, ou um Max Width alto demais. Vá seção por seção, selecione os containers e, na parte Size do painel da direita, troque Width de um número fixo para 100% ou 1fr. Deixe o Max Width só no wrapper de conteúdo, para sua coluna de texto continuar legível num monitor largo. Faça isso primeiro no Desktop, porque os valores do Desktop descem para os breakpoints menores.

Agora adicione o que só o Framer faz

Essa é a recompensa por usar o Framer em vez de exportar código. Configure seus três breakpoints. Dê estados de hover e de toque aos botões. Adicione animações de entrada no scroll das seções. Transforme blocos repetidos em componentes, para uma edição atualizar todas as instâncias. Monte seus estilos de texto no painel Assets, em Styles, com tamanhos por breakpoint para Desktop, Tablet e Mobile, para a tipografia escalar sem você tocar em camada nenhuma. Nada disso existia no arquivo do Figma. É essa parte que transforma um mockup em página.

A ordem em que a gente trabalha

Fontes primeiro, depois cores e estilos de texto. Em seguida, vá seção por seção de cima para baixo, convertendo larguras fixas em fill no caminho. Crie componentes para tudo que se repete. Depois configure os breakpoints, do Desktop para o Tablet e para o Phone, e então adicione as interações. Metadados e links ficam por último, quando a estrutura já parou de se mexer. Nessa ordem, uma landing page fica pronta em um dia. Fora de ordem, leva três dias, porque cada correção desfaz a anterior.