So erstellst du einen Frame in Figma

Erfahren Sie, wie Sie in Figma einen Frame erstellen, um Ihre UI-Designs und Layouts zu organisieren. Eine anfängerfreundliche Anleitung zur Verwendung des Frame-Werkzeugs für eine bessere Struktur und Responsivität.

Instant AI Product Videos & Docs from Rough Screen Recordings

Get Started for Free

Detaillierte Schritte:

1. Wählen Sie das Rahmen-Werkzeug aus: Klicken Sie in der Symbolleiste auf das Rahmen-Werkzeugsymbol oder drücken Sie die Taste 'F'.
2. Wählen Sie eine Erstellungsmethode: Klicken und ziehen: Klicken und ziehen Sie auf der Arbeitsfläche, um einen Rahmen mit benutzerdefinierten Abmessungen zu erstellen.
Voreingestellte Gerätegröße: Wählen Sie im Eigenschaftenbereich rechts eine vorgegebene Rahmengröße aus.
Rahmenauswahl: Wählen Sie vorhandene Elemente aus und wandeln Sie sie in einen Rahmen um.
3. Erstellen Sie einen Rahmen um vorhandene Elemente (Rahmenauswahl): Wählen Sie die gewünschten Elemente aus und drücken Sie dann Strg + Alt + G (Win) oder ⌘ + Opt + G (Mac), um einen Rahmen zu erstellen, der diese Elemente enthält.
4. Passen Sie die Rahmeneigenschaften an: Nach der Erstellung können Sie die Eigenschaften des Rahmens (Größe, Farbe usw.) im rechten Bedienfeld ändern.

Schritt-für-Schritt-Anleitung: So erstellen Sie einen Rahmen in Figma

Schritt 1

Klicken Sie auf die Option „Rahmen“, um den Erstellungsprozess für Rahmen zu starten.

Click on the "Frames" option to initiate the frame creation process.

Schritt 2

Nachdem Sie die Option „Rahmen“ ausgewählt haben, tippen Sie irgendwo auf die Figma-Vorlage, an der Sie Ihren neuen Rahmen platzieren möchten.

After selecting the "Frames" option, tap anywhere on the Figma template where you want to place your new frame.

Schritt 3

Nachdem Sie geklickt haben, wird der Rahmen auf der Vorlage angezeigt. Anschließend können Sie die Größe und Abmessungen des Rahmens an Ihre spezifischen Anforderungen anpassen.

Once you've clicked, the frame will appear on the template. You can then adjust the size and dimensions of the frame according to your specific requirements.

Profi-Tipps zum Erstellen von Frames in Figma

Verwenden Sie die Tastenkombination für das Frame-Werkzeug
Drücken Sie F auf Ihrer Tastatur, um das Frame-Werkzeug zu aktivieren. Klicken und ziehen Sie dann auf der Leinwand, um einen Frame zu zeichnen. Dies ist die schnellste und am häufigsten verwendete Methode, um Frames zu erstellen.
Einen Frame über die Symbolleiste erstellen
Klicken Sie auf das Symbol des Frame-Werkzeugs in der oberen linken Ecke der Symbolleiste (es sieht aus wie ein Hashtag oder ein Rechteck). Wählen Sie dann rechts eine voreingestellte Frame-Größe (z. B. iPhone, Desktop oder Tablet) aus oder zeichnen Sie manuell einen auf der Leinwand.
Vorhandene Elemente in einen Frame umwandeln
Wählen Sie die Elemente aus, die Sie gruppieren möchten, klicken Sie dann mit der rechten Maustaste und wählen Sie im Kontextmenü „Frame selection“ aus. Dadurch werden die ausgewählten Elemente in einen neuen Frame eingeschlossen, was für die Organisation Ihres Designs nützlich ist.
Auto-Layout in Frames verwenden
Nachdem Sie einen Frame erstellt haben, aktivieren Sie Auto-Layout, um ihn responsiv zu machen. Das hilft beim Entwerfen von Schaltflächen, Karten oder Bereichen, die einen konsistenten Abstand und eine saubere Ausrichtung benötigen.
Frames verschachteln für eine bessere Struktur
Sie können einen Frame in einen anderen einfügen. Verschachtelte Frames eignen sich hervorragend, um komplexe UI-Designs und Komponenten wie Modals, Karten und Navigationsleisten zu organisieren.

Häufige Fehler und wie Sie sie vermeiden

Frames mit Gruppen verwechseln
Gruppen fassen nur Elemente zusammen, aber Frames können Layoutregeln und Constraints enthalten. Verwenden Sie Frames, wenn Sie Struktur, Ausrichtung oder Responsivität benötigen.
Keine Constraints festlegen
Beim Entwerfen responsiver Komponenten kann es dazu führen, dass Elemente beim Skalieren unerwartet reagieren, wenn Sie vergessen, innerhalb eines Frames Constraints festzulegen. Prüfen Sie die Constraints immer in der rechten Seitenleiste.
Frames übermäßig verwenden
Zu viele unnötige Frames können Ihre Ebenenleiste unübersichtlich machen und die Bearbeitung erschweren. Verwenden Sie Frames gezielt—nur wenn Layout-Kontrolle nötig ist.
Falsche Verschachtelung
Vermeiden Sie es, Frames versehentlich in die falschen übergeordneten Frames zu platzieren. Das kann Ihre Layout-Hierarchie zerstören. Nutzen Sie die Ebenenleiste, um die Struktur im Blick zu behalten.
Keine Namen vergeben
Wenn Sie Ihren Frames keine Namen geben, wird die Zusammenarbeit verwirrend. Benennen Sie Ihre Frames immer eindeutig (z. B. „Navbar“, „Footer“ oder „iPhone 14 Screen“), damit alles organisiert bleibt.

Häufige FAQs zum Erstellen von Frames in Figma

Was ist der Unterschied zwischen einem Frame und einem Artboard?
In Figma funktioniert ein Frame wie ein Artboard in anderen Tools, bietet jedoch mehr Layout- und Responsive-Funktionen. Frames können als Container mit Constraints und Auto Layout dienen.
Kann ich die Größe eines Frames nach dem Erstellen ändern?
Ja. Wähle den Frame aus und ziehe an seinen Kanten oder gib exakte Abmessungen im Eigenschaftenbereich rechts ein.
Können Frames exportiert werden?
Ja. Frames können als PNG, JPG, SVG oder PDF exportiert werden. Wähle den Frame aus und nutze den Export-Bereich im Eigenschaftenbereich.
Gibt es voreingestellte Frame-Größen in Figma?
Ja. Wenn du das Frame-Werkzeug aktivierst, siehst du rechts eine Liste von Voreinstellungen – etwa Smartphone-Bildschirme, Desktop-Größen, Tablets und Social-Media-Abmessungen.
Kann ich Frames in Komponenten erstellen?
Absolut. Frames können Teil von Komponenten oder Instanzen sein, sodass du Designelemente effizient strukturieren und wiederverwenden kannst.
Wie zeichnet man auf dem Mac den Bildschirm auf?
Um auf einem Mac den Bildschirm aufzuzeichnen, kannst du Trupeer AI verwenden. Es ermöglicht dir, den gesamten Bildschirm aufzuzeichnen, und bietet KI-Funktionen wie das Hinzufügen von KI-Avataren, Sprachaufnahmen sowie das Ein- und Auszoomen im Video. Mit der KI-Videoübersetzungsfunktion von Trupeer kannst du das Video in über 30 Sprachen übersetzen.
Wie füge ich einen KI-Avatar zur Bildschirmaufnahme hinzu?
Um einer Bildschirmaufnahme einen KI-Avatar hinzuzufügen, musst du ein KI-Bildschirmaufzeichnungstool verwenden. Trupeer AI ist ein KI-Bildschirmaufzeichnungstool, das dir hilft, Videos mit mehreren Avataren zu erstellen, und dir außerdem dabei hilft, deinen eigenen Avatar für das Video zu erstellen.
Wie zeichnet man auf Windows den Bildschirm auf?
Um auf Windows den Bildschirm aufzuzeichnen, kannst du die integrierte Game Bar (Windows + G) oder ein fortschrittliches KI-Tool wie Trupeer AI für erweiterte Funktionen wie KI-Avatare, Sprachaufnahmen, Übersetzung usw. verwenden.
Wie füge ich einem Video eine Sprachaufnahme hinzu?
Um Videos eine Sprachaufnahme hinzuzufügen, lade die Chrome-Erweiterung von Trupeer AI herunter. Nach der Anmeldung lädst du dein Video mit Stimme hoch, wählst die gewünschte Sprachaufnahme von Trupeer aus und exportierst dein bearbeitetes Video.
Wie zoome ich in einer Bildschirmaufnahme heran?
Um während einer Bildschirmaufnahme hineinzuzoomen, verwende die Zoom-Effekte in Trupeer AI, mit denen du zu bestimmten Momenten hinein- und herauszoomen kannst und so die visuelle Wirkung deines Videoinhalts verbesserst.