Wie man einen Hintergrund in Figma transparent macht (Anleitung 2026)

Figma ist für Interface-Design gebaut, nicht für Fotobearbeitung, daher bedeutet „Hintergrund entfernen" dort etwas anderes als in einem Foto-Tool. Wenn Sie nur möchten, dass der Hintergrund Ihres Frames oder Artboards beim Export verschwindet, kann Figma das nativ. Aber wenn Sie ein Foto mit einem unruhigen Hintergrund haben - ein Produktfoto, ein Porträt, ein platziertes Bild - hat Figma keine integrierte Möglichkeit, das Motiv zu erkennen und freizustellen; Sie brauchen entweder ein Plugin, viel Geduld mit dem Stift-Werkzeug, oder einen dedizierten Hintergrundentferner, bevor das Bild überhaupt in Ihre Datei gelangt.

Warum transparente Hintergründe in Figma-Projekten wichtig sind

Transparente PNGs erlauben es, ein Logo, Produktfoto oder Icon über jede Farbe, jedes Screenshot-Mockup oder jeden Farbverlauf zu legen, ohne sichtbaren Kasten darum. Das ist wichtig für UI-Kits, Marketing-Decks, App-Store-Screenshots und jedes Designsystem, in dem dasselbe Asset auf mehreren Hintergründen sitzen muss.

Methode 1: Einen Frame mit transparentem Hintergrund exportieren

Schritt 1: Wählen Sie Ihren Frame, Ihre Gruppe oder Ihre Komponente in Figma aus.

Schritt 2: Entfernen oder verstecken Sie im rechten Panel die Hintergrundfüllung des Frames (klicken Sie auf die Füllfarbe und löschen Sie sie, oder blenden Sie ihre Sichtbarkeit aus).

Schritt 3: Öffnen Sie den Export-Bereich unten im rechten Panel, wählen Sie PNG und exportieren Sie. PNG unterstützt Alpha-Transparenz, sodass überall dort, wo die Hintergrundfüllung entfernt wurde, statt Weiß transparent exportiert wird.

Das funktioniert gut für Logos, Icons und UI-Mockups, bei denen der „Hintergrund" nur eine in Figma hinzugefügte Füllfarbe ist, keine fotografierte Szene.

Methode 2: Den Hintergrund aus einem platzierten Foto entfernen

Wenn es um ein Foto geht - ein Produktfoto, ein Porträt, den Screenshot eines physischen Objekts -, können die Export-Einstellungen von Figma nicht helfen, da der Hintergrund keine Figma-Füllung ist, sondern Teil der Pixel des Bildes selbst. Innerhalb von Figma bleiben Ihnen realistisch nur ein Community-Plugin, das eine externe API aufruft, oder das manuelle Freistellen des Motivs mit dem Stift-Werkzeug, was langsam ist und selten saubere Kanten um Haare, Fell oder feine Details liefert.

Der schnellere Weg: vor dem Import entfernen

Der einfachste Workflow für die meisten Designer ist, den Hintergrund zuerst aus dem Foto zu entfernen und das resultierende transparente PNG dann direkt in Figma zu ziehen. Laden Sie das Bild bei nobackground hoch, lassen Sie die KI auf dem Gerät das Motiv in wenigen Sekunden freistellen, laden Sie das PNG herunter und platzieren Sie es auf Ihrer Fläche - ohne Plugin-Berechtigungen, ohne Konto, und ohne dass dabei ein Bild Ihren Browser verlässt.

Tipps für saubere transparente Exporte

• Exportieren Sie mit 2x- oder 3x-Skalierung für alles, was auf einem hochauflösenden Display verwendet wird, und skalieren Sie danach bei Bedarf herunter - das verhindert weiche, unscharfe Kanten um den Ausschnitt.
• Prüfen Sie transparente PNGs vor der Weitergabe auf einem Schachbrettmuster oder dunklem Hintergrund, da ein hellgrauer Kantenschimmer auf einer schlichten weißen Fläche leicht übersehen wird.
• Wenn Sie denselben Ausschnitt auf mehreren Mockups platzieren, bewahren Sie das originale transparente PNG als gemeinsames Asset in Ihrer Figma-Bibliothek auf, statt es aus jedem Frame erneut zu exportieren.

Fragen zur Transparenz in Figma

Hat Figma einen integrierten Hintergrundentferner? Nein. Figma kann Frames oder Formen mit transparenter Füllung exportieren, aber es kann ein Motiv aus einem Foto nicht automatisch erkennen und freistellen, ohne Plugin oder externes Tool.

Funktioniert ein transparentes PNG von nobackground direkt in Figma? Ja. Ziehen Sie das heruntergeladene PNG einfach per Drag-and-Drop auf Ihre Fläche wie jedes andere Bild-Asset; die Transparenz bleibt erhalten.

Warum Ihr Figma-Export immer noch einen weißen Hintergrund hat

Das ist das häufigste Transparenzproblem in Figma, und fast immer liegt es an einer von vier Ursachen. Erstens: Der Frame hat noch eine Füllung. In manchen älteren Dateien bleibt eine über das Augensymbol ausgeblendete Füllung im Export erhalten, löschen Sie die Füllung also, statt sie nur umzuschalten. Zweitens: Sie haben JPG statt PNG exportiert; JPG hat keinen Alphakanal und reduziert Transparenz ausnahmslos auf Weiß. Drittens: Hinter Ihrem Inhalt liegt ein zweiter Frame oder ein weißes Rechteck, das Sie vergessen haben, und das ist in einem tief verschachtelten Auto Layout leicht zu übersehen. Viertens: Das Bild selbst hat einen weißen Hintergrund in seinen Pixeln, und dann hilft nichts im Exportbereich von Figma, weil Figma getreu genau das exportiert, was vorhanden ist.

Am schnellsten diagnostizieren Sie das, indem Sie die Canvas-Farbe der Seite vorübergehend auf ein kräftiges Magenta setzen. Alles, was wirklich transparent ist, zeigt Magenta; alles, was weiß ist, bleibt weiß und verrät sich sofort.

Bildfüllungen gegenüber platzierten Bildern

Figma behandelt ein Foto als Füllung einer Form und nicht als eigenes Objekt, was Umsteiger von Photoshop überrascht. Dieser Unterschied ist hier entscheidend: Weil das Foto eine Füllung ist, können Sie Teile davon nicht wegradieren, und das Pen-Werkzeug schneidet nicht hinein. Was Sie tun können, ist eine Vektorform zu zeichnen und sie als Maske zu verwenden, die die Füllung auf diese Form beschneidet. Das funktioniert gut für geometrische Ausschnitte wie eine abgerundete Produktkachel und schlecht für organische Umrisse wie eine Person, weil Sie dann jede Kurve der Silhouette von Hand nachzeichnen.

Wenn Ihr Motiv Haare, Fell, weiche Kanten oder irgendeinen halbtransparenten Bereich hat, ist eine Vektormaske strukturell das falsche Werkzeug. Ein Vektorpfad ist eine harte Grenze; Haare brauchen teilweises Alpha, also Pixel, die zu 40% deckend sind. Deshalb lautet die praktische Antwort, ein Bild einzubringen, das bereits einen Alphakanal hat, statt zu versuchen, in Figma einen zu erzeugen.

Freisteller in Komponenten und Varianten scharf halten

Sobald ein transparentes PNG Teil einer Komponente wird, sparen ein paar Gewohnheiten viel Nacharbeit. Platzieren Sie das Bild in einem eigenen Frame mit transparenter Füllung, damit die Komponente skaliert werden kann, ohne dass die Bildfüllung unerwartet neu beschnitten wird. Bevorzugen Sie bei Freistellern Fit gegenüber Fill, denn Fill beschneidet auf den Frame und schneidet beim Skalieren einer Instanz bereitwillig den oberen Teil eines Kopfes ab. Wenn derselbe Freisteller in einem Designsystem in mehreren Größen vorkommt, veröffentlichen Sie ihn einmal als Komponente und arbeiten Sie mit Instanzen, statt das PNG immer wieder einzufügen; ein einziger Neuexport aktualisiert dann alle Screens auf einmal.

Exporteinstellungen, die Transparenz unbemerkt zerstören

Neben der JPG-Falle sorgen drei Einstellungen für vermeidbare Probleme. Ein Export mit 1x für ein Retina-Mockup erzeugt weiche Kanten, die wie ein schlechter Freisteller aussehen, obwohl es nur ein zu klein skalierter Export ist, nehmen Sie also 2x oder 3x für alles, was auf einem hochauflösenden Display betrachtet wird. Eine Hintergrund- oder Ebenenunschärfe auf einem Frame zwingt Figma dazu, einen größeren Bereich zu rastern, und kann im exportierten PNG eine schwache rechteckige Kante erzeugen. Und ein Schlagschatten, der auf Frame-Ebene statt auf Objektebene liegt, wird als Schatten des Rechtecks gerendert und nicht als Schatten der freigestellten Silhouette, was sofort verrät, dass das Asset zusammengesetzt und nicht fotografiert wurde.

PNG, SVG und WebP für die Übergabe

Für einen fotografischen Freisteller ist PNG in nahezu jedem Fall der richtige Export: Es ist das einzige breit unterstützte Rasterformat, das Alpha pro Pixel ohne Kompatibilitätsfragen erhält. SVG passt nur dann, wenn die Grafik wirklich vektorbasiert ist, etwa ein aus Formen gezeichnetes Logo; ein Foto als SVG zu exportieren bettet lediglich die Rasterdaten in eine SVG-Hülle ein und macht die Datei ohne jeden Nutzen größer. WebP erzeugt bei erhaltener Transparenz spürbar kleinere Dateien und ist eine gute Wahl für produktive Web-Assets, geben Sie im Team aber PNG weiter und halten Sie die WebP-Umwandlung als Build-Schritt vor, da manche Design- und Drucktools WebP nach wie vor uneinheitlich behandeln.

Dateigröße und geteilte Bibliotheken

Transparente PNGs sind größer als das entsprechende JPG, weil der Alphakanal zusätzliche Daten mitbringt und die PNG-Komprimierung verlustfrei ist. In einer großen Figma-Datei mit Dutzenden Freistellern in voller Auflösung zeigt sich das als langsames Laden der Datei für das ganze Team. Die praktische Lösung: Bewahren Sie von jedem Freisteller einen hochauflösenden Master außerhalb der Arbeitsdatei auf und platzieren Sie in Figma eine angemessen dimensionierte Version, etwa doppelt so groß wie die größte benötigte Darstellung. So behalten Sie die Qualität dort, wo sie zählt, und zahlen nicht bei jedem Öffnen der Datei dafür.