Editor do Wix Studio: exportar seus designs do Figma
9 min
Neste artigo
- Etapa 1 | Prepare a exportação
- a | Faça upload de fontes personalizadas no Wix Studio
- b | Compare a largura do frame com o tamanho de edição
- Etapa 2 | Instale o plugin
- a | Instale o plugin no Figma
- b | Abra a ferramenta no site do seu cliente
- Etapa 3 | Escolha o que exportar do Figma
- Etapa 4 | Conclua a importação no editor
- Perguntas frequentes
- Solução de problemas
Você usa o Figma para fazer o design de seções e elementos? O plugin do Wix Studio permite que você transforme seus designs estáticos em um site online responsivo, com um processo simplificado. Você pode importar frames inteiros do Figma, componentes e seções específicas ou usar nossos wireframes (kits de interface do usuário (UI)).
No Wix Studio, você pode aprimorar seus designs com animações sem código, CSS personalizado, conexão com soluções de negócios como Wix Stores e muito mais.
- Recomendamos manter o Figma e o Editor do Wix Studio abertos, em abas separadas do navegador, pois você precisará de ambos para esse processo.
- No meio do processo e precisa de ajuda? Leia nossas perguntas frequentes e informações para solução de problemas abaixo.
Etapa 1 | Prepare a exportação
Antes de tentar importar designs do Figma, há algumas coisas que recomendamos verificar. Isso garante uma transição perfeita do Figma para o Wix Studio.
a | Faça upload de fontes personalizadas no Wix Studio
Certifique-se de que todas as fontes que você está usando no Figma também estão disponíveis na sua conta Wix. É melhor fazer upload das fontes no Wix com antecedência. Caso contrário, as fontes do sistema substituem as fontes que você deseja mostrar.
b | Compare a largura do frame com o tamanho de edição
A largura do frame do Figma deve corresponder ao tamanho de edição da página relevante no site do seu cliente. Se houver uma incompatibilidade, seu design não será exportado na mesma proporção, o que significa que ele não aparecerá nas proporções corretas no Wix Studio.
Vai exportar elementos?
Você deve verificar a largura do frame que os contém para garantir um resultado de 1:1.
Etapa 2 | Instale o plugin
Se você ainda não o fez, instale o plugin do Wix Studio a partir do arquivo que você deseja exportar. Após instalado, você pode acessar facilmente o plugin a partir de qualquer outro design na sua conta.
Em seguida, abra o painel do plugin no Editor do Wix Studio.
a | Instale o plugin no Figma
- Abra o arquivo que deseja exportar na sua conta Figma.
- Pressione Ctrl + P no teclado (Cmd + V no Mac).
- Clique na aba Plugins e widgets.
- Busque "Wix Studio" e selecione Figma para Wix Studio nos resultados.
- Clique em Executar.
- Faça login na sua conta Wix no plugin.
b | Abra a ferramenta no site do seu cliente
- Vá para o site do seu cliente no editor.
- Clique no ícone do Wix Studio
no canto superior esquerdo. - Passe o mouse sobre Ferramentas.
- Clique em Importar do Figma.
Dica: isso adiciona um novo ícone
no lado esquerdo do editor.
Etapa 3 | Escolha o que exportar do Figma
Após instalar o plugin, volte para o arquivo na sua conta Figma. O plugin permite que você escolha o que exportar: um frame ou seus estilos.
Recomendamos exportar seus estilos primeiro (por exemplo: tipografia e cores), para que elas já estejam configuradas no Editor do Wix Studio quando você começar a exportar frames.
Quais elementos o plugin reconhece automaticamente?
Para exportar do Figma:
- (Se ainda não estiver aberto) Abra o arquivo relevante do Figma.
- Acesse o plugin do Wix Studio:
- Clique no ícone Figma
para abrir o menu principal. - Passe o mouse sobre Plugins e clique em Figma to Wix Studio.
- Clique no ícone Figma
- Clique em Set up Export (Configurar exportação).
- Clique em Próximo.
- Verifique se o tamanho de edição no Wix Studio corresponde à largura do frame do Figma. Quando estiver tudo pronto, clique em Start Export (Começar exportação).
- Escolha o que exportar e siga os passos relvantes:
Estilos
Frame
Etapa 4 | Conclua a importação no editor
Quando a exportação for concluída no Figma, volte para o seu editor e certifique-se de que não há fontes faltando ou incompatibilidades de tamanho.
Trabalha com um frame? Você pode escolher se deseja importá-lo como um contêiner, seção, etc.
Para concluir a importação:
- Vá para o site do seu cliente no editor.
- (Se ainda não estiver aberto) Clique em Importar do Figma à esquerda.
- Dependendo se você importou anteriormente do Figma para a conta Wix atual, atualize o painel:
- Primeira importação: clique em Atualizar.
- Já importou anteriormente: clique no ícone Atualizar importação
.
- Dependendo do que você está importando, siga os passos abaixo:
Estilos
Frame
Perguntas frequentes
Clique nas perguntas abaixo para saber mais sobre como importar designs do Figma.
Posso importar designs do Figma para um site existente?
Posso importar várias páginas de uma vez?
Os designs do Figma se conectam automaticamente a aplicativos Wix (por exemplo: Wix Stores)?
O que acontece ao importar menus, formulários e botões? Eles funcionam no site do meu cliente?
Como meu design importado ficará nos breakpoints?
Se eu fizer mais alterações no design do meu Figma depois de importá-lo para o Wix Studio, elas serão sincronizadas automaticamente?
Posso exportar designs de forma contrária, do Wix Studio para o Figma?
Solução de problemas
Está enfrentando problemas ao exportar seus designs do Figma para o Wix Studio? Clique nos problemas abaixo para saber qual pode ser a causa e como resolver.
Antes de tentar a solução de problemas:
Se você não conseguir exportar seu design, recomendamos verificar se você atingiu o limite de taxa na sua conta Figma.
(No Figma) Nenhum estilo aparece no painel ao tentar exportar
(No editor) Não consigo ver a opção para adicionar um frame como uma página/seção
(No editor) O design não fica proporcional depois de importá-lo
Ainda precisa de ajuda?
Quais informações devo incluir se eu precisar entrar em contato para obter ajuda?
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
