Antes de empezar
Quién puede utilizar esta función
Cualquier persona de cualquier equipo o plan
Cualquier persona con acceso de edición a un archivo de diseño de Figma puede utilizar máscaras
Utiliza máscaras para mostrar áreas específicas de los objetos mientras ocultas el resto.
Es como colocar una fotografía dentro de un marco con una pequeña abertura. Verás una parte de la fotografía asomando por la abertura, mientras que el resto queda oculto sin necesidad de recortarla.
Dado que en este proceso no se modifica ni se elimina ninguna parte de las capas enmascaradas, las máscaras son una acción no destructiva. Esto te permite conservar las áreas ocultas sin necesidad de recortarlas para que encajen.
Cómo funcionan las máscaras
Cualquier capa puede utilizarse como máscara, incluyendo formas vectoriales, capas de texto, imágenes con canales de transparencia, grupos y mucho más.
Cuando se utiliza una capa como máscara, se crea un objeto de máscara, que incluye la máscara y cualquier capa que esté enmascarando. Un objeto de máscara puede identificarse en la sección Capas del panel de navegación izquierdo. El ícono de máscara identifica la máscara, con una flecha apuntando hacia arriba a lo largo de las capas que se están enmascarando.
Las máscaras se colocan debajo de las capas enmascaradas en el eje z. La máscara se aplica a todos los objetos hermanos que se encuentran encima de ella hasta que alcanza:
- Otra máscara u objeto de máscara
- El marco o grupo principal de la máscara
- Un marco o componente con contenido recortado
Obtén más información sobre las relaciones entre objetos principales, hermanos y secundarios.
En el ejemplo siguiente, la elipse morada actúa como máscara. Si la máscara se sitúa debajo de la imagen de la persona en el eje z, enmascarará correctamente esa imagen. Si la máscara se sitúa encima de la imagen, no se enmascarará.
Tipos de máscara
Alfa
Todas las máscaras en Figma admiten canales alfa. Los canales alfa representan el grado de transparencia u opacidad en un color, imagen, u objeto.
Cuando se trabaja con máscaras alfa, estas se aplican en función de su opacidad. Cuanto mayor sea la opacidad, más se revelará. Una opacidad del cero por ciento no revela nada.
Esto significa que podemos utilizar desenfoques y opacidad en nuestras máscaras:
- Importa archivos PNG, GIF y WebP existentes con transparencia (canales alfa)
- Utiliza efectos de desenfoque de capa para replicar el difuminado
- Aplica sombras proyectadas e internas para crear profundidad
- Agrega rellenos, trazos y gradientes con opacidad variable
En el siguiente ejemplo, hemos utilizado una elipse con un trazo exterior como máscara. La opacidad del relleno de la elipse es del 100 % y la opacidad del trazo es del 30 %. Se revela más en el centro de la imagen, porque la opacidad de la máscara es mayor (100 %).
Vector
Las máscaras vectoriales, o el uso de esquemas de formas como máscaras, ignoran la translucidez (o el valor de opacidad superior al cero por ciento) del relleno o trazo de una máscara. Si una máscara contiene cualquier área con una opacidad superior al cero por ciento, sus esquemas se utilizan como máscara y toda la máscara adquiere una opacidad del 100 %.
En el ejemplo siguiente, se utiliza como máscara una imagen de un corazón con un fondo completamente transparente. El objeto de la parte inferior izquierda utiliza una máscara alfa, por lo que vemos el esquema del corazón. El objeto de la parte inferior derecha utiliza una máscara vectorial y utiliza el esquema de toda la imagen como máscara.
Luminosidad
La luminosidad te permite utilizar el brillo para determinar una máscara. Cuanto más brillante sea el área de una máscara, más se revelará, o en otras palabras, mayor será la opacidad de las capas que se están enmascarando.
Cuanto más oscura sea el área, menos se revelará. Si una máscara tiene un relleno negro, o #000000, no se revelará nada y las capas enmascaradas se renderizarán con una opacidad del cero por ciento.
Crear y editar máscaras
Crear una máscara
- Elige un objeto que desees utilizar como máscara y colócalo detrás de todos los objetos que se enmascararán en el eje z.
- Selecciona todas las capas que formarán parte del objeto de máscara.
- En la barra lateral derecha, selecciona Más opciones > Usar como máscara, o presiona:
- Mac: ⌃ Control ⌘ Command M
- Windows: Ctrl Alt M
Nota: Si solo tienes una capa seleccionada, selecciona Usar como máscara directamente en la barra lateral derecha.
- Figma creará un grupo de máscaras con todas las capas seleccionadas.
- De forma predeterminada, el tipo de máscara está configurado como Alfa. Para cambiarlo, selecciona la capa que se utiliza como máscara y abre el menú desplegable en la sección Máscara de la barra lateral derecha. Pasa el cursor sobre cualquier opción para obtener una vista previa en el lienzo. Obtén más información sobre los tipos de máscaras.
Para agregar capas a un objeto de máscara existente, utiliza el panel Capas para hacer clic y arrastrarlas al objeto de máscara.
Obtén más información sobre cómo reordenar capas.
Cambiar de tamaño y mover
Las máscaras y las capas enmascaradas se mueven y cambian de tamaño de forma independiente entre sí. Esto significa que cuando muevas o cambies el tamaño de una máscara, las capas enmascaradas no se verán afectadas, y viceversa.
Esto se debe a que son hermanas entre sí, por lo que las máscaras no tienen ningún comportamiento de parentesco que pueda tener un marco, grupo o componente.
Obtén más información sobre las relaciones entre objetos principales, hermanos y secundarios.
Eliminar una máscara
Para dejar de usar un objeto como máscara, utiliza cualquiera de los siguientes métodos para desactivarlo:
- Selecciona la máscara y haz clic en en la barra lateral derecha
- Haz clic derecho en la máscara y selecciona Eliminar máscara
- Selecciona la máscara y utiliza el atajo de teclado:
- Mac: ⌃ Control ⌘ Command M
- Windows: Ctrl Alt M
Las partes ocultas por la máscara volverán a aparecer.
Revelar esquemas de máscara
De forma predeterminada, Figma no muestra los límites de una máscara. Utiliza los esquemas de máscara cuando trabajes con máscaras complejas o para comprobar si hay espacios vacíos no deseados.
Para activar o desactivar los esquemas de máscara:
- Abre el menú de Figma.
- Ve a Vista > Esquemas de máscara.
Una vez activada la configuración, las máscaras de tu archivo se resaltarán en verde.
Nota: Si todas las capas enmascaradas están ocultas o tienen una opacidad del cero por ciento, los esquemas de la máscara del objeto no aparecerán.