Exportar a partir do Figma – Figma Learn - Central de ajuda

Antes de você começar

Quem pode usar este recurso

Qualquer pessoa que tiver acesso do tipo "para visualização" ao arquivo consegue exportar ativos desde que o proprietário do arquivo não tenha restringido a cópia e o compartilhamento no arquivo

Qualquer pessoa que tiver acesso do tipo "para edição" ao arquivo consegue usar a ferramenta Porção

Exporte conteúdo para compartilhar designs com outras pessoas, movimentar conteúdo entre ferramentas ou salvar cópias do seu trabalho fora do Figma.

Dica: alguns objetos podem ser copiados e colados entre ferramentas de design. Clique com o botão direito do mouse em um objeto, passe o mouse sobre Copiar/Colar como e selecione Copiar como PNG ou Copiar como SVG.

Selecionar conteúdo para exportação

É possível exportar os seguintes itens a partir do Figma Design:

Camadas, estruturas, componentes, grupos ou seções. Saiba mais sobre seleção de objetos no Figma →
Uma parte da tela usando a ferramenta Porção.
A tela inteira de uma página.
O arquivo inteiro como arquivo .fig. Saiba mais sobre como salvar uma cópia local de um arquivo →

Selecione parte do seu design para exportar usando a ferramenta Porção

Se o seu acesso a um arquivo for do tipo "para edição", você poderá usar a ferramenta Porção para selecionar e exportar uma parte da sua tela. Isso é útil para compartilhar partes do fluxo de trabalho do seu design ou para criar capturas de tela de alta qualidade.

A ferramenta Porção está localizada sob o menu suspenso das ferramentas Região na barra de ferramentas. Para criar uma porção, clique e arraste a ferramenta Porção em torno da região que deseja exportar. É possível mover e redimensionar a porção conforme necessário. Lembre-se de que somente o conteúdo dentro dos limites da porção será exportado. Depois que a porção estiver posicionada onde você deseja, você poderá aplicar configurações de exportação a ela como qualquer outro objeto.

Dica: as porções também permitem controlar o preenchimento ao redor do objeto exportado. Caso contrário, o preenchimento será calculado a partir dos limites gerais da forma. Este último se ajusta quando a forma muda de tamanho, enquanto a porção é absoluta.

Exporting a slice.gif

Localizar as configurações de exportação

Depois de selecionar o conteúdo que deseja exportar, é possível criar configurações de exportação usando as definições na seção Exportar. A localização da seção Exportar é diferente, dependendo do seu nível de acesso ao arquivo e do modo que você esteja usando.

Observação: caso não veja a seção Exportar, experimente atualizar a página. Se não funcionar, talvez o proprietário do arquivo tenha restringido os visualizadores de poder copiar ou exportar ativos a partir do arquivo. Saiba mais sobre como restringir a cópia e o compartilhamento em arquivos →

Modo Design

Se o seu acesso a um arquivo for do tipo "para edição", a seção Exportar estará localizada na parte inferior da barra lateral direita.

Se o seu acesso a um arquivo for do tipo "para visualização", a seção Exportar estará localizada abaixo da aba Exportar, na barra lateral direita.
Frame 1 (10) (1) (1).png

Modo de desenvolvimento

Se estiver usando o modo de desenvolvimento, a seção Exportar estará localizada na barra lateral direita, mas somente estará visível se um objeto estiver selecionado.

Templates (3) (1).png

Adicionar uma configuração de exportação

Use a seção Exportar para escolher qual formato de arquivo e configurações de exportação serão aplicados à seleção.

Selecione as camadas que deseja exportar. Caso deseje exportar a tela inteira da página atual, desmarque todas as seleções feitas na tela.
Clique no botão mais na seção Exportar para adicionar uma configuração de exportação. Você pode adicionar quantas configurações de exportação forem necessárias a uma seleção.
Defina as configurações de exportação. Saiba mais sobre Formatos e configurações de exportação no Figma →

Dica: caso esteja exportando uma estrutura com um preenchimento, você poderá ocultar o preenchimento no arquivo exportado desmarcando a caixa de seleção Mostrar nas exportações na seção Preenchimento na barra lateral direita.

(Opcional) Clique em Pré-visualização para ver como o seu ativo ficará. Caso tenha vários objetos selecionados, a configuração Pré-visualização não será exibida.
Clique em Exportar.

Caso utilize o Figma no navegador, o arquivo exportado será enviado ao local de download definido nas preferências do navegador. Caso utilize o aplicativo para desktop do Figma, você precisará renomear o arquivo e escolher para onde enviar a exportação.

Observação: caso use uma convenção de nomenclatura separada por barras, os objetos exportados serão organizados em pastas aninhadas correspondentes à estrutura da nomenclatura. Por exemplo, se você exportar uma camada com o nome “button/pill/default”, ela será exportada aninhada em pastas chamadas “button”, “pill” e o arquivo será nomeado como “default”.

Exportar em massa todas as seleções com as configurações de exportação

É possível exportar em massa todas as seleções de sua página atual que tenham uma configuração de exportação aplicada.

Clique no Menu principal e selecione Arquivo > Exportar nas opções. Você também pode usar o atalho de teclado:
- Mac: Shift Command E
- Windows: Shift Ctrl E
O modo Exportar exibe todas as seleções com configurações de exportação aplicadas. Para cada seleção é possível:
- Visualizar a escala, o formato e a dimensão do ativo
- Passar o mouse sobre o nome da miniatura ou da camada para visualizar o nome do arquivo exportado
- Clicar na miniatura para visualizar uma seleção na tela
Desmarque a caixa ao lado das seleções que você não deseja exportar.
Clique em Exportar para exportar os ativos selecionados.