Como exportar imagens nítidas do Figma e Photoshop

O problema: Design nítido, exportação desfocada

Você passou horas criando um design perfeito no Figma ou Photoshop. Na sua tela, tudo parece impecável. Mas ao exportar como JPG ou PNG e visualizar no navegador, a imagem parece suave, desfocada ou simplesmente… errada.

Este é um incômodo comum entre designers. A desfocagem geralmente é causada por um de dois motivos: exportar com resolução incorreta ou usar configurações inadequadas de exportação. Este guia oferece um fluxo de trabalho infalível no Figma e Photoshop para garantir nitidez sempre.

Regra de ouro: Exportar em 2x, exibir em 1x

A chave para imagens nítidas em telas de alta resolução modernas (como os displays Retina da Apple) é exportar na dobro do tamanho da dimensão em que será exibida.

Exemplo: Se um banner hero será exibido com 1200px de largura no seu site, exporte-o da ferramenta de design com 2400px de largura. Depois, no HTML ou CSS, limite sua exibição para 1200px.

<!-- O arquivo tem 2400px de largura, mas instruímos o navegador a exibi-lo com 1200px -->  
<img src="my-banner-2400px.jpg" alt="Texto alternativo descritivo" width="1200">  

Essa técnica oferece ao navegador densidade de pixels dobrada, resultando em imagens mais nítidas em telas de alta resolução.

Exportando do Figma

O Figma é uma ferramenta vetorial, facilitando a exportação de recursos nítidos.

Guia passo a passo:

1. Selecione o frame ou recurso: Clique no item a exportar (ícone, componente, frame completo, etc.).
2. Abra o painel de exportação: Na barra lateral direita, encontre a seção “Export” e clique no ícone +.
3. Escolha o tamanho de exportação: Este é o passo crucial. Nas configurações “Export”, altere 1x para 2x. Isso instrui o Figma a renderizar o recurso com o dobro do tamanho do canvas. Para elementos críticos como logos, use até 3x.
4. Selecione o formato:
   • JPG: Ideal para fotos e imagens complexas. Defina a qualidade para 80-90%.
   • PNG: Ideal para gráficos com linhas nítidas, texto ou transparência (logos, ícones).
   • SVG: Melhor para logos e ícones simples. Como é um formato vetorial, permanece perfeitamente nítido em qualquer tamanho.
5. Clique em “Export”: Salve o arquivo. Lembre-se de comprimi-lo com uma ferramenta como nosso compressor de imagens antes de fazer upload para seu site.

Exportando do Photoshop

O Photoshop é baseado em raster, então trabalhar em um documento de alta resolução desde o início é essencial.

Método moderno: “Exportar como”

Recomendado para gráficos web: Arquivo > Exportar > Exportar como....

1. Defina o tamanho: Na seção “Tamanho da imagem” à direita, verifique largura e altura. Se seguir a regra do 2x, seu documento já deve estar com o dobro do tamanho de exibição previsto.
2. Escolha o formato:
   • JPG: Use o controle deslizante “Qualidade”. Valores entre 70-85 oferecem bom equilíbrio entre qualidade e tamanho.
   • PNG: Para imagens com transparência. Se sua paleta é limitada (logo simples), marque “Arquivo menor (8 bits)” para reduzir drasticamente o tamanho.
3. Espaço de cores sRGB: No final da caixa de diálogo, em “Espaço de cores”, certifique-se de que “Converter para sRGB” está marcado. Este é o perfil de cor padrão para web, evitando cores opacas nos navegadores.
4. Clique em “Exportar tudo”: Salve sua imagem.

Método tradicional: “Salvar para Web”

Para versões antigas do Photoshop: Arquivo > Exportar > Salvar para Web (Legado).

1. Selecione um predefinido: No canto superior direito, escolha um predefinido como “JPEG Alto” ou “PNG-24”.
2. Ajuste a qualidade: Para JPEG, use o controle deslizante “Qualidade” (valores 70-80 são ideais). Para PNG, escolha entre PNG-8 (arquivo menor, cores limitadas) e PNG-24 (alta qualidade, cores completas).
3. Verifique o tamanho da imagem: No canto inferior direito, confirme as dimensões finais.
4. Valide sRGB: Certifique-se de que “Converter para sRGB” está marcado.
5. Clique em “Salvar”.

Exportando sempre em 2x e comprimindo corretamente seus recursos no espaço de cores sRGB, você eliminará imagens desfocadas e garantirá que seus designs mantenham a mesma nitidez online que tinham no seu canvas.