Na sua conta do Figma, clique em “Ações” na barra de ferramentas inferior e selecione a aba “Plug-ins e widgets”. Na barra de pesquisa, digite o nome do Tilda “Figma to Tilda ” e clique nele ou adicione o plug-in através do link.

Clique no botão Executar para ativar o plug-in.

Está pronto! Agora você pode importar camadas e elementos para Tilda.

Depois de adicionar o plug-in, selecione a camada desejada no layout. A camada selecionada será exibida no campo “Camadas selecionadas” da janela do plug-in.

Na janela do plugin, clique no botão “Preparar para copiar ” para preparar as camadas para a importação.

Quando o quadro estiver pronto para ser importado, clique no botão “Copiar para a área de transferência ”.

Vá até Tilda abra Zero Block clique no atalho de teclado: Ctrl+V no Windows ou Command+V no Mac.

Você pode importar o Frame como um grupo separado ou com as configurações aplicadas à prancheta e todos os elementos atuais substituídos.

Se a prancheta já contiver elementos, você também pode inserir o Frame como um grupo, mas essa opção excluirá todos os elementos da prancheta.

Quando a opção “Aplicar configurações à prancheta” estiver selecionada, as configurações da camada raiz do Quadro serão aplicadas no Zero Block: a cor ou imagem de fundo, o Layout Automático e outras configurações suportadas pelo Tilda alteradas.

Quando forem inseridos vários quadros, a janela pop-up com as opções de importação não será exibida.

Vá para a página principal do Figma e clique em View Profile → Settings (Ver perfil → Configurações) abaixo da foto do seu perfil.

Em seguida, vá para a guia Security (Segurança), acesse o bloco Personal access tokens (Tokens de acesso pessoal) e clique em Generate new token (Gerar novo token).

Na nova janela, especifique o nome do Tilda e selecione seu prazo de validade. Por exemplo, 1 dia, 7 dias, 30 dias e 90 dias.

Na área “Scopes”, marque as caixas de seleção “Usuário atual”, “Recursos de desenvolvimento”, “Conteúdo de arquivos”, “Versões de arquivos”, “Ativos da biblioteca”, “Conteúdo da biblioteca” e “Projetos”. Agora, clique em “Gerar token”.

Copie essa chave depois de criá-la para inseri-la nas configurações de importação do Tilda. Não é possível visualizar a chave novamente; basta criar uma nova chave.

Clique no menu dos três pontos no Zero Block selecione a opção “Importar do Figma”.

Acesse o Figma. Abra o layout, selecione o quadro desejado e copie o link do quadro na barra de endereços do navegador.

Na janela que se abre, adicione o link para o Frame e o token da API obtido nas configurações do Figma.

Aguarde até que o layout seja importado.

Se você tiver adicionado o link correto e não houver erros no lado da API do Figma, o layout será importado para o Zero Block.

Observe que, por padrão, as imagens são carregadas dos servidores do Figma; portanto, se você quiser enviá-las para Tilda, é preciso acessar as configurações dos elementos que contêm imagens e clicar em “Enviar para Tilda”.

Os layouts devem ser criados em um quadro com largura de 1200 px.

Recomendamos importar o layout para vários blocos, em vez de adicionar o layout inteiro a apenas um bloco.

Qualquer grupo pode ser importado como uma imagem. Para isso, é necessário especificar “image” no nome do grupo. Se você especificar “svg”, ele será importado como um arquivo SVG.

Você também pode importar grupos. Se houver outros grupos dentro dele, todos os elementos ficarão no grupo de primeiro nível.

Para importar um botão, é necessário agrupar a forma e o texto e adicionar “botão” ao nome do grupo. A propriedade de alinhamento do texto também será importada; por isso, recomendamos que você defina a largura do elemento de texto igual à da forma.

Se a forma tiver um efeito que não possa ser reproduzido no Zero Block, ela será importada com a imagem do efeito no fundo.