Skip to main content
A Base44 se conecta ao Figma para que você possa construir diretamente a partir dos seus designs. Importe um frame do Figma ao iniciar um novo aplicativo, ou adicione páginas do Figma a um aplicativo existente a qualquer momento durante o desenvolvimento.

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.

​
Iniciando um 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.
O menu de adição no prompt da página inicial da Base44 com Import from Figma destacado

Import a design from Figma to start a new app

Para iniciar um novo aplicativo a partir de um design do Figma:
  1. Vá para Base44.
  2. Clique no ícone + na caixa de prompt.
  3. Clique em Import from Figma.
  4. Clique em Connect to Figma.
  5. Siga as instruções na tela para dar acesso ao Figma para a Base44.
  6. Cole seu link do Figma e clique em Generate.
A importação foca no frame ou seção selecionada. Outras partes do arquivo Figma não são incluídas a menos que você as importe separadamente.

​
Adicionando 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.
O menu de adição no editor do app com Add page from Figma destacado

Add a page from Figma in the app editor

Para adicionar uma página do Figma:
  1. Abra seu aplicativo no editor do aplicativo.
  2. No chat de IA, clique no ícone + e selecione Add page from Figma.
  3. No Figma, clique com o botão direito no frame ou seção que deseja importar.
  4. Escolha “Copy/Paste as”, depois selecione “Copy link to selection”.
  5. 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.
Uma página inicial bem estruturada com seções claras e componentes consistentes oferece os melhores resultados ao estender o design em um aplicativo completo.
  • 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 Layout a 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 como Frame ou Group, ou preferencialmente Auto Layout. Isso ajuda a Base44 a entender como os elementos se relacionam entre si e como devem redimensionar.
    Canvas do Figma com duas camadas selecionadas e Add auto layout destacado no menu de clique direito

    Adicionando auto layout a dois elementos selecionados

  • 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.
    Lista de camadas do Figma mostrando o Frame 12 envolvendo Paragraph e Frame 11, com o painel Auto layout ativo

    O grupo de frames depois de aplicar o auto layout

  • 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.
    Um ícone de estrela formado por seis camadas vetoriais separadas, com Flatten destacado no menu de clique direito

    Achatando um ícone com vários caminhos em um único vetor

  • 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.
    Lista de camadas do Figma com uma camada de imagem selecionada na parte inferior, mostrando os ícones de bloqueio e visibilidade

    Uma camada de imagem selecionada no 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.
    Painel Fill do Figma listando cinco preenchimentos em um elemento: três imagens, um preenchimento vermelho e um gradiente linear

    Um elemento com cinco preenchimentos empilhados

​
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 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.
Se seu design depende muito de efeitos não suportados ou configurações complexas de variáveis, espere diferenças visuais após a importação e planeje refinar o resultado dentro da Base44.

​
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.
Você pode usar um prompt como:
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.
Se você vê padrões repetidos no seu design importado (como cards, linhas de recursos ou blocos de call-to-action), mencione-os no seu prompt para que a IA possa reutilizar esses padrões nas novas páginas.
Esta página foi traduzida usando IA. Para as informações mais precisas e atualizadas, consulte a versão em inglês.