Masken

Vor dem Start

Wer diese Funktion verwenden kann

Jede Person in jedem Team oder Abo

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

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

Es ist so, als würde man ein Foto in einen Bilderrahmen mit einer kleinen Öffnung platzieren. 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, Text-Ebenen, Bilder mit Transparenzkanälen, Gruppen und mehr.

Wenn du eine Ebene als Maske verwendest, wird ein Maskenobjekt erstellt, das die Maske und alle Ebenen umfasst, die dadurch maskiert werden. Ein Maskenobjekt kann im Bereich Ebenen des linken Navigationspanels identifiziert werden. Das Icon identifiziert die Maske, mit einem nach oben gerichteten 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 Frame bzw. Gruppe
• einem Frame oder einer Komponente mit abgeschnittenem Inhalt

Hier erfährst du mehr über übergeordnete, gleichgestellte und untergeordnete Beziehungen.

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-Weichzeichnungseffekte, um eine weiche Kante zu erzeugen.
• Füge Schlagschatten und Innenschatten hinzu, um Tiefe zu erzeugen.
• Füge Füllungen, Konturen und Farbverlä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 Formumrissen als Masken wird die Transparenz – oder ein Deckkraftwert von mehr als null Prozent – der Füllung oder der 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 möchtest, 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. Wählen in der rechten Seitenleiste Weitere Optionen > Als Maske verwenden oder drücke:
   
   • Mac: ⌃ Control ⌘ Command M
   • Windows: Strg Alt M

   Hinweis: Wenn du nur eine Ebene ausgewählt hast, wähle Als Maske verwenden direkt in der rechten Seitenleiste aus.

4. Figma erstellt eine Maskengruppe mit allen ausgewählten Ebenen.
5. Standardmäßig ist der Maskentyp auf Alpha gesetzt. Um ihn zu ändern, wähle die Ebene aus, die als Maske verwendet werden soll, und öffne die Dropdown-Liste im Abschnitt Maske der rechten Seitenleiste. Bewege den Mauszeiger über eine Option, um eine Vorschau auf der Arbeitsfläche zu sehen. Erfahre mehr über die verschiedenen Maskentypen.

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

Masken und maskierte Ebenen können unabhängig voneinander verändert werden. Das bedeutet, 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 Frame, eine Gruppe oder eine Komponente haben könnte.

Hier erfährst du mehr über übergeordnete, gleichgestellte und untergeordnete Beziehungen.

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 rechten Seitenleiste auf .
• Klicke mit der rechten Maustaste auf die Maske und wähle Maske entfernen.
• Wähle die Maske aus und verwende das Tastenkürzel:
  • 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. Gehe zu Ansicht > Maskenumrisse.

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