So verwischst du den Hintergrund in Figma – Kurzanleitung zu Hintergrundeffekten

Lernen Sie, wie Sie in Figma den Hintergrund mit Hintergrundunschärfe und Ebeneneffekten unscharf machen. Perfekt für UI-Design und stilvolle Overlays.

Erstelle beeindruckende Produktvideos und Dokus mit KI

Dieses Tutorial wurde mit Trupeer in weniger als 5 Minuten erstellt

Kostenlos erstellen

In diesem Leitfaden erfahren Sie, wie Sie mit dem Design-Menü in Figma einen Unschärfeeffekt auf einen Frame anwenden.
Folgen Sie den detaillierten Schritten, um die gewünschte Unschärfe eines Elements in Ihrem Designprojekt zu erzielen.

Ein Hintergrundunschärfeeffekt in Figma verleiht Ihrem Design ein mattes Glas-Aussehen und wird häufig in Modals, Karten und Overlays verwendet.

Schritt 1: Bereiten Sie die Ebene für die Unschärfe vor

  1. Erstellen Sie eine Form
    Verwenden Sie ein Rechteck oder eine beliebige Form/einen beliebigen Frame, bei dem der Unschärfeeffekt erscheinen soll.

  2. Fügen Sie eine Füllung hinzu
    Füllen Sie sie mit einer Vollfarbe (z. B. Weiß oder Grau).

  3. Reduzieren Sie die Deckkraft
    Verringern Sie die Deckkraft der Ebene (typischerweise etwa 10–40 %). Dieser Schritt ist wesentlich; ohne Transparenz wird die Unschärfe nicht angezeigt.

Schritt 2: Wenden Sie die Hintergrundunschärfe an

  1. Wählen Sie die Ebene
    Klicken Sie auf die soeben erstellte Form.

  2. Gehen Sie zum Effekte-Bereich
    In der rechten Seitenleiste klicken Sie auf das "+" neben Effekte und wählen Sie dann Hintergrundunschärfe aus dem Dropdown-Menü aus.

  3. Passen Sie den Unschärfewert an
    Klicken Sie auf das Einstellungssymbol neben dem Effekt und verwenden Sie den Schieberegler, um zu steuern, wie unscharf der Hintergrund erscheint.

Optional: Feinabstimmung

  • Sie können Hintergrundunschärfe mit Schlagschatten kombinieren, um für zusätzliche Tiefe zu sorgen.

  • Passen Sie Deckkraft und Unschärfe gemeinsam an, um entweder einen weichen, mattierten Look oder einen starken, glasartigen Look zu erzeugen.

Schritt-für-Schritt-Anleitung: So verwischen Sie den Hintergrund in Figma

Schritt 1

Um mit dem Anwenden eines Unschärfeeffekts in Figma zu beginnen, wählen Sie zunächst den Frame aus, den Sie verwischen möchten.

Navigieren Sie zum Design-Menü auf der rechten Seite der Oberfläche. Suchen Sie in diesem Menü den Bereich Effekte und klicken Sie darauf.

Klicken Sie im Bereich Effekte auf 'Neuen Effekt hinzufügen', indem Sie darin auf das '+'-Symbol klicken.

To begin applying a blur effect in Figma, first select the frame you wish to blur.  Navigate to the design menu located on the right side of the interface. Within this menu, find the effects section and click on it.  In the effects section, click on 'Add a new effect' by clicking the '+' symbol within it.

Schritt 2

Sobald der neue Effekt hinzugefügt wurde, wird ein Dropdown-Menü angezeigt. Klicken Sie auf dieses Menü und wählen Sie 'Ebenenunschärfe.' Der Unschärfeeffekt wurde nun erfolgreich auf den ausgewählten Frame angewendet.

Once the new effect is added, a drop-down menu will appear. Click on this menu and select 'Layer Blur.' The blur effect has now been successfully applied to your chosen frame.

Profi-Tipps, um den Hintergrund in Figma zu verwischen

  1. Unschärfe auf ein Objekt anwenden:
    Wähle das Objekt (Bild, Form oder Frame) aus, das du verwischen möchtest. Klicke in der rechten Seitenleiste im Bereich Effekte auf das + Symbol und wähle im Dropdownmenü Hintergrundunschärfe oder Ebenenunschärfe aus.

  2. Unschärfeintensität anpassen:
    Nachdem du die Unschärfe angewendet hast, verwende den Schieberegler, um die Stärke der Unschärfe anzupassen. Du kannst die Unschärfe verstärken oder verringern, um den gewünschten Effekt zu erzielen.

  3. Verwende Gaußsche Unschärfe für mehr Kontrolle:
    Für eine präzisere Steuerung des Unschärfeeffekts verwende die Gaußsche Unschärfe, die für weichere und gleichmäßigere Unschärfe sorgt.

  4. Bilder oder Frames verwischen:
    Wenn du ein Bild oder einen Frame verwischst, stelle sicher, dass das Bild ausgewählt ist. Du kannst das Bild verwischen, ohne andere Designelemente zu beeinflussen.

  5. Mehrere Unschärfen auf Ebenen:
    Du kannst mehrere Unschärfeeffekte auf verschiedene Ebenen anwenden. Wenn du zum Beispiel einen verwischten Hintergrund mit scharfem Text möchtest, wende die Unschärfe nur auf die Hintergrundebene an.

Häufige Fehler beim Verwischen des Hintergrunds in Figma

  1. Falsche Ebene verwischen:
    Lösung: Überprüfe die ausgewählte Ebene, bevor du die Unschärfe anwendest. Verwende das Ebenen-Panel, um sicherzustellen, dass du die richtige Ebene bearbeitest.

  2. Unschärfeeffekt übermäßig verwenden:
    Lösung: Wende wichtige Elemente wie Text oder Logos nicht zu stark unscharf an, da dies die Lesbarkeit verringern kann. Verwende Unschärfe sparsam, um Designakzente zu setzen.

  3. Unerwünschte Klarheit nach der Unschärfe:
    Lösung: Wenn das Anwenden von Unschärfe auf Bilder zu einer unerwünschten Klarheit führt, passe die Unschärfestärke an und experimentiere mit verschiedenen Effekten wie der Gaußschen Unschärfe, um den gewünschten Look zu erzielen.

  4. Unschärfe wird beim Export nicht angezeigt:
    Lösung: Wenn der Unschärfeeffekt beim Exportieren nicht angezeigt wird, stelle sicher, dass du in hoher Auflösung (PNG oder SVG) exportierst, um eine bessere Qualität zu erzielen.

Häufige FAQs zum Weichzeichnen des Hintergrunds in Figma

  1. Kann ich Text in Figma weichzeichnen?
    Während Sie Vektorformen und Bilder weichzeichnen können, können Sie auf Text in Figma nicht direkt einen Weichzeichner anwenden. Sie können Text jedoch in eine Form rasterisieren und dann den Weichzeichner anwenden.

  2. Wie kann ich den Hintergrund eines Designs weichzeichnen?
    Wählen Sie die Hintergrundebene oder das Bild aus, wenden Sie den Effekt „Layer Blur“ an und passen Sie die Intensität an. Das eignet sich hervorragend, um den Fokus auf die Elemente im Vordergrund zu lenken.

  3. Kann ich die Richtung der Unschärfe steuern?
    Der Weichzeichnungseffekt in Figma wird gleichmäßig angewendet. Wenn Sie eine richtungsabhängige Unschärfe (wie Bewegungsunschärfe) benötigen, müssen Sie vor dem Import des Bildes zurück in Figma externe Bildbearbeitungstools wie Photoshop oder Illustrator verwenden.

  4. Bleibt der Weichzeichnungseffekt nach dem Export des Designs erhalten?
    Ja, der Weichzeichnungseffekt bleibt im exportierten Design erhalten, solange die Datei in einem unterstützten Format wie PNG oder JPG gespeichert ist.

  5. Gibt es eine Möglichkeit, nur einen Teil eines Bildes weichzuzeichnen?
    Ja, Sie können in Figma eine Maske verwenden, um einen bestimmten Bereich des Bildes zu isolieren und den Weichzeichnungseffekt nur auf diesen Teil anzuwenden.

  6. Wie nimmt man den Bildschirm auf dem Mac auf? 
    Um den Bildschirm auf einem Mac aufzunehmen, können Sie Trupeer AI verwenden. Es ermöglicht Ihnen, den gesamten Bildschirm aufzunehmen und bietet KI-Funktionen wie das Hinzufügen von KI-Avataren, das Hinzufügen von Voiceover sowie das Hinein- und Herauszoomen im Video. Mit der KI-Videoübersetzungsfunktion von trupeer können Sie das Video in über 30 Sprachen übersetzen. 

  7. Wie fügt man einer Bildschirmaufnahme einen KI-Avatar hinzu?
    Um einer Bildschirmaufnahme einen KI-Avatar hinzuzufügen, müssen Sie ein KI-Tool für Bildschirmaufnahmen verwenden. Trupeer AI ist ein KI-Tool für Bildschirmaufnahmen, das Ihnen hilft, Videos mit mehreren Avataren zu erstellen, und Ihnen außerdem dabei hilft, Ihren eigenen Avatar für das Video zu erstellen.

  8. Wie nimmt man den Bildschirm unter Windows auf?
    Um unter Windows den Bildschirm aufzunehmen, können Sie die integrierte Game Bar (Windows + G) oder ein fortschrittliches KI-Tool wie Trupeer AI für weitergehende Funktionen wie KI-Avatare, Voiceover, Übersetzung usw. verwenden.

  9. Wie fügt man einem Video ein Voiceover hinzu?
    Um Voiceover zu Videos hinzuzufügen, laden Sie die Chrome-Erweiterung von trupeer ai herunter. Nachdem Sie sich angemeldet haben, laden Sie Ihr Video mit Ton hoch, wählen Sie das gewünschte Voiceover von trupeer aus und exportieren Sie Ihr bearbeitetes Video. 

  10. Wie zoome ich in einer Bildschirmaufnahme hinein?
    Um während einer Bildschirmaufnahme hineinzuzoomen, verwenden Sie die Zoom-Effekte in Trupeer AI, mit denen Sie zu bestimmten Momenten hinein- und herauszoomen können und so die visuelle Wirkung Ihres Videoinhalts verbessern.

Das fragen auch andere

Generator für technische Dokumentation

Benutzerhandbuch-Leitfaden

Wissensdatenbank-Software

So verbergen Sie Rahmennamen in Figma

So speichern Sie eine Figma-Datei

So erstellen Sie ein Raster in Figma

So zoomen Sie in Figma mithilfe der Seitenleiste hinein

Hintergrund in Figma weichzeichnen

Brauchst du einen Videoeditor, Übersetzer und Drehbuchautor?

Trupeer kostenlos testen

Demo buchen

Brauchst du einen Videoeditor, Übersetzer und Drehbuchautor?

Trupeer kostenlos testen

Demo buchen

Brauchst du einen Videoeditor, Übersetzer und Drehbuchautor?

Trupeer kostenlos testen

Demo buchen