Como desfocar o fundo no Figma – Guia rápido para efeitos de fundo

Aprenda a desfocar o fundo no Figma usando desfoque de fundo e efeitos de camada. Perfeito para design de UI e sobreposições elegantes.

Crie vídeos e documentação de produto impressionantes com IA

Este tutorial foi criado com o Trupeer em menos de 5 minutos

Crie gratuitamente

Neste guia, vai aprender a aplicar um efeito de desfocagem a um frame no Figma usando o menu de design.
Siga os passos detalhados para alcançar a desfocagem pretendida de um elemento no seu projeto de design.

Um efeito de desfocagem de fundo no Figma dá ao seu design uma aparência de vidro fosco, comumente usada em modais, cartões e sobreposições.

Passo 1: Preparar a Camada de Desfocagem

Crie uma Forma
Use um retângulo ou qualquer forma/frame onde queira que o efeito de desfocagem apareça.
Adicione um Preenchimento
Preencha-o com uma cor sólida (por exemplo, branco ou cinzento).
Reduza a Opacidade
Reduza a opacidade da camada (normalmente cerca de 10–40%). Este passo é essencial para a desfocagem não aparecerá sem transparência.

Passo 2: Aplicar a Desfocagem de Fundo

Selecione a Camada
Clique na forma que acabou de criar.
Vá ao Painel de Efeitos
Na barra lateral direita, clique no "+" junto a Efeitos e, em seguida, escolha Desfocagem de Fundo no menu suspenso.
Ajuste o Valor da Desfocagem
Clique no ícone de definições junto ao efeito e use o controlo deslizante para ajustar o grau de desfocagem do fundo.

Opcional: Ajustes Finais

Pode combinar a desfocagem de fundo com sombras projetadas para adicionar profundidade.
Ajuste a opacidade e a desfocagem em conjunto para criar um aspeto suave e fosco ou um efeito forte e vítreo.

Guia Passo a Passo: Como Desfocar o Fundo no Figma

Passo 1

Para começar a aplicar um efeito de desfocagem no Figma, primeiro selecione o frame que pretende desfocar.

Navegue até ao menu de design localizado no lado direito da interface. Dentro deste menu, encontre a secção de efeitos e clique nela.

Na secção de efeitos, clique em 'Adicionar um novo efeito' clicando no símbolo '+' dentro dela.

To begin applying a blur effect in Figma, first select the frame you wish to blur. Navigate to the design menu located on the right side of the interface. Within this menu, find the effects section and click on it. In the effects section, click on 'Add a new effect' by clicking the '+' symbol within it.

Passo 2

Assim que o novo efeito for adicionado, aparecerá um menu suspenso. Clique neste menu e selecione 'Desfocagem de Camada'. O efeito de desfocagem foi agora aplicado com sucesso ao frame escolhido.

Once the new effect is added, a drop-down menu will appear. Click on this menu and select 'Layer Blur.' The blur effect has now been successfully applied to your chosen frame.

Dicas profissionais para desfocar o fundo no Figma

Aplicar Desfoque a um Objeto:
Selecione o objeto (imagem, forma ou frame) que pretende desfocar. Na barra lateral direita, na secção Efeitos, clique no ícone + e escolha Desfoque de Fundo ou Desfoque da Camada no menu pendente.
Ajustar a Intensidade do Desfoque:
Depois de aplicar o desfoque, use o controlo deslizante para ajustar a intensidade do desfoque. Pode aumentar ou diminuir a quantidade de desfoque para alcançar o efeito pretendido.
Use Desfoque Gaussiano para Maior Controlo:
Para um controlo mais preciso sobre o efeito de desfoque, use o Desfoque Gaussiano, que lhe proporciona um desfoque mais suave e gradual.
Desfocar Imagens ou Frames:
Se estiver a desfocar uma imagem ou frame, certifique-se de que a imagem está selecionada. Pode desfocar a imagem sem afetar outros elementos de design.
Vários Desfoques nas Camadas:
Pode aplicar vários efeitos de desfoque a diferentes camadas. Por exemplo, se quiser um fundo desfocado com texto nítido, aplique o desfoque apenas à camada de fundo.

Erros comuns ao desfocar o fundo no Figma

Desfocar a Camada Errada:
Correção: Verifique novamente a camada que selecionou antes de aplicar o desfoque. Use o Painel de Camadas para garantir que está a editar a camada correta.
Uso Excessivo do Efeito de Desfoque:
Correção: Não aplique demasiado desfoque a elementos importantes como texto ou logótipos, pois isso pode reduzir a legibilidade. Use o desfoque com moderação para dar destaque ao design.
Nitidez Não Intencional Após o Desfoque:
Correção: Se aplicar desfoque a imagens resultar numa nitidez indesejada, ajuste a quantidade de desfoque e experimente diferentes efeitos, como o Desfoque Gaussiano, para obter o aspeto pretendido.
O Desfoque Não Surge na Exportação:
Correção: Se o efeito de desfoque não estiver a aparecer quando exporta, certifique-se de que está a exportar com alta resolução (PNG ou SVG) para melhor qualidade.

Perguntas frequentes comuns para desfocar o fundo no Figma

Posso desfocar texto no Figma?
Embora possa desfocar formas vetoriais e imagens, não pode aplicar diretamente um desfoque ao texto no Figma. No entanto, pode rasterizar o texto numa forma e depois aplicar o efeito de desfoque.
Como posso desfocar o fundo de um design?
Selecione a camada de fundo ou a imagem, aplique o efeito Desfoque da camada e ajuste a intensidade. Isto é ótimo para dar destaque aos elementos em primeiro plano.
Posso controlar a direção do desfoque?
O efeito de desfoque do Figma aplica-se de forma uniforme. Se precisar de um desfoque direcional (como desfoque de movimento), terá de usar ferramentas externas de edição de imagem como Photoshop ou Illustrator antes de importar a imagem novamente para o Figma.
O efeito de desfoque manter-se-á após exportar o design?
Sim, o efeito de desfoque manter-se-á no design exportado, desde que o ficheiro seja guardado num formato suportado como PNG ou JPG.
Existe uma forma de desfocar apenas parte de uma imagem?
Sim, pode usar uma máscara no Figma para isolar uma área específica da imagem e aplicar o efeito de desfoque apenas a essa parte.
Como gravar o ecrã no Mac?
Para gravar o ecrã num Mac, pode usar Trupeer AI. Permite-lhe capturar o ecrã inteiro e oferece capacidades de IA como adicionar avatares de IA, adicionar locução, aplicar zoom de aproximação e afastamento no vídeo. Com a funcionalidade de tradução de vídeo com IA da Trupeer, pode traduzir o vídeo para mais de 30 idiomas.
Como adicionar um avatar de IA a uma gravação de ecrã?
Para adicionar um avatar de IA a uma gravação de ecrã, terá de usar uma ferramenta de gravação de ecrã com IA. O Trupeer AI é uma ferramenta de gravação de ecrã com IA, que ajuda a criar vídeos com vários avatares e também ajuda a criar o seu próprio avatar para o vídeo.
Como gravar o ecrã no Windows?
Para gravar o ecrã no Windows, pode usar a Game Bar integrada (Windows + G) ou uma ferramenta avançada de IA como o Trupeer AI para funcionalidades mais avançadas, como avatares de IA, locução, tradução etc.
Como adicionar locução ao vídeo?
Para adicionar locução a vídeos, descarregue a extensão do Trupeer AI para o Chrome. Depois de se registar, carregue o seu vídeo com voz, escolha a locução pretendida do Trupeer e exporte o seu vídeo editado.
Como faço zoom numa gravação de ecrã?
Para fazer zoom durante uma gravação de ecrã, use os efeitos de zoom no Trupeer AI, que lhe permitem aproximar e afastar em momentos específicos, aumentando o impacto visual do conteúdo do seu vídeo.