Começar de graça
Menu da documentação

Converter a partir do Figma

Passo a passo: transforme um ficheiro ou frame do Figma em conteúdo WordPress com uma ligação e um token de acesso pessoal, ou com um JSON exportado.

O Figma está disponível em todos os planos, incluindo o Free. Pode ligar-se com uma ligação e um token de acesso pessoal, ou carregar o JSON exportado do Figma.

Uma página ou um frame por projeto

O Tapeto converte a primeira página do ficheiro do Figma — ou apenas o frame específico quando a sua ligação aponta para um. Para converter um site com várias páginas, crie um projeto por frame (copie a ligação de cada frame). Cada projeto conta para o seu limite mensal.

Antes de começar

  • Um ficheiro do Figma que consiga abrir (precisa, pelo menos, de acesso de leitura).
  • Um token de acesso pessoal do Figma (apenas para o método da ligação).
  • O seu WordPress, se for publicar: veja o guia de ZIP / HTML.

Passo 1 — Prepare o design no Figma

O Tapeto lê a estrutura das camadas, por isso um ficheiro arrumado dá um melhor Fidelity Score.

  1. Construa cada página como um Frame com largura de ambiente de trabalho.
  2. Use o Auto layout sempre que puder: o auto layout horizontal e vertical torna-se em linhas e colunas com os respetivos espaçamentos e preenchimentos.
  3. Dê nome às camadas de acordo com a função — Header, Hero, Nav, Card, Button, Footer, H1, H2… Os nomes ajudam o Tapeto a decidir o que é uma secção, um menu ou um botão.
  4. Escreva o texto em camadas de texto reais (não em contornos) e use tipos de letra disponíveis no Google Fonts.
  5. Elimine ou deixe de fora as camadas de que não precisa: as camadas ocultas são ignoradas.

Passo 2 — Crie o projeto

Método A — Ligação e token

  1. No Figma, clique com o botão direito no frame → Copy/Paste as → Copy link to selection (ou copie o URL do ficheiro para converter a primeira página).
  2. Crie um token: Figma → menu do seu perfil → Settings → Security → Personal access tokens → Generate new token. Basta o acesso de leitura ao conteúdo do ficheiro. Copie-o (começa por figd_).
  3. No Tapeto, clique em Novo projeto, escreva um nome e abra o separador Figma.
  4. Cole a ligação em URL do arquivo ou frame do Figma e o token em Token de acesso pessoal do Figma.
  5. Clique em Criar projeto.

O token é usado uma só vez para descarregar o ficheiro e nunca é guardado. A ligação deve ser do tipo https://www.figma.com/design/….

Método B — Carregar o JSON

  1. Exporte o JSON do ficheiro a partir da API REST do Figma (GET /v1/files/:file_key com o seu token) e guarde-o como ficheiro .json até 5–200 MB (conforme o plano).
  2. No Tapeto, clique em Novo projeto, abra o separador Figma e largue o .json na zona de baixo.
  3. Clique em Criar projeto.

Aguarde até o projeto estar «processado». Se terminar em «erro», a mensagem diz-lhe porquê (veja a tabela abaixo).

Passo 3 — Escolha o builder e converta

  1. Abra o projeto e escolha Gutenberg (todos os planos) ou Elementor (a partir do Starter).
  2. Clique em Converter e aguarde até a conversão estar concluída.
  3. Veja a Pré-visualização e o Fidelity Score. Confira as imagens: se faltar alguma, substitua-a na Biblioteca de multimédia depois de importar.

Passo 4 — Leve o resultado para o WordPress

Conta Free

  1. Abra o separador Conteúdo e clique em Descarregar ficheiros (ou Copiar).
  2. No WordPress: Páginas → Adicionar nova, menu de três pontos → Editor de código, cole o conteúdo e volte ao editor visual.
  3. Se o design tiver cabeçalho ou rodapé, descarregue-os no separador Header / Footer / Sidebar e cole-os nas partes de modelo correspondentes.
  4. O separador Instruções detalha os passos exatos. Exportar WXR e Publicar no WordPress estão bloqueados no Free.

Conta paga (Starter, Pro, Agency, Studio)

  1. Escolha Elementor se preferir (a partir do Starter).
  2. Clique em Exportar WXR e importe-o em Ferramentas → Importar → WordPress, ou ligue o seu site e clique em Publicar no WordPress. Ambas as opções estão explicadas passo a passo no guia de ZIP / HTML.
  3. Ao publicar, a página é criada como rascunho para a rever.
  4. No Agency e no Studio, o WXR pode incluir ainda os tipos de conteúdo personalizados e os loops detetados no design.

Se algo falhar

Mensagem Causa O que fazer
O Figma rejeitou o token ou não tem acesso Token errado, ou o ficheiro não está partilhado consigo Gere um token novo e confirme que consegue abrir o ficheiro
Ficheiro não encontrado A ligação está errada Copie a ligação de novo a partir do Figma
O Figma limitou os pedidos Demasiados pedidos em pouco tempo Aguarde um minuto e tente de novo
O URL deve ser do tipo figma.com/design/… A ligação não é de um ficheiro do Figma Use uma ligação que comece por https://www.figma.com/design/
JSON não reconhecido O ficheiro não é uma exportação do Figma Exporte-o de novo a partir da API REST

Passo seguinte

Leia Exportar resultados para ver todas as formas de levar a saída para o WordPress.