Antes de importar do Figma
Preparar seu arquivo Figma corretamente ajuda a Base44 a ler seu design e recriá-lo como um layout funcional.- Certifique-se de estar trabalhando em um arquivo Figma Design. FigJam, Slides e outros tipos de arquivos não são suportados.
Figma design files are supported in Base44
- Selecione um único frame ou seção que deseja importar. Não use um documento completo ou link de nível 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 para o frame ou seção selecionada e cole-o em Import from Figma na Base44. Após a importação ser concluída, você pode definir as permissões do arquivo Figma de volta para privado se preferir.
Import from Figma foca no frame ou seção selecionada. Outras partes do arquivo Figma não são trazidas para a Base44 a menos que você as importe separadamente.
Estruturando seu layout do Figma
Uma estrutura clara no Figma torna mais fácil para a Base44 construir um layout responsivo que corresponda à sua intenção.- 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 seja claramente definida.
- Use auto layout para hierarquia: Aplique
Auto Layouta componentes como cards, barras de navegação e blocos de conteúdo repetidos. Por exemplo, um card de informações com uma imagem, título e descrição deve ser agrupado comoFrameouGroup, ou preferencialmenteAuto Layout. Isso ajuda a Base44 a entender como os elementos se relacionam entre si e como devem redimensionar.
Selecting two elements for auto layout in Figma
- 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 reflita a estrutura visual.
A frame group after applying auto layout in Figma
- Alinhe e espace consistentemente: Use preenchimento, espaços e alinhamento consistentes dentro dos seus frames para que a Base44 possa preservar seu espaçamento e hierarquia.
Trabalhando com vetores e formas
Limpar elementos vetoriais antes da importação torna o posicionamento e a renderização mais precisos. Achatar e simplificar vetores reduz surpresas em como os elementos alinham, escalam e renderizam uma vez que estão na Base44.- 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 puder.
Flatten complex vectors into a single vector in Figma
- Contorne traços antes de achatar: Para linhas, círculos, estrelas e formas semelhantes:
- Use Outline Stroke e depois achate o resultado em um único elemento vetorial.
- Remova elementos ocultos: Exclua camadas que estão completamente ocultas ou empurradas para longe da tela para que não interfiram no layout importado.
Remove any hidden elements in Figma
- Simplifique preenchimentos: Se um elemento tem vários preenchimentos, mantenha apenas o que realmente precisa. A Base44 importa apenas o último preenchimento em um elemento.
An element with multiple fills in Figma
Fontes, efeitos e outras limitações
Algumas partes do seu design do Figma são adaptadas durante a importação para que o layout resultante funcione de forma confiável na Base44.- 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 dentro da 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 o modo Visual Edit.
- Se algo não parece certo, ajuste a estrutura diretamente na Base44 ou atualize seu arquivo Figma e importe novamente de um frame mais limpo.
Adicionar uma página do Figma
Uma vez que seu aplicativo está no construtor, você pode continuar adicionando frames do Figma como novas páginas. Você não está limitado à importação inicial: cada frame que você adiciona se torna uma nova página no seu aplicativo. Para adicionar uma página do Figma:- Abra seu aplicativo no construtor.
- Na entrada do chat, clique no ícone +.
- Selecione Add page from Figma.
- Cole um link para o frame do Figma que deseja importar.
- Clique em Add page.
O acesso de editor é necessário para adicionar páginas do Figma. Viewers não podem adicionar páginas. O aplicativo também não pode estar processando outro prompt ao mesmo tempo. Aguarde qualquer geração ativa terminar antes de adicionar uma página.
Construindo o resto do seu aplicativo
Uma vez que seu frame Figma é importado, você pode tratar a nova página como a base para um aplicativo ou site completo.- Use a página importada como sua página inicial 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, About, Pricing, Blog ou Contact).
- Criar novas páginas que sigam a mesma linguagem de design e princípios de layout.
- Conectar botões, menus e links na página inicial às novas páginas internas.
Revise a página inicial cuidadosamente, incluindo tanto seu conteúdo quanto seu estilo de design. Use a página inicial como referência principal para entender a estrutura e a linguagem de design do site. Identifique quais páginas adicionais são necessárias para criar um site completo. Crie as páginas ausentes mantendo a mesma linguagem de design, princípios de layout e estilo visual da página inicial, para que pareçam uma continuação direta e não desconectada. Quando terminar, retorne à página inicial e conecte todos os botões e links relevantes para que cada um navegue para a página interna apropriada.
Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a versão em inglês.