Related Videos

• 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.
    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.

  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.

  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.

  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.

  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.

  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 .
• Formwerkzeuge verwenden

  Formen machen den Großteil der Ebenen eines Designs aus.

  Du kannst über das Menü „Shape Tools“ (Formwerkzeuge) in der Symbolleiste auf alle grundlegenden Formen zugreifen. Klicke auf den Abwärtspfeil neben dem Rechteck, um die Optionen anzuzeigen.

  Es stehen sechs Formwerkzeuge zur Auswahl:

  1. Rectangle (Rechteck)
  2. Line (Linie)
  3. Arrow (Pfeil)
  4. Ellipse
  5. Polygon
  6. Star (Stern)
  7. Häufig gestellte Fragen

  Für Designs, die einzigartige oder komplexe Formen erfordern, kannst du mit dem einzigartigen Stiftwerkzeug von Figma dein eigenes Vektornetzwerk erstellen.

  

  Tipps zum Erstellen von Formen

  • Halte beim Ziehen die Umschalttaste gedrückt, um ordentliche Quadrate, Kreise und Polygone zu erstellen.
  • Halte die Taste Option gedrückt, um die Form von ihrer Mitte aus zu erstellen und ihre Größe zu ändern.
  • Halte die Umschalttaste und Option gedrückt, um beides zu tun.

  Rechteckwerkzeug

  Du kannst mit dem Rechteckwerkzeug Rechtecke und Quadrate erstellen.

  1. Wähle in den Formwerkzeugen Rectangle (Rechteck) aus oder drücke die Taste R
  2. Klicke auf eine Stelle in der Arbeitsfläche und ziehe den Cursor, um das Rechteck zu erstellen:

     

  3. Die Abmessungen des Rechtecks werden am unteren Rand blau angezeigt:
  4. In jeder Ecke der Form befindet sich ein Ziehpunkt, mit dem du die Größe der Form anpassen kannst.

  Linienwerkzeug

  Mit dem Linienwerkzeug kannst du Linien in jede Richtung erzeugen. Linien sind eine effektive Möglichkeit, um Inhalte innerhalb eines Designs aufzuteilen oder CSS-Ränder zu simulieren.

  1. Wähle in den Formwerkzeugen Line (Linie) aus oder drücke die Taste L:

     

  2. Klicke auf eine Stelle in der Arbeitsfläche und ziehe den Cursor, um die Linie zu erstellen:

     

  3. Nachdem eine Linie erstellt hast, kannst du im Eigenschaften-Bedienfeld im Abschnitt Stroke (Strich) das Aussehen der Linie ändern:

     

     1. Passe in der Farbauswahl die Optionen Color (Farbe) und Opacity (Deckkraft) an.
     2. Mit der Option Weight (Stärke) kannst du die Dicke der Linie ändern. Mit Align (Ausrichten) legst du die Ausrichtung der Strichstärke fest. Zur Auswahl stehen Inner (Innen), Outer (Außen) oder Center (Mitte).
     3. Mit den Optionen Advanced Stroke (Erweiterter Strich) kannst du die Linie weiter anpassen. Definiere beispielsweise mit der Option Cap (Abschluss) das Aussehen des Linienendes und mit Join (Verbinden), wie sich die Linie verhält, wenn sie mit anderen Linien verbunden wird. Mit Dashes (Striche) erzeugst du gestrichelte Linien.

  Pfeilwerkzeug

  Mit dem Pfeilwerkzeug kannst du sowohl einseitige als auch zweiseitige Pfeile zeichnen.

  1. Wähle in den Formwerkzeugen Arrow (Pfeil) aus oder drücke die Tastenkombination ⇧ + L:

     

  2. Klicke auf eine Stelle in der Arbeitsfläche und ziehe den Cursor, um den Pfeil zu erstellen. Du kannst den Cursor in der Arbeitsfläche bewegen, um die Richtung zu ändern.
  3. Wie beim Linienwerkzeug (oben) kannst du auch hier mit Stroke (Strich) den Stil der Konturen anpassen.

  Einzelnen Abschluss hinzufügen oder ändern

  1. Doppelklicke auf die Linie, um den Vektorbearbeitungsmodus zu aktivieren.
  2. Wähle den Punkt aus, an dem der Abschluss hinzugefügt werden soll. Wichtig ist, dass du das Verschiebewerkzeug V verwendest.
  3. Du kannst mehrere Punkte in einer Form auswählen, indem du auf die Form klickst und den Cursor ziehst oder die folgenden Tasten drückst:
     • Windows: Alt
     • macOS: Umschalt
  4. Öffne das Menü Advanced Stroke (Erweiterter Strich), indem du im Bereich Stroke (Strich) auf die drei Punkte klickst:
  5. Wähle in der Dropdown-Liste Cap (Abschluss) den gewünschten Abschluss aus: 

  Ellipsenwerkzeug

  Mit dem Ellipsenwerkzeug kannst du Ovale und Kreise zeichnen. Du hast die Möglichkeit, diese in der ursprünglichen Form zu verwenden oder durch Einfügen von Kurven anzupassen.

  1. Wähle in den Formwerkzeugen Ellipse aus oder drücke die Taste O:

     

  2. Klicke auf eine Stelle in der Arbeitsfläche und ziehe den Cursor, um die Ellipse zu erstellen. Die Abmessungen der Form werden unter dem Objekt blau angezeigt:

     

  3. Um die Ellipse wird ein blauer Begrenzungsrahmen mit einem Ziehpunkt in jeder Ecke angezeigt. Damit kannst du die Größe der Form nach deinen Wünschen anpassen.

  Polygonwerkzeug

  Mit dem Polygonwerkzeug kannst du eine geschlossene Form mit einer beliebigen Anzahl gerader Linien zeichnen.

  Standardmäßig wird mit dem Polygonwerkzeug ein Dreieck eingefügt. Du kannst dem Objekt jedoch zusätzliche Punkte hinzufügen, um benutzerdefinierte Polygone zu erstellen.

  1. Wähle in den Formwerkzeugen Polygon aus:

     

  2. Klicke auf eine Stelle in der Arbeitsfläche und ziehe den Cursor, um das Polygon zu erstellen. Die Abmessungen der Form werden unter dem Objekt blau angezeigt.
  3. Um die Form wird ein blauer Begrenzungsrahmen mit einem Ziehpunkt in jeder Ecke angezeigt. Damit kannst du die Größe der Form nach deinen Wünschen anpassen.
  4. Doppelklicke auf das Polygon, um den Vektorbearbeitungsmodus zu aktivieren. Jetzt kannst du dem Polygon weitere Punkte hinzufügen und jeden Punkt einzeln bearbeiten:
     

     

  5. Wie bei Rechtecken kannst du auch bei Polygonen die Ecken abrunden:
     1. Hover mit dem Mauszeiger über dem Ziehpunkt in der Ecke, bis ein Kreis angezeigt wird: 
     2. Klicke auf den Ziehpunkt, und ziehe ihn in Richtung der Mitte des Objekts, um die Ecken abzurunden.

  Polygone und Begrenzungsrahmen

  Du hast vielleicht bemerkt, dass unterhalb des Polygons (in diesem Fall ein Dreieck) ein gewisser Abstand zum blauen Begrenzungsrahmen ist.

  Der Begrenzungsrahmen behält dadurch eine konsistente Form oder Größe bei, wenn dem Polygon weitere Punkte hinzugefügt werden.
  
  Um den Begrenzungsrahmen an die tatsächliche Größe der Form anzupassen, wähle die Option Flatten (Reduzieren). Klicke zum Aufrufen der Option mit der rechten Maustaste auf die Form und wählen Flatten (Reduzieren). Oder verwende die folgende Tastenkombination:

  • Mac:   Command-E
  • Windows:   Strg + E

  Sternwerkzeug

  Das Sternwerkzeug erzeugt Polygone, die in einer Sternform angeordnet sind. Standardmäßig wird mit dem Sternwerkzeug ein Stern mit 5 Zacken und 10 Seiten erstellt.

  1. Wähle in den Formwerkzeugen Star (Stern) aus:

     

  2. Klicke auf eine Stelle in der Arbeitsfläche und ziehe den Cursor, um den Stern zu erstellen:

     

  3. Es gibt jetzt drei Ziehpunkte, mit denen du den Stern ändern kannst:
     • Mit Count (Anzahl) legst du die Anzahl der Zacken des Sterns fest (mindestens 3, maximal 60): 
     • Mit Ratio (Seitenverhältnis) legst du den Abstand der inneren Punkte des Sterns zur Mitte fest. Dies wird als Prozentsatz des Gesamtdurchmessers des Sterns angezeigt.
     • Mit Radius kannst du die Zacken ähnlich wie mit Corner Radius (Eckradius) bei Rechtecken abrunden.

  Tipp! Im Vektorbearbeitungsmodus kannst du den Radius jeder Zacke individuell anpassen.

  Häufig gestellte Fragen

  Wir haben einige Antworten auf die am häufigsten gestellten Fragen zu Formen zusammengestellt.

  Eckradius anpassen

  Neben den regulären Ziehpunkten wird bei Rechtecken zusätzlich auf der Innenseite jeder Ecke ein Kreisgriff angezeigt. Mit diesen Ziehpunkten kannst du die Ecken des Rechtecks abrunden. In diesem Artikel erfährst du mehr über das Anpassen und Glätten des Eckradius.

  Gestrichelte Linien erstellen

  1. Zeichne eine Linie oder wähle eine Linie aus, die du gestrichelt darstellen möchtest.
  2. Klicke im Eigenschaften-Bedienfeld im Abschnitt Stroke (Strich) auf die drei Punkte, um die Option Advanced Stroke (Erweiterter Strich) zu öffnen:
  3. Du kannst sowohl die Länge der Striche als auch den Abstand dazwischen festlegen.
  4. Gib diese im Feld „Dashes“ (Striche) im Format Strich,Abstand ein. Um beispielsweise einen Strich mit einer Länge von 5 px und einem Abstand von 2 px zu erstellen, gib „5,2“ ein.

  Doppelseitigen Pfeil erstellen

  So erstellst du einen doppelseitigen Pfeil:

  1. Wähle den Pfeil in der Arbeitsfläche aus.
  2. Doppelklicke auf den Pfeil, um den Vektorbearbeitungsmodus zu aktivieren.
  3. Wähle den Punkt am anderen Ende des Pfeils aus.
  4. Wähle unter „Advanced Stroke“ (Erweiterter Strich) im Feld „Cap“ (Abschluss) den gewünschten Pfeiltyp aus.

  Halbkreis erstellen

  So verwandelst du einen Kreis in einen Halbkreis:

  1. Drücke die Taste O, um das Ellipsenwerkzeug auszuwählen.
  2. Halte die Umschalttaste gedrückt, während du klickst und ziehst, um einen ordentlichen Kreis zu erstellen.
  3. Doppelklicke in die Form, um den Vektorbearbeitungsmodus zu aktivieren.
  4. Wähle einen der vier Hauptpunkte aus und drücke Entf.
  5. Um den Halbkreis zu schließen, drücke die Taste P, um das Stiftwerkzeug auszuwählen.
  6. Klicke auf jeden offenen Punkt im Halbkreis, um die Form zu schließen.

  In diesem Artikel erfährst du mehr über das Bearbeiten von Formen und Objekten.

  Bogenwerkzeug verwenden

  Du kannst mit dem Ellipsenwerkzeug auch andere Formen wie Kreisdiagramme, Kreise und offene Kreise erstellen:

  In diesem Artikel erfährst du mehr über das Verwenden des Bogenwerkzeugs.