Máscaras

Antes de começar

Quem pode usar esse recurso

Qualquer pessoa em qualquer equipe ou plano

Qualquer pessoa com acesso de edição a um arquivo do Figma Design pode usar máscaras

Use máscaras para mostrar áreas específicas de objetos enquanto oculta o restante.

É como colocar uma fotografia dentro de um quadro com uma pequena abertura. Você verá uma parte da fotografia aparecendo pela abertura, enquanto o restante fica oculto, sem a necessidade de recortá-la para ajustá-la ao tamanho.

Como nenhuma parte das camadas mascaradas é modificada ou excluída nesse processo, as máscaras são uma ação não destrutiva. Isso permite preservar as áreas ocultas sem a necessidade de recortá-las para que se ajustem.

Como funcionam as máscaras

Qualquer camada pode ser usada como máscara, incluindo formas vetoriais, camadas de texto, imagens com canais de transparência, grupos e muito mais.

Quando você usa uma camada como máscara, é criado um objeto de máscara, que inclui a máscara e todas as camadas que ela está mascarando. Um objeto de máscara pode ser identificado na seção Camadas do painel de navegação à esquerda. O ícone de máscara identifica a máscara, com uma seta apontando para cima ao longo das camadas que estão sendo mascaradas.

As máscaras estão posicionadas abaixo das camadas mascaradas no eixo z. A máscara se aplica a todas as camadas irmãs acima dela até que alcance:

• Outra máscara ou objeto de máscara
• O quadro ou grupo pai da máscara
• Um quadro ou componente com Recortar conteúdo ativado

Saiba mais sobre as relações entre pai, irmãos e filhos.

No exemplo abaixo, a elipse roxa está atuando como máscara. Se a máscara estiver abaixo da imagem da pessoa no eixo z, ela mascarará essa imagem com sucesso. Se a máscara estiver acima da imagem, ela não será mascarada.

Tipos de máscara

Alfa

Todas as máscaras no Figma oferecem suporte a canais alfa. Canais alfa representam o grau de transparência ou opacidade em uma cor, imagem ou objeto.

Ao trabalhar com máscaras alfa, as máscaras são aplicadas com base na opacidade da máscara. Quanto maior a opacidade, mais conteúdo é revelado. Opacidade de zero por cento não revela nada.

Isso significa que podemos utilizar desfoques e opacidade em nossas máscaras:

• Importe arquivos PNG, GIF e WebP existentes com transparência (canais alfa)
• Use o efeito desfocar camada para reproduzir a suavização de bordas
• Aplique sombras projetadas e sombras internas para criar profundidade
• Adicione preenchimentos, traços e gradientes com variadas opacidades

No exemplo abaixo, usamos uma elipse com um traço externo como máscara. A opacidade do preenchimento da elipse é de 100% e a opacidade do traço é de 30%. Mais conteúdo é revelado no centro da imagem, pois a opacidade da máscara é maior (100%).

Vetor

Máscaras vetoriais, ou o uso de contornos de formas como máscaras, ignoram a translucidez — ou valores de opacidade maiores que zero — do preenchimento ou do traço da máscara. Se uma máscara contiver qualquer área com opacidade maior que zero, seus contornos serão usados como máscara, e toda a máscara assumirá opacidade de 100%.

No exemplo abaixo, uma imagem de um coração com plano de fundo completamente transparente está sendo usada como máscara. O objeto no canto inferior esquerdo utiliza uma máscara alfa, portanto vemos o contorno do coração. O objeto no canto inferior direito utiliza uma máscara vetorial e usa o contorno da imagem inteira como máscara.

Luminosidade

A luminosidade permite usar o brilho para determinar uma máscara. Quanto mais clara for a área da máscara, mais conteúdo é revelado, ou seja, maior é a opacidade das camadas mascaradas.

Quanto mais escura for a área, menos conteúdo é revelado. Se uma máscara tiver preenchimento preto, ou #000000, nada será revelado e as camadas mascaradas serão renderizadas com opacidade zero.

Criar e editar máscaras

Criar uma máscara

1. Escolha um objeto que você quer usar como sua máscara e coloque-o atrás de todos os objetos que serão mascarados no eixo z.
2. Selecione todas as camadas que farão parte do objeto de máscara.
3. Na barra lateral direita, selecione Mais opções > Usar como máscara, ou pressione:
   
   • Mac: ⌃ Control ⌘ Command M
   • Windows: Ctrl Alt M

   Observação: se você tiver apenas uma camada selecionada, selecione Usar como máscara diretamente da barra lateral direita.

4. O Figma criará um grupo de máscara com todas as camadas selecionadas.
5. Por padrão, o tipo de máscara é definido como Alfa. Para alterá-lo, selecione a camada que está sendo usada como máscara e abra o menu suspenso na seção Máscara da barra lateral direita. Passe o mouse sobre qualquer opção para visualizá-la na tela de trabalho. Saiba mais sobre os tipos de máscara.

Para adicionar camadas a um objeto de máscara existente, use o painel de Camadas para clicar e arrastar as camadas para dentro do objeto de máscara.

Saiba mais sobre como reordenar camadas.

Redimensionar e mover

Máscaras e camadas mascaradas podem ser movidas e redimensionadas de forma independente. Isso significa que, ao mover ou redimensionar uma máscara, as camadas mascaradas não serão afetadas, e vice-versa.

Isso acontece porque elas são camadas irmãs, portanto as máscaras não possuem nenhum comportamento de hierarquia que um quadro, grupo ou componente possa ter.

Saiba mais sobre as relações entre pai, irmãos e filhos.

Remover uma máscara

Para parar de usar um objeto como máscara, use qualquer um dos seguintes métodos para desativá-lo:

• Selecione a máscara e clique em  na barra lateral direita
• Clique com o botão direito na máscara e selecione Remover máscara
• Selecione a máscara e use o atalho do teclado:
  • Mac: ⌃ Control ⌘ Command M
  • Windows: Ctrl Alt M

Qualquer porção escondida pela máscara reaparecerá.

Revelar contornos da máscara

Por padrão, o Figma não mostra os limites de uma máscara. Use contornos de máscara ao trabalhar com máscaras complexas ou para verificar se há espaços vazios indesejados.

Para alternar os contornos de máscara:

1. Abra o menu Figma.
2. Vá para Visualizar > Contornos de máscara.

Uma vez que a configuração esteja ativada, as máscaras terão contorno verde.