Como converter Figma para WordPress? [Formas gratuitas e pagas]

O Figma é mais conhecido como uma ferramenta de design e criatividade, enquanto o WordPress é conhecido por sua flexibilidade, personalização e facilidade de uso. E se você pudesse combinar o melhor dessas plataformas para criar um site incrível?

Sim, é possível. Você pode criar seu site usando Figma e depois convertê-lo para WordPress. Embora essa já tenha sido uma tarefa difícil envolvendo processamento de HTML e temas pré-instalados, as coisas ficaram muito mais fáceis agora.

Se você está procurando o mesmo, você está no lugar certo.

Neste post, iremos orientá-lo sobre como converter Figma para WordPress de uma forma muito fácil e amigável para iniciantes, sem a necessidade de nenhum conhecimento técnico.

Opção 1: use um plug-in gratuito para converter Figma para WordPress

Embora existam várias maneiras de converter Figma para WordPress, você pode escolher o método gratuito, usar o plugin de conversão premium ou usar o método manual. (Eles têm seus prós e contras)

Passo 1: Primeiro de tudo você deve criar um design Figma que você gostaria de converter em WordPress posteriormente. Mas você nunca deve se esquecer de seguir todas as práticas recomendadas e princípios de design do setor.

Passo 2: Depois de criar e projetar com sucesso a página Figma, é hora de gerar sua chave API. Esta chave de API ajudará a buscar a página Figma por meio do plugin e incorporá-la ao WordPress.

Para isso, clique no ícone Figma localizado no canto superior esquerdo da tela. Isso abrirá as opções do menu nas quais você deve selecionar Ajuda e conta> Configurações da conta.

Ele abrirá um novo prompt no qual você deverá rolar para baixo até a seção “Tokens de acesso pessoal” e clicar no link Gerar novo token .

Será aberto ainda um novo prompt no qual você será solicitado a fornecer alguns detalhes básicos do token que está criando, como nome e data de validade.

Nota : Na seção Expiração, selecione sempre “ Sem expiração ” para que sua página Figma não desapareça do seu site após um período específico.

Abaixo disso defina todos os Escopos como “Escrever” e clique no botão “Gerar token”. Você será redirecionado para a seção “Token de acesso pessoal”, de onde poderá facilmente copiar o token gerado e salvá-lo no Bloco de notas ou em qualquer editor.

Etapa 3: Agora que você gerou e salvou o token com sucesso, é hora de converter sua página Figma em WordPress.

Para começar o processo, você precisa instalar e ativar um plugin WordPress simples, mas poderoso, chamado “Conversor de Animação e Design para Bloco de Gutenberg – Complementos Avançados” em seu site WordPress.

Após a instalação e ativação bem-sucedidas, abra a página ou postagem do seu site WordPress na qual você gostaria de incorporar a página Figma projetada.

Nessa página ou postagem, clique no botão “ Importar do Figma ” no canto superior esquerdo da tela.

Um prompt será aberto solicitando que você forneça o “Figma Access Token” que você gerou e salvou anteriormente. Insira o URL do arquivo Figma.

Para o URL do arquivo Figma, volte para o arquivo Figma, copie o URL na guia do navegador abaixo e cole-o na caixa URL do arquivo Figma.

De resto, o Plugin fará o seu trabalho e converterá o arquivo Figma em blocos WordPress. Depois disso, você pode fazer quantas personalizações quiser no painel de blocos.

Feito isso, clique no botão “Publicar” ou “Atualizar” para salvar suas configurações.

Opção 2: use um plug-in pago para converter Figma para WordPress (mais eficiente e sem complicações)

Para este método, usaremos um plugin de conversão mais popular e eficiente, ‘Uichemy’. Este plugin oferece um fluxo de trabalho simples e descomplicado, tornando o processo de conversão perfeito. É mais adequado para iniciantes sem experiência em codificação, bem como para desenvolvedores que desejam acelerar seu processo.

Atualmente, este plugin pode converter apenas designs Figma em editores de sites Elementor e Bricks, mas a empresa prometeu trazer suporte para blocos Gutenberg no futuro.

Passo 1: Abra seu design Figma e instale o plugin Uichemy no painel do Figma para iniciar o processo de conversão.

• Para fazer isso, pesquise “ UiChemy ” na barra de pesquisa e encontre o plugin UiChemy.

Clique no botão “Vamos começar” e siga as instruções de instalação e ativação.

• Digite sua chave serial para finalizar a ativação. (Para a chave serial, crie uma conta gratuita clicando no botão ‘Iniciar gratuitamente’. Depois de criar sua conta, você encontrará sua chave de licença no painel de sua conta da Posimyth Store.)

Passo 2: Após a ativação bem-sucedida, selecione o design Figma ou Frame que deseja converter para WordPress e clique no botão “ Converter para Elementor ” na janela pop-up.

(Certifique-se de ter instalado e ativado o plugin Elementor em seu site WordPress antes do processo de conversão e também de ler todas as condições antes de converter seu design Figma).

Etapa 3: agora você pode visualizar seu design inserindo o URL e a chave do token do seu site. Caso não queira, basta clicar diretamente no botão “Converter para Elemetor”. (Consulte o tutorial da UiChemy sobre “O que é visualização ao vivo” para obter orientação sobre como gerar sua chave de token e URL do site.)

Passo 3: Seu design será convertido e baixado o arquivo JSON.

Agora abra o painel de administração do WordPress> Vá para Modelos> Modelos salvos.

Agora clique no botão “ Importar modelos ” no topo da página e faça upload do arquivo JSON.

Etapa 4: Parabéns! Seu design Figma agora aparecerá na seção ‘Modelos salvos’, onde você pode abri-lo e fazer edições ou personalizações adicionais.

Passo 5: Após concluir a customização ou edições, visualize seu design no front end. Certifique-se de que todas as imagens e botões estejam alinhados corretamente e funcionando corretamente. Além disso, verifique se o design responde em todos os tamanhos de tela.

Opção 3: converter Figma para WordPress manualmente (para desenvolvedores)

Este método é bastante técnico, portanto requer bons conhecimentos de WordPress CMS e pouca paciência, portanto é mais indicado para quem gosta de codificar.

Passo 1: O primeiro passo é exportar todas as peças de design como ícones e imagens do Figma. Para isso, abra seu Figma Design e escolha o que deseja exportar. Agora clique no botão “Exportar” e selecione o formato e resolução corretos.

Observação: É altamente recomendável que, ao exportar imagens, você escolha PNG ou JPG, e para ícones e vetores, escolha SVG para manter a qualidade. Além disso, tome cuidado ao exportar seus arquivos, garantindo que estejam no formato correto, caso contrário, isso afetará gravemente a aparência do seu site.

Passo 2: Agora temos que criar um tema WordPress personalizado para converter todos os designs Figma em um site WordPress. É porque um tema WordPress é o que controla a aparência e o funcionamento do seu site.

Um arquivo de tema WordPress típico consiste em código PHP, arquivos JavaScript e arquivos de folha de estilo CSS.

• Crie uma nova pasta no WordPress para o seu tema no diretório wp-content/themes e nomeie-a de sua escolha. (Você pode acessar esses arquivos através do Cpanel, Editor WordPress ou clientes FTP) Ou confira nosso blog dedicado em “Como instalar o tema WordPress?”

Se você é um usuário WPOven, pode acessar o arquivo WordPress seguindo este tutorial. “Novo gerenciador de arquivos para gerenciar facilmente os arquivos e pastas do seu site.”

Agora, adicione arquivos como index.php, header.php, footer.php e functions.php a ele. (Deixe esses arquivos em branco por enquanto). Além disso, adicione o arquivo style.css para configurar a folha de estilo CSS do seu tema na mesma pasta.

(Este arquivo style.css específico é responsável por exibir todas as cores, fontes, bordas, margens e outros elementos visuais do site.)

Agora adicione o seguinte comentário de cabeçalho ao seu arquivo style.css conforme mostrado abaixo:

/*

Theme Name: Example WordPress Theme
Author: WPOVen
Description: This code converts Figma design to WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

Aqui, você deve fornecer o nome do tema personalizado do WordPress e seu autor. Isso ajudará o WordPress a identificar seu tema personalizado.

Também não se esqueça de adicionar uma imagem ao seu tema WordPress, para que possa ser facilmente reconhecível no diretório do WordPress, assim como uma miniatura do YouTube.

O tamanho preferível deve ser 800×600 pixels e estar no formato PNG. Dê um nome à sua escolha e adicione-o à pasta do tema.

Etapa 3: Agora temos que adicionar todos os seus ativos Figma exportados em sua pasta de tema personalizada.

Dica: Se o seu site for complexo é melhor gerenciar todos os seus ativos em uma subpasta específica, como mostramos na imagem abaixo:

Etapa 4: para tornar seu tema WordPress totalmente funcional, você precisa adicionar HTML, CSS e JavaScript aos arquivos do tema.

Vamos ver como você pode fazer isso,

Primeiro, você deve converter seus mockups Figma em código e, para isso, será necessário ter uma ferramenta de edição de código.

Comece configurando uma estrutura HTML com elementos como cabeçalhos, rodapés, barras de navegação e seções. Adicione seus códigos aos arquivos PHP (index.php, header.php e footer.php).

Agora use CSS para estilizar seus elementos HTML. Adicione seus estilos no arquivo ‘style.css’, definindo cores, fontes, tamanhos e outros aspectos de design.

• Para um estilo melhor, você pode usar:
  • Pré-processadores CSS como SASS ou LESS
  • Estruturas como Bootstrap ou Tailwind
  • Um tema inicial do WordPress
• Para designs complexos, você não precisa colocar todo o seu CSS em um único arquivo, mas sim de uma forma mais organizada. Você pode adicionar arquivos CSS separados para diferentes partes na pasta de ativos para facilitar o gerenciamento e a solução de problemas no futuro.

Por fim, para Javascript, descubra os elementos que precisam ser interativos, como menus suspensos, controles deslizantes, etc.)

Considere usar jQuery para facilitar tarefas como chamadas AJAX e manipulação de DOM e carregar corretamente seus arquivos CSS (folhas de estilo) e JavaScript (scripts) em seu tema WordPress usando o arquivo functions.php .

Passo 5: Agora vem a parte do teste, após passar com sucesso por todos os passos acima, salve seus arquivos e verifique se tudo funciona bem. Mas antes disso, temos que ativar o plugin.

Para ativar o plugin, vá até o painel do WordPress > Aparência > temas . Seu tema personalizado começará a aparecer com a imagem que você carregou anteriormente na pasta do tema. Clique nele para ativar e confirmar que seu site WordPress está pronto para teste.

Aqui estão algumas das sugestões de teste que você pode seguir:

• Verifique a aparência e o funcionamento do seu site em diferentes navegadores e tamanhos de tela.
• Use ferramentas para otimizar suas imagens para um carregamento mais rápido.
• Implemente o cache para acelerar seu site.
• Faça um backup do seu site antes de colocá-lo no ar.

Resumo

Converter do Figma para WordPress não é tão fácil quanto parece, dependendo da complexidade do site. Quanto mais complexo o design, mais complexo será o processo que você terá que seguir. Tentamos cobrir todas as opções para todos os tipos de usuários.

Fazer isso manualmente pode lhe dar mais controle, mas consumirá muito tempo e esforço. No entanto, você pode utilizar plug-ins para acelerar o processo de conversão, mas ainda pode ser necessário fazer algumas alterações para obter melhores resultados.

Depende totalmente da sua preferência e facilidade de compreensão do método que você escolher.

Raul

Rahul Kumar é um entusiasta da web e estrategista de conteúdo especializado em WordPress e hospedagem na web. Com anos de experiência e o compromisso de se manter atualizado com as tendências do setor, ele cria estratégias online eficazes que direcionam o tráfego, aumentam o engajamento e aumentam as conversões. A atenção de Rahul aos detalhes e a capacidade de criar conteúdo atraente fazem dele um recurso valioso para qualquer marca que busca melhorar sua presença online.