<?xml version="1.0" encoding="utf-8"?>

Text mask

Text mask

Creating a text mask in Figma allows you to fill your text with images or patterns, adding a creative twist to your designs.

Follow these steps to create a text mask:

  1. Begin by typing out your text.
  2. Adjust the font and size to your liking.
  3. Place your chosen image or pattern above the text layer. This will be what fills the text.
  4. Once your text and image are ready, select both layers.
  5. Use the Use as Mask option in the right sidebar.

The text will now act as a mask, with the image visible only within the text outlines. You can move or resize the image for different effects, like a landscape picture filling in a bold title, or a geometric pattern giving life to a simple quote. This technique is perfect for eye-catching headings, dynamic logos, or engaging promotional graphics, making your text a visual centerpiece.

Improve your UX & Product skills with interactive courses that actually work