Como montar um arquivo do Figma que acelera a construção no Framer

Monte seu arquivo do Figma assim. Deixe o frame de desktop com 1200 de largura. Coloque auto layout em todo container, inclusive no frame de fora. Decida fill ou fixo para cada elemento ainda dentro do Figma. Faça isso e uma landing page passa para o Framer em uma tarde. Pule essa parte e você reconstrói metade da página na mão, que é a diferença entre um build de um dia e um de três.

Desenhe nas larguras que o Framer usa de verdade

O canvas do Framer vem com três breakpoints, e as páginas de produto dele mostram as abas Desktop 1200 e Tablet 810. O código publicado no framer.com bate com isso. As imagens responsivas são servidas com regras para min-width 1200px, para 810px até 1199.98px e para max-width 809.98px. Então monte um frame de desktop com 1200 de largura. Adicione um frame de tablet com 810 se o layout mudar mesmo ali. Adicione um frame de celular por volta de 390. Desenhe em 1440 e torça pelo melhor, e você termina com um hero que só fica bom no seu próprio monitor.

Auto layout em tudo, inclusive no frame de fora

A aula da academy do Framer diz que auto layout, hierarquia e propriedades de fill são levados na importação. É esse o truque todo. Uma seção feita com auto layout chega no Framer como um stack que já sabe se ajustar. Uma seção feita arrastando caixas até a posição chega como camadas soltas que você tem que reconstruir. Envolva cada seção num auto layout vertical. Envolva cada linha num horizontal. Use gaps em vez de afastar as coisas com espaço vazio. Toda camada fora de um frame com auto layout é uma camada que você vai construir duas vezes.

Decida fill ou fixo antes de entregar

No Figma, deixe o wrapper da seção em fill container. Dê ao wrapper de conteúdo interno uma largura máxima fixa, tipo 1200 ou 1140. Coloque os cards de uma linha em fill, para dividirem a largura por igual. Isso mapeia direto no Framer, onde você põe Width em 100% ou 1fr e coloca o Max Width no wrapper de conteúdo. O artigo de troubleshooting do Framer diz que uma largura fixa ou um Max Width grande demais é o motivo mais comum de uma página não preencher a tela no breakpoint Phone. Cada número fixo esquecido que você deixa no Figma é um bug que você passa adiante.

Nomeie seus estilos de texto e reutilize

Nomeie sua tipografia e reutilize: H1, H2, H3, corpo grande, corpo, legenda, eyebrow. No Framer você reconstrói isso uma vez no painel Assets, em Styles, e depois aplica pelo painel da direita, em Text e Styles. Cada estilo de texto do Framer pode carregar os próprios tamanhos por breakpoint para Desktop, Tablet e Mobile, cobrindo tamanho de fonte, altura de linha, espaçamento entre letras e espaçamento entre parágrafos. Se o seu arquivo do Figma tem quatorze tamanhos de título ligeiramente diferentes, você vai construir quatorze estilos de texto ou conviver com uma tipografia que fica errada no celular.

Confira a licença da fonte já no moodboard

O Framer inclui Google Fonts e Fontshare, e deixa você subir arquivos próprios pela aba Custom do seletor de fontes. O Framer também avisa para você conferir se tem a licença certa antes de subir uma fonte para um site. Uma licença de desktop cobre um mockup no Figma. Ela não cobre uma página no ar. Resolva isso enquanto escolhe a tipografia, e não na véspera do lançamento, porque trocar a fonte muda todas as quebras de linha da página.

Exporte as imagens no tamanho em que elas aparecem

O Framer comprime as imagens na borda para WebP e AVIF e redimensiona para cada dispositivo, como a página de performance dele documenta. Isso resolve a entrega. Isso não desfaz um print colado com 4000 pixels de largura, e não transforma um logo em PNG num SVG. Exporte imagens raster com cerca do dobro do tamanho em que elas aparecem. Use SVG para logos e ícones. Escreva o texto alternativo enquanto o conteúdo ainda está fresco na sua cabeça.

O checklist de entrega do arquivo do Figma

Antes de dar o arquivo do Figma como pronto, rode sete checagens. O frame de desktop tem 1200 de largura. Toda seção está dentro de um frame com auto layout. Os wrappers de seção estão em fill, e os wrappers de conteúdo carregam a largura máxima. A tipografia roda em estilos nomeados, sem tamanhos órfãos. As fontes têm licença web e os arquivos estão prontos para subir. As imagens estão exportadas em tamanhos sensatos, com SVG para tudo que é vetor. Os nomes das camadas estão do jeito que você quer ver na lista de camadas do Framer, porque esses nomes chegam exatamente como você deixou.