Como importar um design Figma para seu site

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 token Tilda e selecione seu período de expiração. Por exemplo, No expiration - Indefinite (Sem expiração - Indefinido). Você também pode escolher o período de expiração do token de 1 dia, 7 dias, 30 dias e 90 dias.

Na área Scopes (Escopos), agora você precisa selecionar os direitos de acesso para a chave.

Nas opções Current user (Usuário atual), Dev resources (Recursos de desenvolvimento), File content (Conteúdo do arquivo), File versions (Versões do arquivo), Library assets (Ativos da biblioteca), Library content (Conteúdo da biblioteca) e Projects (Projetos), selecione o valor Read-only access (Acesso somente leitura). Em seguida, clique em Generate token (Gerar token) para criar um token.

Copie essa chave depois de criá-la para especificá-la nas configurações de Importar para o Tilda . Você não pode visualizar a chave novamente, basta criar uma nova chave.

Clique no menu de três pontos no canto superior direito do site Zero Block e selecione a opção "Import from Figma" no menu suspenso.

No Figma, selecione o Layout desejado no painel Layers, o Frame necessário e copie o link do Frame da barra de endereços do navegador.

Para que a importação esteja correta, você precisa adicionar um quadro Figma a um quadro Zero Block

Cole esse link no campo URL do layout e adicione o token de API obtido nas configurações do Figma ao campo Token de API.

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.

Observação: Por padrão, as imagens são carregadas dos servidores da Figma. Portanto, se quiser carregá-las em Tilda, você precisará ir para as configurações dos elementos que contêm imagens e clicar em Upload to Tilda.

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

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

Qualquer grupo pode ser importado como uma imagem. Para isso, você precisa especificar "image" no nome do grupo no Figma. Se você especificar "svg", ele será importado como um arquivo SVG.

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

Para importar um botão, é necessário mesclar a forma e o texto em um grupo e nomeá-lo como "botão".

A propriedade de alinhamento do texto também será importada, portanto, recomendamos que você faça com que a largura do elemento de texto seja a mesma da forma.

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