Como exportar código no Figma

Links de dispositivos

• Android
• Iphone
• Mac
• janelas
• Dispositivo ausente?

Um dos melhores recursos do Figma é que ele permite que você transfira rapidamente os designs que você faz com ele para o código. Se você é um desenvolvedor de aplicativos ou trabalha com designers, essa é uma habilidade valiosa para aprender. Com a ajuda de ferramentas integradas e vários plugins, o Figma permite exportar seu design para várias plataformas.

Se você quiser saber mais sobre como converter seu design Figma em código, você veio ao lugar certo. Neste artigo, discutiremos como exportar código no Figma e quais ferramentas você precisará usar.

Como exportar código no Figma em um PC com Windows

Se você é usuário do Windows e deseja exportar código no Figma, ficará feliz em saber que pode usar várias opções.

Figma Inspecionar

Um dos métodos que você pode usar para exportar código no Figma é o Figma Inspect. Esse recurso permite que você converta facilmente seus designs para código Android, iOS ou Web. Como é integrado, você não precisa instalar nenhum plug-in ou aplicativo de terceiros.

Veja como usá-lo:

1. Selecione os elementos de seu interesse e vá para a guia Inspecionar.
2. Na seção Código, selecione o código que deseja exportar (CSS para Web, Swift para iOS ou XML para Android).

A ferramenta irá gerar o código dependendo da opção que você escolheu, e então você poderá exportá-lo. Embora esta seja uma ótima ferramenta, ela tem algumas limitações. Ou seja, você não pode exportar SVG para HTML. Para isso, você precisará usar um plugin.

Plugins Figma

O Figma apresenta centenas de plugins úteis. Mencionaremos alguns que você pode usar para exportar seu design para HTML.

Figma para HTML

O plugar permite converter seu design em HTML ou CSS, dependendo de suas necessidades. Siga as etapas abaixo para instalar o plug-in e exportar o código:

1. Acesse o menu principal pressionando o ícone no canto superior esquerdo.
   
2. Pressione Plug-ins.
   
3. Pressione Procurar plug-ins na comunidade.
   
4. Digite Figma para HTML e selecione Plugins na parte superior.
   
5. Pressione Instalar.
   
6. Volte ao seu design e selecione os elementos desejados.
7. Volte ao menu principal, selecione Plugins e, em seguida, selecione Figma to HTML.
   
8. Escolha HTML ou CSS.
   
9. Pressione Copiar ou Baixar, dependendo de suas necessidades.
   

Anima para Figma

Outro plugin útil é o Anima for Figma. Com este plugin, você pode converter seu design para HTML, CSS, React e Vue. Siga estas etapas para usar o plug-in:

1. Abra o menu principal selecionando o ícone no canto superior esquerdo.
   
2. Pressione Plug-ins.
   
3. Selecione Procurar plug-ins na comunidade.
   
4. Digite Anima para Figma.
   
5. Pressione Instalar.
   
6. Selecione os elementos que deseja exportar.
7. Abra o menu principal, pressione Plugins e selecione Anima for Figma. Inscreva-se se você não tiver uma conta.
   
8. Escolha o tipo de código e pressione Exportar Código.
   

Como exportar código no Figma em um Mac

Exportar seu design para código em um dispositivo Mac pode ser feito de várias maneiras.

Figma Inspecionar

Essa ferramenta integrada permite inspecionar e exportar código e outros valores para seus projetos. Com o Figma Inspect, você pode escolher entre três opções de código: Android, iOS ou Web (somente CSS).

Siga as etapas abaixo para usar o Figma Inspect em um Mac:

1. Selecione os elementos que deseja exportar.
2. Abra a guia Inspecionar à direita.
3. Escolha entre CSS, iOS ou Android.
4. Copie seu código.

Se você está interessado apenas em CSS, iOS e Android, esta é uma excelente ferramenta para usar. No entanto, se você quiser exportar seu design para HTML, precisará usar um método diferente.

Plugins Figma

Se você deseja converter seus designs em HTML, o Figma oferece dezenas de plugins que atendem a esse propósito. O processo de instalação é simples. Vamos listar alguns dos mais populares.

Figma para HTML

Isto plugar permite converter seu design para CSS ou HTML. Veja como instalá-lo:

1. Selecione o ícone superior esquerdo para abrir o menu principal.
   
2. Pressione Plug-ins.
   
3. Selecione Procurar plug-ins na comunidade.
   
4. Digite Figma para HTML na barra de pesquisa e selecione Plugins na parte superior.
   
5. Pressione Instalar.
   
6. Retorne ao seu design e selecione os elementos que deseja exportar.
7. Abra o menu principal, selecione Plugins e, em seguida, selecione Figma to HTML.
   
8. Selecione HTML ou CSS.
   
9. Pressione Copiar ou Baixar.
   

Figma para Código

Com isso plugar , você pode converter seu design Figma em HTML, Tailwind, Flutter ou Swift UI. Siga as etapas abaixo para instalá-lo e usá-lo:

1. Pressione o ícone superior esquerdo para acessar o menu principal.
   
2. Selecione Plug-ins.
   
3. Pressione Procurar plug-ins na comunidade.
   
4. Digite Figma to Code na barra de pesquisa e escolha Plugins na parte superior para obter resultados relevantes.
   
5. Pressione Instalar.
   
6. Vá para o seu design e selecione os elementos desejados.
7. Acesse o menu principal novamente, selecione Plugins e, em seguida, selecione Figma to Code.
   
8. Selecione o código desejado.
9. Pressione Copiar para a área de transferência.

Posso exportar código no Figma no iPhone?

O novo aplicativo Figma para iPhone estava disponível apenas como uma versão beta através Vôo de teste para os primeiros 10.000 iPhones, mas a empresa afirma que o lançamento completo será lançado em breve. O aplicativo permite que você navegue e acesse seus designs e acompanhe as alterações ao vivo no seu iPhone enquanto edita o design no seu computador.

Na época, não é possível editar designs pelo aplicativo para iPhone, o que significa que não há como exportar código por meio dele.

A Figma também oferece a Espelho Figma aplicativo na App Store. Este aplicativo permite que você espelhe seus designs em qualquer dispositivo iOS sem estar conectado à mesma rede. Dessa forma, você pode verificar a aparência do seu design em um dispositivo específico (neste caso, o iPhone) e acompanhar as alterações. Embora útil, o aplicativo não permite exportar código no seu iPhone. Para isso, você terá que pegar seu computador.

Você também pode acessar seus projetos através do seu navegador. No entanto, você ainda poderá visualizar seu design e acompanhar as alterações ao vivo.

Posso exportar código no Figma em um iPad?

Infelizmente, não é possível exportar código no Figma se você estiver usando um iPad. O Figma está trabalhando no aplicativo móvel, e há uma versão beta, mas não estava disponível para tablets, apenas para iPhones e Androids.

O aplicativo Figma Mirror está disponível em iPads. O aplicativo permite que você acompanhe as alterações feitas em seu design pelo computador e verifique como elas ficam na tela do iPad. Infelizmente, a opção de exportar código dentro do aplicativo não está disponível.

Se você não deseja instalar o aplicativo, pode acessar o Figma pelo navegador e acompanhar as alterações no design. Mas, exportar código no Figma só é possível em um computador.

Posso exportar código no Figma em um Android

A Figma está atualmente trabalhando no aplicativo Android e oferece uma versão beta para 10.000 telefones Android. Você pode se tornar um testador baixando o aplicativo do Loja de jogos e acessando este link . Você pode navegar, visualizar e compartilhar seus designs e acompanhar as alterações no aplicativo mesmo quando não estiver perto do computador.

Embora o aplicativo seja útil para muitas finalidades, ele não permite exportar código por enquanto.

O Espelho Figma app também está disponível para Android. Seu principal objetivo é rastrear as alterações feitas em seus designs no computador e garantir que eles fiquem bem em todos os dispositivos Android. A opção de exportar código não está disponível.

Você também pode usar o Figma no seu navegador se não quiser instalar o aplicativo. No entanto, você ainda não poderá exportar o código. Para isso, você terá que usar seu computador.

mude de um drive do Google para outro

Perguntas frequentes adicionais

Como exporto cores do Figma para o Xcode?

Infelizmente, não é possível exportar cores do Figma para o Xcode, pois o Figma não o suporta. Mas há uma solução alternativa que você pode usar chamada Exportação Figma . Siga os passos abaixo para usá-lo:

1. Se ainda não o fez, instale Exportação Figma .

2. Abra o Terminal.app.

3. Abra a pasta com o arquivo figma-export.

4. Inicie o figma-export.

5. Exporte cores usando ./figma-export colors -i figma-export.yaml.

Como exportar código HTML do Figma?

Como mencionado anteriormente, a ferramenta integrada chamada Figma Inspect permite obter CSS, mas não HTML. Se você precisar do código HTML, precisará instalar um plug-in.

O Figma apresenta dezenas de plugins que atendem a esse propósito. Nossa recomendação é Figma para HTML . Veja como usá-lo:

1. Abra o menu principal. É o ícone superior esquerdo.

2. Pressione Plug-ins.

3. Selecione Procurar plug-ins na comunidade.

4. Digite Figma to HTML na barra de pesquisa e certifique-se de que Plugins esteja selecionado na parte superior.

5. Selecione Instalar.

6. Retorne ao seu design e selecione os elementos que deseja converter em HTML.

7. Vá para o menu principal, selecione Plugins e abra o Figma para HTML.

8. Pressione HTML.

9. Escolha entre Copiar ou Baixar.

Obtenha o código que você precisa

O Figma permite exportar diferentes tipos de códigos usando vários métodos. Você pode usar ferramentas integradas ou baixar plugins diferentes, dependendo de suas necessidades. Por enquanto, a exportação de códigos só é possível por meio de computadores. A Figma lançou a versão beta do aplicativo móvel (limitada a 10.000 dispositivos iPhone ou Android), mas não possui essa opção. Felizmente, exportar código em computadores é rápido e fácil.

Como você exporta código no Figma? Você usa um dos métodos que mencionamos neste artigo? Conte-nos na seção de comentários abaixo.