Masken

Bevor du anfängst

Wer kann diese Funktion nutzen?

Nutzer*innen in jedem Team oder Abo. 

Alle Nutzer*innen mit Schreibzugriff auf eine Figma-Design-Datei können Masken verwenden.

Mit Masken kannst du bestimmte Bereiche von Objekten zeigen und den Rest verbergen.

Es ist vergleichbar mit einem Foto, das in einen Bilderrahmen mit einer kleinen Öffnung platziert wird. Du siehst einen Teil des Fotos durch die Öffnung, während der Rest verborgen bleibt, ohne dass du es zuschneiden musst.

Da bei diesem Vorgang kein Teil der maskierten Ebenen verändert oder gelöscht wird, sind Masken eine nicht-destruktive Aktion. So kannst du die verdeckten Bereiche bewahren, ohne sie zuschneiden zu müssen.

Funktionsweise von Masken

Jede Ebene kann als Maske verwendet werden, u. a. Vektorformen, Textebenen, Bilder mit Transparenzkanälen, Gruppen und mehr.

Wenn du eine Ebene als Maske verwendest, wird ein Maskenobjekt erstellt, das die Maske und alle von ihr maskierten Ebenen beinhaltet. Ein Maskenobjekt erkennst du im Ebenen-Tab an dem am unteren Rand, das die Maske kennzeichnet, und an dem nach oben zeigenden Pfeil entlang der maskierten Ebenen.

Masken werden unter den maskierten Ebenen auf der Z-Achse positioniert. Die Maske gilt für alle darüber liegenden gleichgeordneten Objekte bis zu:

• einer weiteren Maske oder einem weiteren Maskenobjekt
• dem/der der Maske übergeordneten Rahmen bzw. Gruppe
• einem Rahmen oder einer Komponente mit abgeschnittenem Inhalt

Weitere Informationen zu Beziehungen zwischen über-, unter- und gleichgeordneten Objekten →

In dem Beispiel unten dient die lila Ellipse als Maske. Wenn die Maske unterhalb des Bildes der Person auf der Z-Achse liegt, wird dieses Bild erfolgreich maskiert. Wenn die Maske oberhalb des Bildes liegt, wird es nicht maskiert.

Arten von Masken

Alpha

Alle Masken in Figma unterstützen Alphakanäle. Alphakanäle stellen den Grad der Transparenz bzw. Deckkraft einer Farbe, eines Bildes oder eines Objekts dar.

Beim Arbeiten mit Alphamasken werden die Masken basierend auf der Deckkraft der Maske angewendet. Je höher die Deckkraft, desto mehr ist sichtbar. Bei einer Deckkraft von null Prozent ist alles verdeckt.

Das bedeutet, dass wir Unschärfe und Deckkraft in unseren Masken verwenden können:

• Importiere vorhandene PNG-, GIF- und WebP-Dateien mit Transparenz (Alphakanäle).
• Verwende Ebenen-Unschärfeeffekte, um eine weiche Kante zu erzeugen.
• Füge Schlag- und Schatten nach innen hinzu, um Tiefe zu erzeugen.
• Füge Füllungen, Konturen und Verläufe mit unterschiedlicher Deckkraft hinzu.

Im folgenden Beispiel haben wir eine Ellipse mit einer äußeren Kontur als Maske verwendet. Die Deckkraft der Ellipsenfüllung beträgt 100 % und die Deckkraft der Kontur 30 %. In der Mitte des Bildes wird mehr sichtbar, weil die Deckkraft der Maske höher ist (100 %).

Vektor

Bei Vektormasken oder bei der Verwendung von Formkonturen als Masken wird die Transparenz – oder ein Deckkraftwert von mehr als null Prozent – der Füllung oder Kontur einer Maske ignoriert. Wenn eine Maske einen Bereich mit einer Deckkraft von mehr als null Prozent enthält, werden die Umrisse als Maske verwendet und die gesamte Maske erhält eine Deckkraft von 100 %.

Im folgenden Beispiel wird das Bild eines Herzens mit einem vollständig transparenten Hintergrund als Maske verwendet. Das Objekt unten links verwendet eine Alphamaske, sodass wir den Umriss des Herzens sehen. Das Objekt unten rechts verwendet eine Vektormaske und nutzt den Umriss des gesamten Bildes als Maske.

Luminanz

Mit Luminanz kannst du die Helligkeit zum Festlegen der Deckkraft einer Maske verwenden. Je heller der Bereich einer Maske ist, desto mehr wird angezeigt – oder anders gesagt, desto höher ist die Deckkraft der maskierten Ebenen.

Je dunkler der Bereich ist, desto weniger wird enthüllt. Wenn eine Maske eine schwarze Füllung bzw. #000000 hat, ist nichts zu sehen und maskierte Ebenen werden mit null Prozent Deckkraft gerendert.

Masken erstellen und bearbeiten

Eine Maske erstellen

1. Wähle ein Objekt, das du als Maske verwenden willst, und platziere es auf der Z-Achse hinter allen Objekten, die maskiert werden sollen.
2. Wähle alle Ebenen aus, die Teil des Maskenobjekts werden.
3. Erstelle das Maskenobjekt, indem du in der oberen Symbolleiste auf klickst, oder drücke:
   
   • Mac: ⌃ Control ⌘ Command M
   • Windows: Strg Alt M
4. Standardmäßig ist der Maskentyp auf Alphagesetzt. Um ihn zu ändern, wähle die Ebene aus, die als Maske verwendet werden soll, und öffne das Dropdown-Menü im Abschnitt Mask (Maske) der rechten Seitenleiste. Bewege den Mauszeiger über eine Option, um eine Vorschau auf der Arbeitsfläche zu sehen. Erfahre mehr über die verschiedenen Arten von Masken ↑.

Um einem bestehenden Maskenobjekt Ebenen hinzuzufügen, klicke im Ebenen-Tab auf die Ebenen und ziehe sie in das Maskenobjekt.

Erfahre mehr über das Neuanordnen von Ebenen →.

Größe ändern und verschieben

Größe und Position von Masken und maskierten Ebenen können unabhängig voneinander verändert werden. Das heißt, wenn du eine Maske verschiebst oder ihre Größe änderst, bleiben alle maskierten Ebenen davon unberührt und umgekehrt.

Das liegt daran, dass sie gleichgeordnete Elemente sind. Masken haben also kein übergeordnetes Verhalten, wie es ein Rahmen, eine Gruppe oder eine Komponente haben könnte.

Erfahre mehr über die Beziehungen zwischen über-, unter- und gleichgeordneten Objekten →.

Eine Maske entfernen

Um ein Objekt nicht mehr als Maske zu verwenden, kannst du es auf eine der folgenden Arten deaktivieren:

• Wähle die Maske aus und klicke in der oberen Symbolleiste auf .
• Klicke mit der rechten Maustaste auf die Maske und wähle Use as maks (Als Maske verwenden).
• Wähle die Maske aus und benutze den Tastaturkurzbefehl:
  • Mac: ⌃ Control ⌘ Command M
  • Windows: Strg Alt M

Dadurch werden alle Bereiche, die von der Maske verdeckt waren, wieder sichtbar.

Umrisse einer Maske anzeigen

Standardmäßig zeigt Figma die Ränder einer Maske nicht an. Verwende Maskenumrisse beim Arbeiten mit komplexen Masken oder um zu prüfen, ob es unbeabsichtigte Leerräume gibt.

So kannst du die Maskenumrisse ein- bzw. ausblenden:

1. Öffne das Figma-Menü.
2. Navigiere zu View (Ansicht) > Mask outlines (Maskenumrisse).

Wenn die Einstellung aktiviert ist, werden die Masken in deiner Datei grün umrandet dargestellt.