Antes de empezar
Quién puede utilizar esta función
Cualquiera en cualquier equipo o plan
Cualquiera con acceso de edición a un archivo Figma Design puede usar máscaras
Usa máscaras para mostrar áreas específicas de los objetos mientras se oculta el resto.
Es como colocar una fotografía dentro de un marco de imagen con una pequeña abertura. Verás una parte de la fotografía asomándose por la abertura, mientras que el resto se oculta sin necesidad de recortarla al tamaño adecuado.
Dado que ninguna parte de las capas con máscaras se modifica o elimina en este proceso, las máscaras son una acción no destructiva. Esto te permite preservar las áreas ocultas sin necesidad de recortarlas para que encajen.
Cómo funcionan las máscaras
Cualquier capa se puede utilizar como una máscara, incluidas las formas vectoriales, las capas de texto, las imágenes con canales de transparencia, los grupos y más.
Cuando usas 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 icono de máscara identifica la máscara, con una flecha hacia arriba a lo largo de las capas que están siendo enmascaradas.
Las máscaras se posicionan debajo de las capas enmascaradas en el eje z. La máscara se aplica a todos los hermanos por 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 recortar contenido
Aprender más sobre las relaciones de principal, hermano y secundario.
En el ejemplo a continuación, la elipse púrpura actúa como la máscara. Si la máscara se encuentra debajo de la imagen de la persona en el eje z, enmascarará exitosamente esa imagen. Si la máscara está por encima de la imagen, no será enmascarada.
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, las máscaras se aplican en función de la opacidad de la máscara. Cuanto mayor es la opacidad, más se revela. El cero por ciento de opacidad no revela nada.
Esto significa que podemos utilizar desenfoques y opacidad en nuestras máscaras:
- Importar archivos PNG, GIF y WebP existentes con transparencia (canales alfa)
- Usa efectos de desenfoque de capa para replicar el feathering
- Aplica sombras exteriores y sombras internas para crear profundidad
- Añade rellenos, trazos y degradados con opacidad variable
En el ejemplo a continuación, hemos utilizado una elipse con un trazo externo como nuestra 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 forma 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, entonces sus esquemas se utilizan como la máscara y la máscara completa asume una opacidad del 100 %.
En el ejemplo a continuación, se está utilizando una imagen de un corazón con un fondo completamente transparente como máscara. El objeto en la parte inferior izquierda está usando una máscara alfa, por lo que vemos el esquema del corazón. El objeto en la parte inferior derecha está usando una máscara vectorial, y usa el esquema de toda la imagen como la máscara.
Luminancia
La luminancia te permite usar la luminosidad para determinar una máscara. Cuanto más brillante es el área de una máscara, más se revela, o en otras palabras, mayor es la opacidad de las capas enmascaradas.
Cuanto más oscura es el área, menos se revela. Si una máscara tiene un relleno negro, o #000000, esto no revelará nada y las capas enmascaradas se rendirán al cero por ciento de opacidad.
Crear y editar máscaras
Crear una máscara
- Elige un objeto que desees usar 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.
- Desde 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 desde la barra lateral derecha.
- Figma creará un grupo de máscara con todas las capas seleccionadas.
- De forma predeterminada, el tipo de máscara estará configurado en Alfa. Para cambiarlo, selecciona la capa que se está usando como máscara y abre el menú desplegable en la sección de Máscara de la barra lateral derecha. Pasa el cursor sobre cualquier opción para ver la vista previa en el lienzo. Aprender sobre tipos de máscara.
Para añadir capas a un objeto de máscara existente, usa el panel de Capas para hacer clic y arrastrarlas al objeto de máscara.
Aprender más sobre la reordenación de capas.
Redimensionar y mover
Las máscaras y las capas enmascaradas se mueven y redimensionan de manera independiente entre sí. Esto significa que cuando mueves o redimensionas una máscara, cualquier capa enmascarada no se verá afectada, y viceversa.
Esto se debe a que son elementos hermanos, por lo que las máscaras no tienen el comportamiento parental que podría tener un marco, grupo o componente.
Aprender más sobre las relaciones de principal, hermano y secundario.
Eliminar una máscara
Para dejar de usar un objeto como máscara, usa cualquiera de los siguientes métodos para desactivarlo:
- Selecciona la máscara y haz clic en en la barra lateral derecha
- Haz clic con el botón derecho en la máscara y selecciona Eliminar máscara
- Selecciona la máscara y usa el atajo de teclado:
- Mac: ⌃ Control ⌘ Command M
- Windows: Ctrl Alt M
Cualquier sección oculta por la máscara volverá a aparecer.
Revelar los esquemas de la máscara
Figma no muestra los límites de una máscara de forma predeterminada. Usa los esquemas de la máscara al trabajar con máscaras complejas o para verificar espacios vacíos no deseados.
Para alternar los esquemas de máscara:
- Abre el menú Figma.
- Ve a Ver > Esquemas de máscara.
Una vez activada la configuración, las máscaras en tu archivo se indican en verde.
Nota: Si todas las capas enmascaradas están ocultas o tienen cero por ciento de opacidad, entonces los esquemas de la máscara del objeto no aparecerán.