> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Importando do Figma
> Transforme seus designs do Figma em aplicativos e páginas funcionais. Importe um frame para iniciar um novo aplicativo, ou adicione páginas do Figma a um aplicativo existente a qualquer momento no editor do aplicativo.
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.
* **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.
**Para iniciar um novo aplicativo a partir de um design do Figma:**
1. Vá para [Base44](https://base44.com).
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.
***
## 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.
**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.
* **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.
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 informações mais precisas e atualizadas, consulte a [versão em inglês](/).