Importe um quadro do Figma para o WordPress com o Page Builder Sandwich

O Page Builder Sandwich Pro transforma um quadro do Figma em uma página editável do WordPress. O site se comunica com o Figma por meio da sua própria conta do Figma, usando um token de acesso pessoal criado por você; nenhum design ou token passa pela Zinn Digital®.

Conecte o Figma (uma vez, como administrador)

1. No Figma, abra Settings → Security → Personal access tokens e gere um token com o escopo File content: read.
2. No wp-admin, acesse Page Builder Sandwich → Import from other builders and Figma → Import from Figma, cole o token e pressione Connect Figma.

O token é verificado com o Figma, armazenado de forma criptografada e nunca mais é exibido (apenas seus últimos quatro caracteres). O botão Disconnect o remove. Na linha de comando: echo <token> | wp pbs importers figma-token set (o token é lido da entrada padrão, portanto não fica salvo no histórico do seu shell).

Importe um quadro

1. No Figma, clique em um quadro, clique com o botão direito nele e escolha Copy/Paste as → Copy link to selection.
2. Cole o link em Figma frame link e pressione Import the frame. Uma nova página de rascunho é criada, com o mesmo nome do quadro.

Como o design é convertido

• O Auto layout se torna linhas e colunas flexíveis (e grades para auto layout em grade) com o mesmo espaçamento, preenchimento interno e alinhamento; um quadro com layout livre é empilhado na ordem de leitura, e o relatório indica quando houve sobreposição de camadas.
• Um quadro de página composto por faixas de largura total se torna uma seção de largura total por faixa.
• O texto mantém sua fonte, tamanho, peso, altura de linha, espaçamento entre letras, caixa alta/baixa, alinhamento e cor; textos grandes se tornam títulos, e trechos em negrito, itálico e links são mantidos.
• Preenchimentos, traçados, raio de curvatura dos cantos e sombras projetadas são transferidos, incluindo gradientes.
• As imagens são copiadas para a sua biblioteca de mídia, e a arte vetorial (ícones, ilustrações) é renderizada pelo Figma e copiada como imagem (até 200 desenhos por importação). Importar o mesmo quadro novamente reutiliza as cópias.
• Um quadro pequeno com preenchimento, cantos arredondados e um rótulo curto (ou uma camada chamada "button") se torna um bloco de Button.

Em um celular, linhas de itens com largura fixa são empilhadas em uma coluna, pois um quadro do Figma é desenhado em uma única largura.

Pela linha de comando: wp pbs importers figma <frame link>.