Vor dem Start

Wer kann diese Funktion verwenden?

Unterstützt von jedem Team und jedem Abo

Nur Personen mit Schreibzugriff auf die Datei können Änderungen an der Position, der Abmessung oder der Ausrichtung einer Ebene vornehmen.

Jede Form, jedes Textobjekt und jedes Bild, das du der Arbeitsfläche hinzufügst, hat eine eigene Ebene. Auf diese Weise kannst du beim Erstellen zusammenhängender und komplexer Designs jede Ebene einzeln anpassen.

In diesem Artikel erfährst du, wie du die Ausrichtung, Position, Abmessung und Rotation deiner Ebenen anpassen kannst. Dies gilt sowohl für einzelne Ebenen als auch für Rahmen, Komponenten, Gruppen und Auswahlen.

Die meisten dieser Eigenschaften findest du im oberen Bereich des Design-Tabs in der rechten Seitenleiste. Du kannst einige dieser Eigenschaften auch auf der Arbeitsfläche selbst anpassen.

Ausrichtung

Ausrichtungswerkzeuge ermöglichen es dir, Ebenen auf dem Whiteboard in Relation zueinander anzuordnen. Figma ermittelt die Ausrichtung der Ebenen anhand deiner speziellen Auswahl.

• Ein Objekt oder eine Ebene auswählen: Figma richtet die Ebene an ihrer übergeordneten Ebene aus. Dies kann eine Gruppe, ein Rahmen oder der umgebende Rahmen einer Komponente sein.
• Mehrere Ebenen auswählen: Figma richtet die Ebenen zueinander, zu ihrem übergeordneten Rahmen oder zu ausgewählten Ebenen in einer Instanz aus.

Verwende die Steuerungen der Ausrichtung in der rechten Seitenleiste, um ein Objekt an seiner übergeordneten Ebene auszurichten oder um mehrere Objekte zueinander auszurichten: 

• (Linksbündig)
• (Horizontal zentriert)
• (Rechtsbündig)
• (Oben ausgerichtet)
• (Vertikal zentriert)

Alternativ kannst du auch Tastaturkürzel verwenden:

Aktion	Tastaturbefehl
Oben ausgerichtet	AltW
Linksbündig	AltA
Unten ausgerichtet	AltS
Rechtsbündig	AltD
Vertikal zentriert	AltV
Horizontal zentriert	AltH

Halte die Umschalttaste gedrückt und klicke auf die Ausrichtungs-Steuerelemente, um mehrere Objekte als Gruppe an ihrem übergeordneten Rahmen auszurichten. Wenn Objekte in verschiedenen Rahmen vorhanden sind, werden sie an ihren jeweiligen übergeordneten Rahmen ausgerichtet.

An Einstellungen ausrichten

Wenn du die Größe eines Objekts änderst, Ebenen verschiebst oder Vektorpunkte verschiebst, verwende die An Einstellungen ausrichten, um sie an anderen Elementen auf der Arbeitsfläche auszurichten. Eine rote Hilfslinie wird auf der Arbeitsfläche als visuelle Anzeige angezeigt.

• An Geometrie ausrichten: Wird nur im Vektorbearbeitungsmodus verwendet. Wenn diese Einstellung aktiviert ist, wird ein Vektorpunkt durch Klicken und Ziehen an anderen Vektorpunkten ausgerichtet.
• An Objekten ausrichten: Richte die Mittelpunkte und äußersten Punkte verschiedener Objekte aus.
• Am Pixelraster ausrichten: Richte Objekte an einem zugrundeliegenden Raster aus, um Fehler bei der Pixelausrichtung beim Exportieren von Elementen zu vermeiden. Das Pixelraster muss nicht sichtbar sein, damit diese Einstellung funktioniert.

Um das Einrasten in den Einstellungen zu aktivieren und zu deaktivieren, öffne eine Figma Design-Datei und gehe zu  > Einstellungen. Du findest diese Einstellungen auch im Menü für den Schnellzugriff. 

„An Einstellungen ausrichten“ wird auf alle Figma Design-Dateien angewendet.

Wenn du die Option An Geometrie ausrichten oder An Objekten ausrichten aktiviert hast, halte Strg gedrückt, um sie vorübergehend zu deaktivieren.

Um die Option An Pixelraster ausrichten mit Strg vorübergehend zu deaktivieren, stelle sicher, dass du dich im Vektorbearbeitungsmodus befindest und die Arbeitsfläche vergrößert hast. Um festzustellen, ob du ausreichend vergrößert hast, aktiviere das Pixelraster ⇧ Shift ' und zoome hinein bis das Raster sichtbar ist. Beachte, dass das Pixelraster nicht aktiviert sein muss, um diese Tastenkombination zu verwenden.

Verteilung

Verwende die Verteilung, um einen gleichmäßigen Abstand zwischen den Ebenen in einer Auswahl zu erstellen. Du muust mehr als eine Ebene oder ein Objekt ausgewählt haben.

Bei Verwendung von „Verteilen“ behält Figma die Position der äußersten Objekte oder Ebenen bei:

• Horizontalen Abstand verteilen: Sowohl die Objekte bzw. Ebenen ganz links als auch ganz rechts behalten ihre Position.
• Vertikalen Abstand verteilen: Sowohl die oberen als auch die unteren Objekte oder Ebenen behalten ihre Position.
• Aufräumen (smarte Auswahl) ↓

Aufräumen

Verwende „Aufräumen“, um Ebenen schnell eindimensional als Zeilen oder Spalten auszurichten. Oder kombiniere Zeilen und Spalten, um zweidimensionale Layouts zu erstellen.

Du kannst dann den horizontalen und vertikalen Abstand zwischen den Objekten in deiner Auswahl mit der smarten Auswahl anpassen. Erfahre, wie du smarte Auswahl verwendest →

Abhängig von deiner Auswahl wird eine der folgenden Optionen angezeigt:

• Vertikale Auswahl aufräumen (eine Dimension)
• Horizontale Auswahl aufräumen (eine Dimension)
• Aufräumen (zweidimensional)

Eindimensionale Auswahlen

Bei einer Auswahl auf der horizontalen oder vertikalen Achse (eine Dimension) ordnet Figma die Objekte auf der Grundlage der Achse an, auf der sie sich überschneiden.

Bei Objekten auf der X-Achse wird nur der horizontale Abstand angepasst, bei Objekten auf der Y-Achse wird nur der vertikale Abstand angepasst.

Figma verwendet den gängigsten Abstand in der Auswahl, um den Wert Abstand zwischen festzulegen.

Zweidimensionale Auswahlen

Bei der Verwendung von Objekten in zwei Dimensionen, wie z. B. einem Raster, ist der Aufräumprozess viel strenger. Figma passt sowohl die vertikalen als auch die horizontalen Abstände zwischen den Objekten an.

Der vertikale und horizontale Abstand hängt von ihrer Startposition ab und kann gleich oder unterschiedlich sein. Sobald Figma die Ebenen aufgeräumt hat, kannst du den vertikalen und horizontalen Abstand anpassen

Im Gegensatz zum „Verteilen“, bei dem die Objekte innerhalb der ursprünglichen Auswahl neu positioniert werden, werden beim Aufräumen alle Objekte in einem Raster angeordnet, das an der linken oberen Ecke der Auswahl ausgerichtet ist.

Verteilen oder aufräumen

Wenn du „Aufräumen“ auf eine eindimensionale Auswahl anwendest, wirst du feststellen, dass diese Funktion ähnlich wie die Funktion Verteilen funktioniert. Du kannst dir das „Aufräumen“ als „Verteilen“ mit etwas zusätzlicher Logik vorstellen.

Der Hauptzweck der Aufräumfunktion besteht darin, Ebenen so anzuordnen, dass sie beide Kriterien für eine smarte Auswahl erfüllen. Das heißt, sie müssen gleich weit voneinander entfernt sein und sich auf beiden Achsen überlappen.

• Durch „Verteilen“ wird lediglich ein gleichmäßiger Abstand zwischen den Ebenen festgelegt. Eine Überlappung der Ebenen auf den Achsen ist nicht erforderlich. Bei Bedarf führt „Aufräumen“ beides aus.
• Mit „Aufräumen“ kannst du Objekte gleichzeitig entlang beider Achsen ausrichten. „Verteilen“ funktioniert immer nur entlang einer Achse: horizontalen Abstand verteilen oder vertikalen Abstand verteilen.

Sowohl beim „Verteilen“ als auch beim „Aufräumen“ zeigt Figma den Abstand zwischen dem Feld oder . Dies basiert auf dem häufigsten Abstand zwischen Werten (dem Modus).

Position

Du kannst die Position der Ebenen auf der Arbeitsfläche entlang einer der beiden Dimensionen oder Achsen anpassen: horizontal (X-Achse) und vertikal (Y-Achse).

Figma stellt die Position einer Ebene auf der Arbeitsfläche mithilfe von X- und Y-Koordinaten dar. Diese beziehen sich auf die obere linke Ecke der Ebenengrenzen.

1. Öffne in der rechten Seitenleiste den Design-Tab.
2. Verwende die Felder X und Y, um die Koordinaten der Ebene anzupassen.
3. Du kannst auch einfache mathematische Gleichungen (- + * / ^ () ) verwenden, um die Werte der X- und Y-Koordinaten schnell anzupassen. Du kannst vor oder nach dem vorhandenen Wert eine Gleichung hinzufügen oder ihn vollständig durch eine neue Gleichung ersetzen. Mehr zu Gleichungen ↓

Nudge-Ebenen

Verwende deine Pfeiltasten, um die Position deiner Ebenen zu verändern. Mit Figma kannst du zwei Standard-Verschiebewerte festlegen: kleiner Verschiebewert und großer Verschiebewert.

Standardmäßig ist der kleine Verschiebewert auf 1 und der große Verschiebewert auf 10festgelegt. Beide Werte werden in auflösungsunabhängigen Punkten angegeben. Kleine und große Verschiebewerte festlegen →

Verwende Pfeile, um Ebenen zu verschieben

Verwende die Pfeiltasten, um deine Auswahl zu verschieben. Die Pfeiltasten verwenden deine Einstellungen für die niedrigen Verschiebewerte. Halte die Umschalttaste gedrückt, um stattdessen die Einstellungen für die hohen Verschiebewerte zu verwenden.

• ← Links
• ↓ Nach unten
• ↑ Oben
• → Rechts

Abmessungen

Jede Ebene auf der Arbeitsfläche hat ihre eigenen Abmessungen. Abmessungen einer Ebene anzeigen:

1. Wähle die Ebene auf der Arbeitsfläche oder im Ebenen-Tab aus.
2. Sieh dir die Abmessungen in der blauen Beschriftung unter dem Begrenzungsrahmen der Ebene an.
3. Du kannst die Abmessungen jeder Ebene auch mithilfe der Felder W und H in der rechten Seitenleiste anzeigen.

Wähle eine Ebene aus, um die Abmessungen einer Ebene zu ändern. Dafür stehen mehrere Methoden zur Verfügung:

• So passt du die Breite einer Ebene an: Bewege den Mauszeiger über die linke oder rechte Begrenzung der Ebene, bis angezeigt wird. Klicke und ziehe, um die Größe zu ändern.
• So passt du die Höhe einer Ebene an: Bewege den Mauszeiger über die obere oder untere Begrenzung der Ebene, bis angezeigt wird. Klicke und ziehe, um die Größe zu ändern.
• So passt du sowohl die Breite als auch die Höhe einer Ebene an: Bewege den Mauszeiger über eine beliebige Ecke der Ebenenbegrenzung bis angezeigt wird. Klicke und ziehe, um die Größe zu ändern.
• Passe sowohl die Felder W als auch H in der rechten Seitenleiste an.

Proportionen einschränken

Mit der Schaltfläche kannst du die Abmessungen der Ebene auf die aktuellen Proportionen beschränken. Du findest diese Einstellung neben den Dimensionseinstellungen (W und H) in der rechten Seitenleiste.

Wenn diese Einstellung aktiviert ist, behält Figma das ursprüngliche Verhältnis von Breite zu Höhe bei, wenn du die Größe der Ebene in der Seitenleiste änderst. Aktualisierst du eines der Felder W und H, aktualisiert Figma das andere Feld entsprechend.

Drehung

Drehe einzelne Ebenen, wie Objekte, Rahmen und Gruppen, oder eine Ebenenauswahl. Figma verwendet den horizontale und vertikale Mitte deiner Auswahl als Drehpunkt.

Jede Ebene, die du der Arbeitsfläche hinzufügst, hat eine Standarddrehung von 0°. Du kannst deine Auswahl 180° in jede Richtung drehen:

• Ein positiver Winkel bewegt sich gegen den Uhrzeigersinn in Richtung 180°
• Ein negativer Winkel bewegt sich im Uhrzeigersinn in Richtung -180°

Sobald du in einer der beiden Richtungen 180 erreicht hast, zählt Figma in diese Richtung bis 0° herunter. Beispiel: Wenn du 15° über 180° hinausgehst, erhältst du einen Winkel von -165°.

Rechte Seitenleiste

Suche das Feld Rotation oben im Tab Design in der rechten Seitenleiste.

1. Wähle die Ebenen oder Objekte aus, die du drehen möchtest.
2. Verwende in der rechten Seitenleiste , um die gewünschte Drehung einzugeben.

Arbeitsfläche

1. Bewege den Mauszeiger knapp außerhalb einer der Ebenengrenzen, bis das Symbol angezeigt wird.
2. Klicke und ziehe, um die Auswahl zu drehen:
   • Ziehe im Uhrzeigersinn, um einen negativen Winkel (in Richtung -180°) zu erstellen.
   • Ziehe gegen den Uhrzeigersinn, um einen positiven Winkel (in Richtung 180°) zu erstellen.
3. Halte die Umschalttaste gedrückt, um die Rotationswerte in 15er-Schritten zu erfassen.

Ebenen spiegeln

Eine weitere Möglichkeit zum Replizieren rotierender Ebenen besteht in der Verwendung der Transformationen Horizontal spiegeln und Vertikal spiegeln.

Verwende das Rechtsklickmenü, um eine gespiegelte Transformation anzuwenden. Alternativ verwendest du die Tastaturkürzel:

• Horizontal spiegeln: ⇧ Shift H
• Vertikal spiegeln: ⇧ Shift V

Jede Form, jedes Textobjekt und jedes Bild, das du der Arbeitsfläche hinzufügst, hat eine eigene Ebene in der Arbeitsfläche. Auf diese Weise kannst du beim Erstellen zusammenhängender und komplexer Designs jede Ebene einzeln anpassen.

Du kannst die Position der Ebenen in der Arbeitsfläche entlang einer der drei Dimensionen oder Achsen anpassen: horizontal (X-Achse), vertikal (Y-Achse) und Tiefe (Z-Achse).

Anders als bei der X- und Y-Achse gibt es für die Z-Achse kein spezielles Feld, das du anpassen kannst. Stattdessen passt du die Tiefe (Z-Achse) oder Hierarchie einer Ebene an, indem du die Reihenfolge im Ebenen-Tab änderst.

Auf diese Weise kannst du Ebenen in den Vordergrund oder Hintergrund der Arbeitsfläche verschieben sowie Ebenen in Gruppen oder Rahmen hinein oder aus diesen heraus verschieben. Mehr zu Beziehungen zwischen Ebenen →

Das Ebenen-Tab in der linken Seitenleiste zeigt dir jede Ebene auf der aktuellen Seite und spiegelt die Reihenfolge wider, in der deine Ebenen derzeit gestapelt sind: Die oberste Ebene ist vorne und die unterste Ebene hinten.

Reihenfolge der Ebenen ändern

Es gibt verschiedene Möglichkeiten, die Reihenfolge einer Ebene anzupassen.

• 1

  Ebenen-Tab

  Passe die Reihenfolge der Ebene an, indem du die Position der Ebene im Ebenen-Tab änderst.

  1. Öffne den Ebenen-Tab in der linken Seitenleiste.
  2. Klicke und ziehe die Ebene, um ihre Position in der Ebenenhierarchie zu ändern:
     • Verschiebe die Ebene nach oben, um die Ebene in den Vordergrund zu verschieben
     • Verschiebe die Ebene nach unten, um die Ebene in den Hintergrund zu verschieben
  3. Loslassen, um anzuwenden.

  Hinweis: Innerhalb eines Auto-Layout-Rahmens funktioniert die Ebenenreihenfolge in umgekehrter Weise. Das liegt daran, dass das Auto-Layout nicht für sich überlappende Ebenen ausgelegt ist.

  Wenn du die Reihenfolge der Ebenen in einem Auto-Layout-Rahmen änderst, ändert dies die Position und Reihenfolge der Ebenen innerhalb des Rahmens. Außerhalb eines Auto-Layout-Rahmens wirkt sich das Ändern der Ebenenreihenfolge nicht auf die Position einer Ebene auf der X- oder Y-Achse aus.

  Mehr zur Verwendung von Auto-Layout →

• 2

  Tastenkombinationen

  Eine Ebene nach vorn:

  • Mac: ⌘ Command ]
  • Windows: Ctrl ]

  In den Vordergrund:

  • Mac: ⌘ Command ⌥ Option ]
  • Windows: Strg Umschalt ]

  Eine Ebene nach hinten:

  • Mac: ⌘ Command [
  • Windows: Strg [

  In den Hintergrund:

  • Mac: ⌘ Command ⌥ Option [
  • Windows: Strg Umschalt [
• 3

  Rechtsklick-Menü

  1. Wähle die Ebene(n) in der Arbeitsfläche aus.
  2. Klicke mit der rechten Maustaste auf die Auswahl, um das Kontextmenü zu öffnen:
  3. Wähle aus Folgendem:
     
     • Eine Ebene nach vorn
     • In den Vordergrund
     • Eine Ebene nach hinten
     • In den Hintergrund

Werte anpassen

Gleichungen

Einige Felder in Figma akzeptieren Gleichungen. Dazu gehören die Felder „Position“, „Abmessung“ und „Rotation“.

Du kannst Gleichungen verwenden, um die Größe von Ebenen zu ändern, indem du den vorhandenen Wert addierst +, subrahiert -, multiplizierst * oder dividierst /. Du kannst auch Klammern ( ) innerhalb des Felds für komplexere Gleichungen oder ^ zum Erstellen von Exponenten verwenden.

Wir haben unten einige Beispiele hinzugefügt, aber du kannst beliebige Zahlen verwenden:

• + 10, um 10 zum aktuellen Wert zu addieren
• - 20, um 20 vom aktuellen Wert abzuziehen
• *2 um den aktuellen Wert mit 2 zu multiplizieren
• /4, um den aktuellen Wert durch 4 zu dividieren
• ^2, um einen Exponenten des aktuellen Wertes hoch 2 zu erstellen
• (𝑥/2)+6, um den aktuellen Wert durch zwei zu teilen und 6 zu addieren (𝑥=aktueller Wert)
• Mixed+100, um 100 zu zwei oder mehr ausgewählten Objekten mit unterschiedlichen Werten zu addieren

Gleichungen können auch auf eine gemischte Auswahl von Werten angewendet werden. Wird eine Gleichung in die Felder Position, Abmessung oder Rotation eingegeben, wird die Änderung auf alle ausgewählten Ebenen angewendet. 

Felder bereinigen

Zusätzlich zur manuellen Eingabe von Werten kannst du Felder auch „bereinigen“. Mit Scrubbing kannst du den Wert eines Feldes schnell anpassen, indem du die aktive Maus oder das Touchpad ziehst.

Du kannst dies für die Felder Position, Abmessung und Rotation sowie für andere Eigenschaften und Einstellungen von Ebenen in der rechten Seitenleiste verwenden

1. Wähle die Ebene oder das Objekt auf der Arbeitsfläche aus.

2. Bewege den Mauszeiger über die Beschriftung neben dem Eingabefeld, bis der Scrubbing-Cursor erscheint. Du kannst den Mauszeiger auch über das Eingabefeld selbst bewegen und die Zusatztaste gedrückt halten:

   • Mac: ⌥ Wahltaste
   • Windows: Alt

3. Klicke auf das Symbol und ziehe, um den Eingabewert zu ändern. Ziehe den Cursor nach links, um den Wert zu verringern, oder nach rechts, um ihn zu erhöhen.

4. Ändere die Geschwindigkeit, mit der du das Feld anpassen kannst, indem du den Cursor zum oberen Rand des Bildschirms bewegst, um die Scrubbing-Geschwindigkeit zu erhöhen, oder zum unteren Rand des Bildschirms, um sie zu verringern.

   Am unteren Rand des Bildschirms wird eine Meldung über die aktuelle Geschwindigkeit und die unterschiedliche Breite des Cursors angezeigt. Es gibt vier Scrubbing-Geschwindigkeiten: 2x, 1x, 1/2und 1/4.