Importar do Figma

A importação funciona no sentido oposto à exportação: um frame existente do Figma vira uma tela editável da UXMagic, sobre a qual você pode iterar com IA.

Passos#

1. Conecte o Figma em Integrações (uma conexão OAuth — você autoriza a UXMagic uma vez).
2. Cole a URL do frame do Figma, ou escolha o arquivo e o frame no seletor.
3. Escolha se quer importar os estilos do próprio frame como tema do projeto, ou mapeá-lo sobre o tema que você já tem.
4. Importe.

O que vem junto#

• Layout e hierarquia, incluindo a estrutura de auto layout.
• Texto, com seus estilos tipográficos.
• Cores e efeitos, incluindo gradientes e sombras.
• Imagens, copiadas para os recursos do seu projeto.
• Vetores e ícones, reconstruídos como marcação.

O que esperar#

O Figma é um canvas vetorial e a web é um modelo de caixas, então a importação é uma tradução fiel, não uma cópia idêntica byte a byte. Espere estrutura e espaçamentos muito próximos, com pequenas diferenças na renderização do texto e em efeitos sem equivalente direto na web.

Importações são mais precisas quando o frame do Figma usa auto layout. Layouts livres com posicionamento absoluto importam, mas com menos fidelidade estrutural.

Pegar a URL certa#

Selecione o frame no Figma e então clique com o botão direito → Copiar link para a seleção. Um link para o arquivo sem um nó selecionado importa a coisa errada, ou nada.

Depois de importar#

A tela importada se comporta como qualquer outra: edições por chat, modo edição, temas, versões, exportação. É o caminho mais rápido para “já temos designs, mas agora queremos andar mais rápido”.

Sistemas de design e bibliotecas de componentes#

Você também pode importar uma biblioteca de componentes ou um sistema de design para que as telas geradas usem seus componentes. Veja Bibliotecas de componentes.