Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Masks | Creating Visuals
UI/UX with Figma
course content

Contenido del Curso

UI/UX with Figma

UI/UX with Figma

1. Figma Basic Tools
2. Creating and Organizing Objects
3. Creating Visuals
4. Prototyping
5. Submitting Work

book
Masks

Masks in Figma are used to reveal specific parts of layers or objects while hiding the rest.

Here's how they work:

  • Place an object (e.g., an image) and the mask shape (e.g., an ellipse) together, with the mask shape behind the object;
  • Select both layers, right-click, and choose Use as Mask, or use the shortcut Ctrl+Alt+M (Windows) / Command+Option+M (Mac). The mask base becomes invisible, showing only the selected portions of the layer above it;
  • You can also do masking with text. Place the text behind an image and use it as a mask to create creative text effects. Layers in the mask can be resized or scaled independently;
  • The base shape of a mask becomes invisible when multiple objects are masked together. To add a background to a masked design, create a new shape and place it behind the mask base;
  • Transparent PNGs can also act as masks, and shapes can be masked with PNGs to create complex designs.

Masks generally offer more flexibility than image fill, allowing you to combine multiple objects into complex designs. Even though Figma has relatively few shapes and tools, it provides the essentials, and with these simple elements, you can create truly brilliant designs.

When using a transparent PNG as a mask, what determines the shape of the mask?

When using a transparent PNG as a mask, what determines the shape of the mask?

Selecciona la respuesta correcta

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 2
We're sorry to hear that something went wrong. What happened?
some-alt