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.
  1. 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
  2. Klicke auf den Pfeil, um den Bereich zu erweitern und eine Voreinstellung auszuwählen.

Anhand des Symbols  kannst du Rahmen im Ebenen-Tab identifizieren.

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.

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.

1. Wähle den Rahmen auf der Arbeitsfläche oder im Ebenen-Tab in der linken Seitenleiste aus.
2. 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.

Rahmenvoreinstellung ändern

Wähle eine andere Rahmenvoreinstellung aus, um die Größe des Rahmens zu ändern.

1. Wähle den Rahmen aus.
2. Wähle in der rechten Seitenleiste im Eigenschaften-Bedienfeld das Rahmenfeld aus.
3. Wähle in der Liste eine Voreinstellung aus.
4. 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
5. Figma aktualisiert die Rahmenabmessungen den Voreinstellungen entsprechend.

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.

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 .