Designen, Prototypen erstellen und Ebeneneigenschaften erkunden in der rechten Seitenleiste – Figma Learn - Hilfe-Center

Dieser Artikel ist für die bisherige und die neue Figma Benutzeroberfläche verfügbar. Über den Schiebeschalter unten links auf der Seite kannst du auf die gewünschte Benutzeroberfläche umschalten. Lerne UI3 kennen: Figma, neu gestaltet →

Vor dem Start

Wer kann diese Funktion verwenden?

Verfügbar in allen Abos

Erfordert Schreibzugriff auf eine Datei, um die Ebenen und den Prototyp über den Eigenschaften-Tab anzupassen

Erfordert Lesezugriff auf eine Datei, um Kommentare hinzuzufügen, Datei- und Ebeneneigenschaften zu erkunden und Ebenen über den Eigenschaften-Tab zu exportieren

In Figma Design besteht eine Datei aus drei Hauptelementen der Benutzeroberfläche, die von der Arbeitsfläche getrennt sind:

Der Navigations-Tab auf der linken Seite des Bildschirms
Die Symbolleiste unten am Bildschirm
Der Eigenschaften-Tab auf der rechten Seite des Bildschirms

In diesem Artikel werden wir uns mit dem Eigenschaften-Tab befassen.

So ändert sich der Eigenschaften-Tab je nach Zugriff auf eine Datei

Der Eigenschaften-Tab verfügt je nach deinen Zugriffsrechten auf eine Datei und deinem Lizenztyp über unterschiedliche Funktionen.

Bearbeitungszugriff: Designeigenschaften von Ebenen bearbeiten und Prototypflüsse und Interaktionen hinzufügen
Lesezugriff: Anzeigen und Durchsuchen von Kommentaren, Überprüfen von Ebenen-Eigenschaften und Codeausgabe sowie Exportieren

Verwende den Eigenschaften-Tab mit Bearbeitungszugriff

Wenn du Bearbeitungszugriff auf eine Datei hast, stehen im Eigenschaften-Tab zwei Registerkarten zur Verfügung: Design und Prototyp.

Tipp: Du kannst dem Eigenschaften-Panel Beschriftungen hinzufügen, um klarer zu machen, was jede Eigenschaft bewirkt. Um Beschriftungen zu aktivieren, klicke im Eigenschaften-Bedienfeld auf das Dropdown-Menü neben dem 100 %-Zoom und wähle Eigenschaftsbeschriftungen aus.

Design

Im Design -Tab kannst du Eigenschaften von Objekten deines Designs ansehen, hinzufügen, entfernen oder ändern.

Wird auf der Arbeitsfläche nichts ausgewählt, kannst du im Design -Tab folgende Funktionen ausführen:

Auf dateispezifische Stile und Variablen zugreifen
Die Hintergrundfarbe der Arbeitsfläche anpassen
Die gesamte Seite exportieren

Wenn du eine Ebene auswählst, kannst du auf viele verschiedene Eigenschaften-Steuerelemente zum Bearbeiten der Ebene zugreifen. Zum Beispiel:

Prototyp

Im Prototypen -Tab kannst du Prototypen erstellen. Wähle zuerst ein beliebiges Objekt aus und führe dann folgende Schritte aus:

Flow-Startpunkts hinzufügen: Ein Flow ist ein Pfad, dem Nutzer*innen durch das Netzwerk der verbundenen Rahmen, aus denen dein Protoyp besteht, folgen. Indem du einen Startpunkt hinzufügst, wählst du den ersten Rahmen dieses Pfades aus.
Interaktion hinzufügen: In der Ansicht Interaktionsdetails kannst du den Auslöser, die Aktion sowie Animationen für die Interaktion festlegen.
Scrollverhalten festlegen: Lege fest, wie der Prototyp auf Scrollen reagiert.
Prototypen-Einstellungen anzeigen: Hier kannst du das Gerät und den Hintergrund für deinen Prototypen einstellen.

Tipp: Du kannst Interaktionen auch direkt auf der Arbeitsfläche hinzufügen, indem du den Tab Prototyp auswählst und dann mit gedrückter Maustaste Verbindungen zwischen Objekten ziehst.

Mehr über das Prototyping in Figma erfahren →

Verwende den Eigenschaften-Tab mit Lesezugriff

Personen mit Lesezugriff auf eine Datei oder Personen mit einer View-Lizenz in einem kostenpflichtigen Abo haben zwei Registerkarten im Eigenschaften-Panel: Kommentieren und Eigenschaften.

Der Lesezugriff als Betrachter*in eignet sich für Nutzer*innen, die keine Änderungen an Designs vornehmen müssen, oder für Entwickler*innen, die Zugriff auf Designs, aber nicht den vollständigen Funktionsumfang von Dev Mode benötigen. Personen mit diesem Zugriff auf eine Datei können an Designs zusammenarbeiten, Designeigenschaften anzeigen, grundlegenden Code kopieren und Assets exportieren.

Kommentieren

Wähle in der rechten Seitenleiste Kommentieren aus, um neue Kommentare hinzuzufügen oder vorhandene Kommentare anzuzeigen. Mithilfe von Kommentieren Kkannst du Feedback hinzufügen oder darauf reagieren, zusammenarbeiten und schneller iterieren – alles direkt aus der ursprünglichen Design-Datei.

Auf dem Tab Kommentieren kannst du alle vorhandenen Kommentare in einer Datei anzeigen. Alternativ kannst du innerhalb einer Datei nach einem bestimmten Kommentar oder einer Reihe von Kommentaren suchen:

Gib im Suchfeld ein Stichwort ein, um einen bestimmten Kommentar zu finden.
Mithilfe des Filters kannst du dir Kommentare nach Veröffentlichungsdatum sortieren oder nur ungelesene Kommentare anzeigen lassen. Hiermit kannst du filtern, welche bestimmte Reihe von Kommentaren angezeigt werden soll.

Erfahre mehr zum Hinzufügen von Kommentaren zu einer Figma Design-Datei oder zum Anzeigen und Verwalten von Kommentaren.

Eigenschaften

Im Tab Eigenschaften in der rechten Seitenleiste kannst du bestimmte Ebenen auf der Arbeitsfläche überprüfen und Designs exportieren.

Wähle zunächst eine Ebene auf der Arbeitsfläche aus. Dazu kannst du das Element entweder auf der Arbeitsfläche selbst oder im Ebenen-Tab in der linken Seitenleiste auswählen. Du kannst jede Art von Ebene auswählen, z. B. eine Form, einen Text, eine Gruppe oder einen Rahmen.

Unter Eigenschaften wird dir der Name der ausgewählten Ebene und Informationen zu dieser, wie Layout und Farben, angezeigt.

Per Rechtsklick auf die Ebene auf der Arbeitsfläche kannst du:

die Ebene kopieren
sie als Code (CSS, iOS oder Android), SVG oder PNG kopieren/einfügen oder den Link oder seine Eigenschaften kopieren
eine weitere Ebene innerhalb der von dir ausgewählten Ebene auswählen

Du möchtest den Abstand zwischen verschiedenen Objekten messen? Mithilfe von Tastaturkürzeln kannst du ganz einfach Details zum Abstand zwischen Elementen und Objekten einsehen. Erfahre, wie du Messrichtlinien hinzufügst →

Unten auf der Registerkarte Eigenschaften kannst du eine Exportkonfiguration hinzufügen, um Designs in einer Vielzahl von Dateiformaten und -größen zu exportieren. Durch das Exportieren kannst du Inhalte mit anderen teilen, Inhalte zwischen Tools verschieben und Kopien deiner Designs außerhalb von Figma speichern. Mehr zu Exporten aus Figma erfahren →

Vor dem Start

Wer kann diese Funktion verwenden?

Nutzer*innen jedes Teams oder Preismodells

Nutzer*innen mit Schreibzugriff auf eine Datei können über die rechte Seitenleiste Ebenen anordnen und Prototypen erstellen

Nutzer*innen mit Lesezugriff auf eine Datei können über die rechte Seitenleiste Kommentare hinzufügen, Datei- und Ebeneneigenschaften erkunden sowie Ebenen exportieren

Wenn du dich im Figma Design-Modus befindest, siehst du auf jeder Seite der Arbeitsfläche eine Seitenleiste. Zusammen mit der Toolbar bilden diese Seitenleisten die Figma-Benutzeroberfläche.

In der Figma-Benutzeroberfläche kannst du deine Designdatei öffnen, eine solche erstellen und einzelne Elemente deines Designs anpassen.

In der linken Seitenleiste hast du Zugriff auf die Ebenen, Assets und Seiten deiner Datei. Wir nennen diese Seitenleiste daher Ebenen-Tab. Erfahre mehr zum Ebenen-Tab.
In der rechten Seitenleiste kannst du Eigenschaften deines Designs einsehen oder anpassen und Prototypen für die Einstellungen deines Designs erstellen.

In diesem Artikel werden wir uns die rechte Seitenleiste genauer ansehen.

Auf was du in der rechten Seitenleiste Zugriff hast, hängt von deinen Berechtigungen für die Datei und deinem Lizenztyp ab:

Rechts

Lesezugriff

Kommentare ansehen und durchsuchen
Ebeneneigenschaften und Code-Output ansehen
Exporteinstellungen anwenden

Rechts

Bearbeitungszugriff

Designeigenschaften von Ebenen hinzufügen und anpassen
Prototyp-Interaktionen, -Flows und -Einstellungen hinzufügen

Verwendung der rechten Seitenleiste mit Schreibzugriff

Die rechte Seitenleiste einer Figma-Datei. Es gibt einen Design-Tab und einen Prototyp-Tab. Der Umschalter für den Dev Mode befindet sich über der Seitenleiste in der oberen Symbolleiste.