Rahmen (Frames) in Figma
Bevor du anfängst
Wer kann diese Funktion verwenden
Nutzer*innen in jedem Team oder Abo können Rahmen verwenden.
Nutzer*innen mit Schreibzugriff auf eine Datei können Rahmen erstellen und bearbeiten.
In Figma kannst du Ebenen direkt in der Arbeitsfläche hinzufügen. Wenn du das Layout für ein bestimmtes Gerät oder eine bestimmte Bildschirmgröße entwirfst, kannst du einen Container für deine Designs erstellen. Hier kommen Rahmen ins Spiel.
Wenn du bereits Designwerkzeuge verwendet hast, bist du vermutlich mit Zeichenflächen vertraut. Wie in Zeichenflächen kannst du mit Rahmen einen Bereich der Arbeitsfläche auswählen, in dem du deine Designs erstellst.
Im Gegensatz zu herkömmlichen Zeichenflächen kannst du Rahmen aber auch in andere Rahmen einbetten. So lassen sich komplexere Designs erstellen.
Mit Rahmen kannst du außerdem weitere Funktionen nutzen, wie Layoutraster, Auto-Layout, Einschränkungen und Prototypen.
Rahmen erstellen
Mit dem Rahmenwerkzeug kannst du in der Arbeitsfläche Rahmen erstellen. Es gibt mehrere Möglichkeiten, auf das Rahmenwerkzeug zuzugreifen:
- Drücke die Taste F oder A.
- Wähle in der Symbolleiste unter das Rahmenwerkzeug aus:
Anschließend kannst du in der Arbeitsfläche Rahmen in verschiedenen Größen erstellen:
- Klicke in die Arbeitsfläche, um einen Standardrahmen (100 x 100) zu erstellen.
- Klicke in die Arbeitsfläche und ziehe den Cursor, um einen Rahmen mit benutzerdefinierten Abmessungen zu erstellen.
- Wähle in der rechten Seitenleiste im Dropdown-Menü einen vordefinierten Rahmen aus.
- Dir stehen Voreinstellungen für eine Vielzahl von gängigen Geräten oder Medien zur Verfügung:
- Phone (Smartphone)
- Tablet
- Desktop
- Watch (Uhr)
- Paper (Papier)
- Social Media
- Figma Community
- Klicke auf den Pfeil, um den Bereich zu erweitern und eine Voreinstellung auszuwählen.
- Dir stehen Voreinstellungen für eine Vielzahl von gängigen Geräten oder Medien zur Verfügung:
Anhand des Symbols kannst du Rahmen im Ebenen-Tab identifizieren.
Tipp! Du kannst auch einen Rahmen um vorhandene Objekte auf einer oder mehreren Ebenen erstellen. Verwende dafür das Tastenkürzel für die Rahmenauswahl:
- macOS: ⌥ Option – ⌘ Command – G
- Windows: Strg + Alt + G
Rahmeneigenschaften
Du kannst bei Rahmen eine Reihe von Eigenschaften festlegen:
- Corner Radius (Eckradius): Runde die Ecken eines Rahmens ab, um weichere Kanten zu erzeugen.
- Clip Content (Inhalte abschneiden): Blende alle Objekte innerhalb des Rahmens aus, die über die Grenzen des Rahmens hinausgehen.
- Layout Grids (Layoutraster): Erstelle Raster, um das Design leichter visuell strukturieren zu können.
- Auto Layout : Erstelle dynamische Rahmen, die sich an den Inhalt anpassen.
- Fill (Füllung): Wende optional „Solid Fill“ (Einfarbige Füllung), „Gradient“ (Farbverlauf), oder Images(Bilder: PNG, JPEG, GIF, TIFF oder WEBP) auf einen Rahmen an.
- Stroke (Strich): Füge einem Rahmen Striche hinzu, um eine Grenze oder Kontur zu erstellen.
- Effects (Effekte): Füge einem Rahmen einen Schatten oder Unschärfen hinzu.
Zusatzfunktionen
Für Rahmen stehen dir in Figma die folgenden Zusatzfunktionen zur Verfügung:
- Layout Grids (Layoutraster): Wende transparente Raster, Spalten und/oder Zeilen auf Rahmen an, um eine visuelle Struktur zu erhalten.
- Constraints (Einschränkungen): Lege fest, wie sich untergeordnete Objekte verhalten, wenn du die Größe eines Rahmens änderst. Wende Einschränkungen auf Objekte in einem Rahmen an.
- Auto Layout: Wende Auto-Layout auf Rahmen an, um dynamische Layouts zu erstellen, die sich an den Inhalt anpassen.
- Prototyping: Erstelle interaktive Prototypen, die sich zwischen den Rahmen in der Arbeitsfläche bewegen.
Ein Rahmen ist ein übergeordnetes Objekt. Dies bedeutet, dass es beliebige untergeordnete Objekte steuern oder beeinflussen kann, die du darin platzierst.
Hier erfährst du mehr über über- und untergeordnete Objekte in Figma →
Eigenschaften des Rahmens anpassen
Bisher konntest du die Eigenschaften untergeordneter Objekte anpassen, wenn du den Rahmen ausgewählt hast. Jetzt kannst du die Eigenschaften des Rahmens an sich anpassen.
- Wähle ein untergeordnetes Objekt durch Drücken der Eingabetaste oder Enter.
- Drücke Tab, um das nächste gleichgeordnete Objekt auszuwählen.
- Drücke Umschalt + Tab, um das vorherige gleichgeordnete Objekt auszuwählen.
- Drücke Umschalt + Enter, um das übergeordnete Objekt auszuwählen.
Zum Anpassen der Füllung und des Strichstils eines Rahmens und der dem Rahmen untergeordneten Objekte kannst du Selection colors (Farbauswahl) verwenden, um Farben in einer gemischten Auswahl anzuzeigen oder zu ändern.
Rahmen in andere Rahmen einbetten
In Figma kannst du Rahmen innerhalb anderer Rahmen erstellen. Dies wird als „Einbetten“ bezeichnet. Dies ermöglicht es dir, Rahmen mit unterschiedlichen Eigenschaften zu kombinieren, um komplexe Benutzeroberflächen zu erstellen.
Dadurch entstehen neue Hierarchien oder Beziehungen:
- Top-level Frames (Rahmen der obersten Ebene): Rahmen, die direkt in der Arbeitsfläche platziert sind. Damit ein Rahmen auf der obersten Ebene platziert werden kann, darf er nicht in andere Rahmen, Gruppen oder Objekte eingebettet sein.
- Nested frame (Eingebetteter Rahmen): Rahmen, die in einem anderen Rahmen platziert wurden. Du kannst Rahmen in Rahmen der obersten Ebene oder in anderen eingebetteten Rahmen platzieren. Eingebettete Rahmen sind sowohl über- als auch untergeordnete Objekte.
- Children (Untergeordnete Objekte): Objekte, die sich innerhalb eines Rahmens befinden.
Hier erfährst du mehr über über-, unter- und gleichgeordnete Objekte.
Rahmen der obersten Ebene
Rahmen der obersten Ebene sind in Figma im Ebenen-Tab fett markiert. Ihre Namen werden in der Arbeitsfläche angezeigt:
Eingebettete Rahmen
Als eingebettete Rahmen werden Rahmen bezeichnet, die du innerhalb eines anderen Rahmens oder Objekts platziert hast. Sie sind dadurch sowohl über- als auch untergeordnete Objekte. Rahmen können platziert werden in:
- Rahmen der obersten Ebene
- anderen eingebetteten Rahmen
- Gruppen
Im folgenden Beispiel befindet sich jedes Element in einem eigenen Rahmen. Oben wurde eine Statusleiste und unten ein Navigationsmenü eingefügt. Auf einer Karte sind zudem die Details der nächsten Tickets angegeben.
Mit unseren Gerätevoreinstellungen können wir einen Rahmen der obersten Ebene für diese Elemente erstellen. Um einen einzigen Bildschirm für die mobile App zu erstellen, können die Elemente dem Rahmen der obersten Ebene hinzugefügt werden.
Rahmengröße ändern
Du kannst mit Rahmen wie mit jedem anderen Objekt in der Arbeitsfläche interagieren und beispielsweise die Größe oder den Maßstab ändern. Es gibt mehrere Möglichkeiten, um die Rahmengröße zu ändern:
Rahmen ziehen
Ziehe den Rahmen mit dem Cursor, um die Größe manuell zu ändern.
- Wähle den Rahmen auf der Arbeitsfläche oder im Ebenen-Tab in der linken Seitenleiste aus.
- Klicke in einer der Ecken auf den Ziehpunkt und verschiebe ihn, um die Größe zu ändern. Du kannst auch auf die Ränder klicken und diese ziehen.
Tipp! Um Einschränkungen für untergeordnete Objekte zu ignorieren, halte die Zusatztaste gedrückt:
- macOS: ⌘ Command
- Windows: Strg
Rahmenvoreinstellung ändern
Wähle eine andere Rahmenvoreinstellung aus, um die Größe des Rahmens zu ändern.
- Wähle den Rahmen aus.
- Wähle in der rechten Seitenleiste im Eigenschaften-Bedienfeld das Rahmenfeld aus.
- Wähle in der Liste eine Voreinstellung aus.
- Wähle Voreinstellungen für ein gängiges Gerät oder Medium aus:
- Phone (Smartphone)
- Tablet
- Desktop
- Watch (Uhr)
- Paper (Papier)
- Social Media
- Figma Community
- Figma aktualisiert die Rahmenabmessungen den Voreinstellungen entsprechend.
Hinweis: Wenn du auf untergeordnete Objekte Einschränkungen angewendet hast, wird die Größe der Objekte in Figma an die neue Rahmenvorgabe angepasst. Andernfalls behalten die Objekte im Rahmen die ursprünglichen Abmessungen und Positionen bei.
Eigenschaften-Bedienfeld
Aktualisiere in der rechten Seitenleiste im Eigenschaften-Bedienfeld die Felder für Width (Breite) und Height (Höhe).
Gib in den Feldern W (für Breite) und H (für Höhe) neue Werte ein oder hover mit dem Mauszeiger über dem Symbol, um den Wert durch ziehen zu verändern. Ziehe den Cursor nach links, um den Wert zu verringern, und nach rechts, um ihn zu erhöhen.
Klicke auf den Link neben dem W (für Breite) und dem H (für Höhe), um die Größenänderung der aktuellen Proportionen einzuschränken.
Tipp! Du kannst mithilfe der Felder für die Abmessungen Berechnungen durchführen. Auf diese Weise lassen sich Objekte schnell skalieren oder in der Größe ändern.
- % Prozentsatz, z. B. 50 %
- + Hinzufügen, z. B. +100
- – Subtrahieren, z. B. –20
- * Multiplizieren, z. B. *4
- / Dividieren, z. B. /8
Es ist nicht möglich, die Breite oder Höhe mit einem Prozentsatz zu multiplizieren. Die Eingabe *50 % würde beispielsweise das 50-fache des ursprünglichen Werts ergeben, nicht 50 %.
Größe anpassen
Du kannst festlegen, dass der Rahmen an die untergeordneten Objekte angepasst wird. Dadurch wird der Rahmen um die äußersten Grenzen der darin befindlichen Objekte neu gezeichnet.
- Verwende dazu das Tastenkürzel:
- macOS: ⌥ Option Umschalt ⌘ Command R
- Windows: Alt Shift Strg R
- Klicke rechts oben im Eigenschaften-Bedienfeld auf das Symbol .
Es stehen sechs Formwerkzeuge zur Auswahl:
