Importar do Figma para a Base44

​

Antes de importar do Figma

• Certifique-se de estar trabalhando em um arquivo Figma Design. FigJam, Slides e outros tipos de arquivo não são suportados.
  
• Selecione um único frame ou seção que você quer importar. Não use um documento inteiro ou link de página.
• No Figma, clique em Share e em Who has access, defina o link como Anyone with the link – Can view. Copie o link do frame ou seção selecionado e cole em Import from Figma na Base44. Após a importação ser concluída, você pode voltar as permissões do arquivo Figma para privadas, se preferir.

​

Estruturando seu layout no Figma

• Divida a página em seções lógicas: Envolva conteúdo relacionado (por exemplo, um hero, linha de recursos ou rodapé) dentro de frames ou grupos para que cada área da página esteja claramente definida.
• Use auto layout para hierarquia: Aplique Auto Layout a componentes como cards, barras de navegação e blocos de conteúdo repetidos. Por exemplo, um card de informação com imagem, título e descrição deve ser agrupado como Frame ou Group, ou de preferência Auto Layout. Isso ajuda a Base44 a entender como os elementos se relacionam entre si e como devem se redimensionar.
  
• Mantenha o aninhamento significativo: Agrupe elementos que pertencem juntos (por exemplo, imagem + título + descrição em um card) e evite aninhamento profundo e desnecessário que não reflete a estrutura visual.
  
• Alinhe e espace consistentemente: Use preenchimento, espaçamentos e alinhamento consistentes dentro de seus frames para que a Base44 possa preservar seu espaçamento e hierarquia.

​

Trabalhando com vetores e formas

• Achate vetores complexos: Se um vetor é construído a partir de muitos caminhos separados (por exemplo, um ícone feito de múltiplas formas), achate-o em um único vetor sempre que possível.
  
• Contorne traços antes de achatar: Para linhas, círculos, estrelas e formas similares:
  • Use Outline Stroke e depois achate o resultado em um único elemento vetorial.
• Remova elementos ocultos: Apague camadas que estão completamente ocultas ou empurradas para fora da tela para que não interfiram no layout importado.
  
• Simplifique preenchimentos: Se um elemento tem múltiplos preenchimentos, mantenha apenas o que realmente precisa. A Base44 importa apenas o último preenchimento de um elemento.
  

​

Fontes, efeitos e outras limitações

• Fontes:
  • Apenas Google Fonts são totalmente suportadas.
  • Fontes personalizadas são substituídas por uma fonte padrão durante a importação. Você pode atualizar a tipografia depois na Base44.
• Efeitos de design que podem não ser preservados exatamente:
  • Filtros de imagem
  • Múltiplas camadas de fundo em um único elemento
  • Variáveis e estilos baseados em variáveis
• Refinamentos de layout:
  • Ajuste espaçamento, responsividade e interações após a importação usando o chat de IA ou modo Visual Edit.
  • Se algo não parecer certo, ajuste a estrutura diretamente na Base44 ou atualize seu arquivo do Figma e importe novamente a partir de um frame mais limpo.

​

Construindo o resto do seu app

• Use a página importada como sua home page e principal referência para estrutura, layout e linguagem visual.
• Peça ao chat de IA para:
  • Identificar quais páginas adicionais estão faltando (por exemplo, Sobre, Preços, Blog ou Contato).
  • Criar novas páginas que sigam a mesma linguagem de design e princípios de layout.
  • Conectar botões, menus e links na home page às novas páginas internas.

Revise a home page cuidadosamente, incluindo seu conteúdo e estilo de design. Use a home page como referência principal para entender a estrutura e linguagem de design do site. Identifique quais páginas adicionais são necessárias para criar um site completo. Crie as páginas que faltam mantendo a mesma linguagem de design, princípios de layout e estilo visual da home page, para que elas pareçam uma continuação direta e não desconectadas. Quando terminar, volte à home page e conecte todos os botões e links relevantes para que cada um navegue para a página interna apropriada.