Designen, Prototypen erstellen und Ebeneneigenschaften erkunden in der rechten Seitenleiste

In Figma Design wird dir auf beiden Seiten der Arbeitsfläche jeweils eine Seitenleiste angezeigt. Diese Seitenleisten sowie die Toolbar machen die Figma-Benutzeroberfläche aus.

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:

Verwendung der rechten Seitenleiste mit Schreibzugriff

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

Wählst du eine Ebene aus, stehen dir viele verschiedene Einstellungen zum Anpassen der Ebene zur Verfügung. Die verfügbaren Einstellungen variieren je nach ausgewählter Ebene.

• Ausrichtung und Verteilung
• Rahmengröße und -ausrichtung
• Position (X und Y)
• Abmessungen und Drehung (Breite und Höhe)
• Eckradius
• Einschränkungen
• Layoutraster
• Komponenteneigenschaften
• Instanz
• Auto-Layout
• Ebene (Mischmodi)
• Text
• Füllung
• Konturen
• Effekte
• Exporteinstellungen

Prototyp

Im Prototyp-Tab kannst du Prototypen erstellen.

Wähle zuerst ein beliebiges Objekt aus und führe dann im Prototyp-Tab folgende Schritte aus:

1. Hinzufügen eines Flow-Startpunkts
   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.
2. Hinzufügen einer Interaktion
   In der Ansicht Interaction Details (Interaktionsdetails) kannst du den Auslöser, die Aktion sowie Animationen für die Interaktion festlegen.
3. Definieren des Scrollverhaltens
   Lege fest, wie das Scrollen im Prototypen funktioniert.
4. Anzeigen der Prototypen-Einstellungen
   Hier kannst du das Gerät und den Hintergrund für deinen Prototypen einstellen.

Erfahre mehr zum Erstellen von Prototypen in Figma →

Prüfen

Dev Mode ist ein Bereich in Figma speziell für Entwickler*innen. Dev Mode zeigt Informationen zum Design und zu den Komponenten an, die erforderlich sind, um das Design zu verstehen und in Code umzuwandeln.

Dev Mode wird verwendet, um:

• Eigenschaften, Werte und Code aus Designkomponenten anzuzeigen und zu kopieren
• durch den Vergleich von Rahmen-Versionen zu sehen, was sich seit deinem letzten Zugriff auf die Datei verändert hat
• Design-Dateien mit einfachen Interaktionen, die wichtige Ebenen-Informationen anzeigen, zu prüfen und darin zu navigieren
• entwicklungsfertige Designs mit dem Status der Bereiche schnell zu finden
• deinen Workflow mit auf Entwicklung ausgerichteten Integrationen wie Jira, Storybook und GitHub zu optimieren
• Relevante Links und Ressourcen zum Entwickeln zu Komponenten hinzuzufügen

Dev Mode wird über eine Schaltfläche zum Umschalten in der Toolbar aktiviert. Im aktivierten Zustand enthalten die Benutzeroberfläche sowie die recht Seitenleiste entwicklungsspezifische Funktionen.

Erfahre mehr zur Verwendung von Dev Mode ->

Verwendung der rechten Seitenleiste mit Lesezugriff

Betrachter*innen und Betrachter*innen mit eingeschränktem Zugriff können mit anderen an Designs zusammenarbeiten, Designeigenschaften einsehen, grundlegenden Code kopieren und Assets exportieren.

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.

Kommentieren

Über die Funktion Comment (Kommentieren) in der rechten Seitenleiste kannst du bestehende Kommentare anzeigen oder neue hinzufügen. Mithilfe von Kommentaren kannst du auf Feedback reagieren, mit anderen zusammenarbeiten und schneller Iterationen vornehmen – alles direkt aus der Designdatei heraus.

Im Tab Comment (Kommentieren) werden dir alle bestehenden Kommentare innerhalb einer Datei angezeigt. 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.

In den Einstellungen kannst du Symbole ausblenden oder die Benachrichtigungseinstellungen zu Kommentaren in einer Datei anpassen.

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

Eigenschaften

Im Tab Properties (Eigenschaften) der rechten Seitenleiste kannst du bestimmte Ebenen auf der Arbeitsfläche überprüfen.

Wähle zuerst eine Ebene auf der Arbeitsfläche aus, indem du das Element entweder direkt auf der Arbeitsfläche selbst oder über den Ebenen-Tab in der linken Seitenleiste auswählst. Du kannst jede Art von Ebene auswählen, z. B. Formen, Text, Gruppen oder Rahmen.

Unter Properties (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.  Mehr erfahren zum Hinzufügen von Abmessungsvorgaben →

Export

Mit Lesezugriff kannst du Designs in vielen verschiedenen Dateiformaten und Skalierungen aus Figma exportieren. Der Export hilft dir dabei, Inhalte mit anderen zu teilen, Inhalte zwischen verschiedenen Tools zu bewegen und Kopien deiner Designs außerhalb von Figma zu speichern.

Mehr erfahren zu Exporten aus Figma →