Como Fatiar Layouts do Figma Rapidamente com o Assets Extractor

O Figma é uma das ferramentas de design de interface mais populares do mundo. No entanto, muitas vezes designers compartilham arquivos em formatos de imagem estáticos (.PNG ou .JPG) com clientes ou desenvolvedores, ou mesmo exportam as telas sem organizar as camadas de exportação individuais (slices).

Quando isso acontece, o desenvolvedor ou produtor de conteúdo precisa fatiar manualmente a imagem inteira para extrair ativos como botões, ícones, fotos de produtos ou ilustrações secundárias. Fazer isso elemento por elemento no Figma ou no Photoshop consome muito tempo e paciência.

Com o Assets Extractor, você pode fatiar e separar todos esses componentes visuais rapidamente. Veja o fluxo de trabalho ideal abaixo.

1. Exporte a Tela do Figma

No Figma, selecione o frame do layout que deseja exportar. Vá até a seção Export na barra lateral direita, escolha o formato PNG (de preferência em resolução 2x para manter a nitidez dos elementos) e clique em exportar.

2. Importe no Assets Extractor

Abra o Assets Extractor em seu navegador e arraste a imagem que acabou de baixar do Figma para a área de importação. O layout inteiro será carregado na área de trabalho central do aplicativo.

3. Fatie os Componentes Desejados

Com a ferramenta de seleção ativa, faça retângulos simples sobre cada ícone, botão ou imagem decorativa que você precisa extrair:

• Ícones e Logos: Desenhe caixas de seleção bem próximas às bordas para que o algoritmo remova o fundo da página perfeitamente.
• Ilustrações de Fundo: Isole-as desenhando a seleção ao seu redor.
• Fotos de Produto: Recorte-as com fundo transparente instantâneo para colocar em outros banners.

4. Exporte Tudo de Uma Vez (.ZIP)

Se você é um usuário do plano Pro, não precisa baixar arquivo por arquivo. À medida que você vai selecionando e fatiando os elementos, eles vão se acumulando na aba "Recursos Extraídos". Quando terminar todo o layout, basta clicar no botão de download geral para gerar um arquivo compactado .ZIP com todos os ativos prontos para uso em seu código.