Recortar e redimensionar imagens em lote em vários tamanhos

Recorte e redimensione imagens em lote com predefinições, tamanhos personalizados, pontos focais inteligentes e opções de exportação.

Vídeo tutorial: recortar e redimensionar imagens

Este vídeo mostra como recortar e redimensionar imagens em lote a partir do Figma com o plugin HyperCrop.

Ao trocar de página no Figma, o HyperCrop carrega os tamanhos de recorte e as configurações de exportação salvos para essa página. Uma página sem tamanhos de recorte salvos começa com as predefinições padrão.

O HyperCrop vem com dezenas de predefinições de tamanho para facilitar o recorte e a exportação em lote das suas imagens para plataformas e dispositivos populares, sem que você precise pesquisar e digitar as dimensões de cada um manualmente.

Você pode adicionar (e remover) qualquer um desses tamanhos percorrendo a lista e clicando na caixa de seleção ao lado de cada item. Marcar um tamanho adiciona esse tamanho à sua lista de tamanhos selecionados, e desmarcá-lo o remove.

Você pode escolher entre dezenas de predefinições das categorias abaixo:

  • Facebook
  • Google Ads
  • Instagram
  • LinkedIn
  • Papel
  • Celulares
  • Pinterest
  • Telas
  • Snapchat
  • Tablets
  • Twitch
  • Twitter (X)
  • YouTube.

Adicionar predefinições de tamanhos de recorte personalizados ​

Você pode adicionar (e remover) qualquer um desses tamanhos percorrendo a lista e clicando na caixa de seleção ao lado de cada item. Marcar um tamanho adiciona esse tamanho à sua lista de tamanhos, e desmarcá-lo o remove.

Usar largura ou altura “Auto” ​

Se você quer definir apenas a largura ou a altura e deixar o HyperCrop calcular automaticamente a outra medida, preencha o campo Crop Width ou o campo Crop Height e deixe o outro em branco. O texto de exemplo do campo vazio muda para Auto para indicar isso. Quando estiver satisfeito com a largura ou a altura fixa, clique no botão Add Custom Crop Size + para adicioná-la aos seus tamanhos de recorte personalizados disponíveis.

Excluir uma predefinição de recorte personalizada ​

Para remover uma predefinição personalizada da sua lista de recortes disponíveis, clique no ícone Trash ao lado de um tamanho de recorte personalizado e clique em Delete para confirmar. Isso remove o tamanho da sua lista de tamanhos selecionados e o exclui completamente da lista de recortes disponíveis.

Selecionar imagens para o recorte em lote ​

Todas as imagens disponíveis para o recorte em lote aparecem no lado direito do plugin HyperCrop. Ao clicar na caixa de seleção ao lado de qualquer imagem da lista, você indica ao HyperCrop se ela deve ser incluída ou excluída do processo de recorte em lote.

O número de imagens selecionadas é multiplicado pelo número de tamanhos selecionados, o que dá o total de imagens que o HyperCrop vai exportar.

As imagens precisam ter configurações de exportação para aparecer no HyperCrop. Para que as suas imagens/camadas do Figma apareçam no plugin HyperCrop, adicione pelo menos uma configuração de exportação à camada que você quer recortar, clicando no ícone + na coluna do lado direito do Figma, abaixo do título Export.

Selecionar ou desmarcar tudo rapidamente. Para desmarcar (ou marcar de novo) todas as imagens de uma vez, clique na caixa de seleção no topo da lista, ao lado do rótulo X of XX Images Selected.

Definir pontos focais de recorte ​

Por padrão, o HyperCrop recorta e redimensiona as imagens em lote com a ancoragem Center/Center, ou seja, o ponto focal da imagem é sempre o centro exato da imagem.

Às vezes você vai querer mudar isso para que o ponto focal fique em outra parte da imagem, por exemplo Top/Left ou Center/Right.

Para isso, passe o mouse sobre a imagem cujo ponto focal você quer alterar, clique nas caixas de seleção vertical (↕) e horizontal (↔) e escolha a opção desejada em cada uma.

Ativar os recursos de recorte inteligente ​

Se você não quer definir um ponto focal manualmente com as caixas de seleção vertical (↕) e horizontal (↔), pode usar as opções Content Aware e Detect Faces.

Você pode ativar um desses recursos (ou ambos) passando o mouse sobre a imagem em que quer ativá-los (ou desativá-los) e clicando no botão de alternância de cada um.

Content Aware ​

Ativar a opção Content Aware faz o HyperCrop usar modelos de recorte inteligente para identificar onde estão as partes importantes ou interessantes da imagem. Se a sua imagem não tem um conjunto difícil de tamanhos para recortar rostos, essa opção não precisa ser ativada, porque o recorte das imagens demora mais com ela ligada.

Detect Faces ​

Ativar a opção Detect Faces faz o HyperCrop usar modelos de reconhecimento facial para identificar onde estão os rostos na imagem. Se a sua imagem não contém rostos ou não tem um conjunto difícil de tamanhos para recortar rostos, essa opção não precisa ser ativada, porque o recorte das imagens demora mais com ela ligada.

Compatibilidade com navegadores. Por problemas de compatibilidade entre navegadores, o recurso Detect Faces do HyperCrop não é compatível com o Safari. Execute o plugin em outro navegador (como o Chrome) ou no aplicativo Figma para desktop.

Configurar as opções de exportação do recorte em lote ​

Depois de selecionar os tamanhos de recorte e as imagens e de ajustar as configurações de recorte de cada uma, você pode se preparar para recortar e exportar as imagens em lote.

Para abrir o painel de configurações, clique no botão Batch Crop no cabeçalho do HyperCrop.

No painel de configurações do recorte em lote, você pode escolher opções como Image Format (JPG ou PNG), Image Compression (para definir a qualidade/o tamanho da imagem) e Image Fill (que só se aplica a recortes que não são inteligentes).

Adicionar um formato de nome de arquivo personalizado ​

Nos recortes em lote, o HyperCrop permite definir um formato de nome de arquivo personalizado que é aplicado a todas as imagens exportadas. Isso é muito útil para manter uma convenção de nomes consistente ou agrupar as imagens em estruturas de subpastas que façam sentido.

Esse campo é opcional e, se você deixá-lo vazio, o padrão será #{collection}/#{name}_#{width}x#{height}.

Variáveis disponíveis para os nomes de arquivo ​

Você pode combinar à vontade qualquer uma das variáveis abaixo no seu padrão personalizado de subpasta/nome de arquivo, incluindo texto comum e caracteres (como sublinhados ou letras/números).

  • #{name} O nome da camada do Figma (por exemplo, “My Figma Layer Name”)
  • #{collection} O nome da coleção da predefinição de tamanho (por exemplo, “facebook”)
  • #{label} O rótulo da coleção da predefinição de tamanho (por exemplo, “profile”)
  • #{width} A largura da imagem redimensionada (por exemplo, “1024”)
  • #{height} A altura da imagem redimensionada (por exemplo, “768”)

Criar subpastas. Para criar uma subpasta, adicione uma “/” em qualquer lugar do seu formato de nome de arquivo personalizado. Por exemplo, #{collection}-crops/#{width}x#{height}/#{name} cria uma estrutura de pastas dinâmica como facebook-crops/1024x768/my_figma_layer_name.jpg (em que as variáveis são substituídas para cada combinação de coleção e largura/altura).

Baixar as imagens do recorte em lote para o seu computador ​

Depois de configurar todas as opções e o formato de nome de arquivo do jeito que você quer, clique no botão Crop & Download Images para iniciar o processo de recorte/redimensionamento de imagens em lote do “HyperCrop”.

Observe que isso processa todos os tamanhos selecionados para cada imagem selecionada; portanto, quanto mais imagens e tamanhos você tiver, mais tempo o processo vai levar.

Quando o recorte em lote terminar, você verá uma tela de confirmação informando que as imagens estão prontas para baixar. Para baixar o arquivo .zip do Figma para o seu computador, clique no botão Download your .zip file no plugin HyperCrop.

Salvar arquivos baixados do Figma. Se você usa o app desktop do Figma, vai aparecer uma janela para baixar o arquivo. Já se você usa o Figma em um navegador, por padrão o arquivo é baixado automaticamente para o seu computador (normalmente para a pasta Downloads).

Abrir o arquivo .zip exportado ​

Depois de baixar o arquivo .zip do Figma para o seu computador, abra o gerenciador de arquivos na pasta em que ele foi salvo. Clicar duas vezes no arquivo .zip exportado descompacta as imagens em uma pasta com todas as imagens e subpastas (de acordo com o padrão de subpasta/nome de arquivo definido nas configurações de exportação do HyperCrop).

Inserir as imagens do recorte em lote no arquivo atual do Figma ​

Como alternativa, depois de configurar todas as opções e o formato de nome de arquivo do jeito que você quer, você pode inserir as imagens recortadas diretamente no Figma clicando no botão Crop & Insert to Figma. Isso cria uma página nova no seu arquivo atual do Figma e insere nela todas as camadas de imagem recortadas.