Requisitos do Figma
- Vaga no Figma: Você deve ter uma vaga de Editor. O Figma bloqueia o acesso à API para contas View e Collaborator.
- Arquivo de design: Você deve usar um arquivo Figma Design. FigJam, Slides e outros tipos de arquivos não são suportados.
- Link de frame público: O link do seu frame deve estar definido como Anyone with the link – Can view. No Figma, clique em Share para atualizar isso. Você pode defini-lo de volta como privado após a importação.
Você pode conectar uma conta Figma por workspace.
Iniciar um novo aplicativo a partir do Figma
Use Import from Figma na tela inicial para transformar um frame do Figma em um novo aplicativo Base44. A Base44 recria o layout, estrutura e estilo visual do seu design como ponto de partida.
- Vá para Base44.
- Clique no ícone + na caixa de prompt.
- Clique em Import from Figma.
- Clique em Connect to Figma.
- Siga as instruções na tela para dar acesso ao Figma para a Base44.
- Cole seu link do Figma e clique em Generate.
Adicionar uma página do Figma
Uma vez que seu aplicativo está no editor do aplicativo, você pode adicionar frames do Figma como novas páginas a qualquer momento. Você não está limitado à importação inicial. O acesso de editor é necessário para adicionar páginas do Figma. Viewers não podem adicionar páginas, e você deve aguardar qualquer geração ativa terminar antes de adicionar uma página.
- Abra seu aplicativo no editor do aplicativo.
- No chat de IA, clique no ícone + e selecione Add page from Figma.
- No Figma, clique com o botão direito no frame ou seção que deseja importar.
- Escolha “Copy/Paste as”, depois selecione “Copy link to selection”.
- Cole o link no diálogo e clique em Add page.
Diretrizes de importação do Figma
Preparar seu arquivo Figma antes de importar ajuda a Base44 a ler seu design e recriá-lo como um layout limpo e preciso. Siga estas diretrizes para obter os melhores resultados.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.
- 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.
- 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.
- 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.
- 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.
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.
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.