Bevor du anfängst
Wer kann diese Funktion verwenden
Jeder Nutzer, der mindestens über Leseberechtigung für die Datei verfügt, kann Exporteinstellungen hinzufügen und Assets exportieren.
Exportiere deine Designs aus Figma, wenn du bereit bist, sie der Welt zu präsentieren. Über Exporteinstellungen kannst du festlegen, wie Figma deine Objekte exportieren soll. Dadurch kannst du genau bestimmen, was wie exportiert werden soll.
Du kannst das Format und alle relevanten Einstellungen festlegen, wenn du deiner Auswahl eine Exporteinstellung hinzufügst.
Exportformate
Als PNG exportieren
(Portable Network Graphics)
PNG ist ein Rastergrafik- oder Bitmap-Bildformat, das häufig zur Übertragung von Bildern im Internet genutzt wird. In einer Bitmap-Grafik ist jedem Pixel bzw. jedem "Bit" eine einzelne Farbe zugeordnet. Um das vollständige Bild darzustellen, werden diese Bits auf eine Karte ("map") gerendert.
PNG ist ein verlustfreies Bitmap-Format. Das bedeutet, dass die Bildqualität nicht beeinträchtigt wird, wenn das Objekt komprimiert wird. Auf diese Weise bleibt die Originalqualität eines Bildes beim Export erhalten.
Figma unterstützt PNGs mit 32-Bit unter Verwendung des RGBA-Farbformats. Das A in RGBA verweist auf den Alphakanal, der die Deckkraft eines Pixels steuert. Ein Alphawert ist notwendig, um PNG-Dateien exportieren zu können.
Möchtest du Objekte teilen, ohne sie zu exportieren?
Klicke mit der rechten Maustaste auf ein Objekt und wähle Copy/Paste (Kopieren/Einfügen) > Copy as PNG (Als PNG kopieren). Figma speichert daraufhin eine PNG-Datei in der Zwischenablage (Standardmäßig 2x Größe – sind für das Objekt jedoch Exporteinstellungen festgelegt, verwendet Figma stattdessen die größte Exporteinstellung). Du kannst alternativ auch die folgenden Tastenkürzel verwenden:
- Mac: Befehlstaste Umschalttaste C
- Windows: Steuerung + Umschalttaste + c
Unterstützte Exporteinstellungen: Contents Only (Nur Inhalte)
Als JPG exportieren
(Joint Photographic Group)
JPG ist ebenfalls ein pixel-basiertes Bildformat. Im Gegensatz zu PNGs sind allerdings die Dimensionen eines JPGs festgelegt. Beim Export eines Bilds als JPG entstehen durch die Komprimierung Qualitätsverluste, dafür ist die exportierte Datei aber kleiner.
Aus diesem Grund werden JPGs weniger im Onlinebereich und verstärkt in Printdesign und Fotografie verwendet.
Unterstützte Exporteinstellungen: Nur Inhalte
Als SVG exportieren
(Scalable Vector Graphics)
Bei SVGs handelt es sich um XML-basierte Vektorgrafiken. Diese bestehen aus Formen, die sich aus Zahlenwerten und Koordinaten zusammensetzen und auf jedem Bildschirm dargestellt werden können.
SVG ist ein skalierbares Format, das nicht auf Pixeln basiert. Da SVGs sowohl als Skript wie auch als Programmcode darstellbar sind, erfreuen sie sich im digitalen Design großer Beliebtheit.
Figma unterstützt Exporte als SVG nur in Originalgröße. Du kannst eine SVG aber skalieren, indem du die entsprechenden Werte im Code bzw. die Variablen für Höhe und Breite anpasst. Beispiel: <img
src="image.svg" width="50px">.
Die folgenden Funktionen sind zwar in Figma verfügbar, werden aber im SVG-Format nicht unterstützt:
- Anguläre oder diamantförmige Farbverläufe. Figma wird diese als radiale Farbverläufe exportieren.
- Figma exportiert keine weichgezeichneten Hintergründe ins SVG-Format. Du musst den Weichzeichner-Effekt direkt auf die entsprechenden Ebenen anwenden.
- Figma exportiert standardmäßig alle Texte als Glyphen. Das bedeutet, dass Textebenen nicht mehr bearbeitet werden können, nachdem die Datei als SVG exportiert wurde. Möchtest du weiterhin in der Lage sein, Texte zu bearbeiten, klicke auf und deaktiviere im Menü die Einstellung Outline text (Text fixieren).
- Figma exportiert Konturen als Flächen ins SVG-Format.
Unterstützte Exporteinstellungen:
Als PDF exportieren
(Portable Document Format)
Mit PDFs hast du die Möglichkeit, komplexe und interaktive Designs zu exportieren. PDF können Text, Schriftarten, Vektorgrafiken und Bilder in einem fixierten Layout enthalten.
PDF ist ein besonders vielseitiges Format, denn du kannst damit unabhängig von Software, Hardware und Betriebssystem einzelne Elemente eines Designs rendern und bearbeiten.
Da Xcode, die Entwicklungsumgebung für Mobile-Apps von Apple, PDF unterstützt, ist es ein nützliches Werkzeug bei der Entwicklung von iOS-Anwendungen. In Figma kannst du PDFs verwenden, um Folienstapel zu exportieren oder Objekte für die iOS-Entwicklung freizugeben. Außerdem kannst du sie für Printdesign-Mock-ups verwenden.
- Figma unterstützt PDF-Exporte nur in Originalgröße. Wenn du Objekte mit einer anderen Skalierung exportieren willst, musst du ein anderes Format auswählen.
- Der Export von Texten, die bearbeitet werden können, wird von Figma derzeit nicht unterstützt. Das bedeutet, dass du Texte in PDFs, die du aus Figma exportiert hast, nicht mehr ändern kannst. Du kannst Texte aber weiterhin markieren und kopieren, wenn du die PDF-Datei im Browser oder einem kompatiblen Programm öffnest.
Zusätzliche Exporteinstellungen
Diese zusätzlichen Einstellungen kannst du vornehmen, wenn du deiner Auswahl Exporteinstellungen hinzufügst.
Klicke im Eigenschaften-Bedienfeld unter Export auf , um alle Exporteinstellungen anzuzeigen und anzupassen.
Überlappende Ebenen ignorieren
Diese Option ist für die Formate PNG, JPG und SVG verfügbar.
- Aktiviert: Figma exportiert ausschließlich die ausgewählten Ebenen. Andere Objekte, die das ausgewählte Objekt schneiden oder überlappen, haben keinen Einfluss auf den Export.
- Deaktiviert: Figma exportiert auch Ebenen, die die ausgewählte Ebene oder Gruppe schneiden.
Begrenzungsrahmen übernehmen
Diese Option ist nur verfügbar, wenn du Textebenen in die Formate PNG, JPG und SVG exportierst.
- Aktiviert: Figma richtet die Größe des Exports an den tatsächlichen Abmessungen des Texts aus. Überflüssiger Raum zwischen den Textzeichen und dem Begrenzungsrahmen wird von Figma zugeschnitten und entfernt.
- Deaktiviert: Figma richtet die Größe des Exports am Begrenzungsrahmen der Textebene aus. Ist der Begrenzungsrahmen größer als der Text, nimmt Figma den leeren Raum in den Export auf. Ist der Begrenzungsrahmen kleiner, werden Textteile, die außerhalb der Begrenzung liegen, von Figma zugeschnitten und entfernt.
"id"-Attribut hinzufügen
Diese Option ist nur bei SVG-Exporten verfügbar.
Ist diese Option aktiviert, fügt Figma den Metadaten der SVG-Datei ein "id"-Tag hinzu. Die "id" basiert auf dem Objektnamen im Ebenen-Tab.
Text fixieren
Diese Option ist nur bei SVG-Exporten verfügbar und in Figma standardmäßig aktiviert.
Ist diese Option aktiviert, konvertiert Figma sämtliche Textebenen in Glyphen. Wenn du weiterhin in der Lage sein möchtest, Texte zu bearbeiten, solltest du diese Einstellung deaktivieren. Dadurch kannst du alle Textzeilen auch in anderen Systemen anpassen.
Kontur vereinfachen
In Figma kannst du Ebenen innere, zentrierte oder äußere Konturen hinzufügen. Das SVG-Format unterstützt jedoch nur zentrierte Konturen.
Die Option "Kontur vereinfachen" sorgt dafür, dass innere und äußere Konturen auch in anderen Systemen korrekt gerendert werden. Diese Option ist nur bei SVG-Exporten verfügbar und in Figma standardmäßig aktiviert. Dafür müssen die folgenden Bedingungen erfüllt sein:
- Das Exportformat ist SVG.
- Bei der Ebene handelt es sich um ein Vektornetzwerk und nicht um eine einfache Form.
- Die Ebene verwendet innere oder äußere Konturen, die dem Vektornetzwerk hinzugefügt wurden.
Hinweis: Wenn du „Kontur vereinfachen“ deaktiverst, stellt Figma Konturen umfangreicher dar und fügt eine Maskierung hinzu. Der optische Eindruck bleibt gleich, allerdings ist es dafür notwendig, dass Figma dem Code der SVG-Datei zusätzliche Zeilen hinzufügt.
Objekte aus Figma exportieren
Öffne die Exportoptionen in der rechten Seitenleiste:
- Mitarbeitende mit
Leseberechtigung können über den Export-Tab in der rechten Seitenleiste auf die Exporteinstellungen zugreifen.
- Mitarbeitende mit
Schreibberechtigung finden den Bereich Export im Design-Tab.
Triff deine Auswahl
Wähle die Objekte und Ebenen aus, die du exportieren möchtest. Dabei kann es sich um eine einzelne Ebene oder ein einzelnes Objekt, mehrere Objekte oder den gesamten Inhalt der Arbeitsfläche handeln.
Du kannst auch das Schneidewerkzeug verwenden, um einen Teil deiner Arbeitsfläche zu exportieren.
Exporteinstellungen hinzufügen
Mit Exporteinstellungen kannst du festlegen, wie Figma deine Objekte exportieren soll, zum Beispiel im Hinblick auf Skalierung, Format und weitere Formatierungsoptionen. In der rechten Seitenleiste kannst du unter Export die aktuellen Exporteinstellungen prüfen und Einstellungen hinzufügen oder entfernen.
Tipp! Wenn du bereits Exporteinstellungen angewendet hast, kannst du die folgenden Tastenkürzel verwenden, um deine Auswahl zu exportieren.
- Mac: Umschalttaste Befehlstaste E
- Windows: Umschalttaste + Steuerung + E
Anschließend kannst du diese Exporteinstellungen verwenden, um festzulegen, wie wir deine Objekte exportieren sollen.
Du kannst deiner Auswahl beliebig viele Exporteinstellungen hinzufügen. Darin kannst du auch unterschiedliche Formate oder Skalierungen kombinieren.
- Klicke in der rechten Seitenleiste unter Export auf .
- Wähle über das Feld Suffix (Dateiendung) ein Exportformat aus. Zur Auswahl stehen PNG, SVG, JPG und PDF.
- Wähle eine Skalierung aus der Liste mit Standardwerten aus oder füge über das Eingabefeld eine individuelle Größe oder Skalierung hinzu. Gib eine Zahl gefolgt von diesen Buchstaben ein:
- Füge nach dem Zahlenwert ein
x ein, um den Wert als Multiplikator zu verwenden.
- Füge nach dem Zahlenwert ein
b ein, um eine feste Breite zu definieren.
- Füge nach dem Zahlenwert ein
h ein, um eine feste Höhe zu definieren.
- Klicke auf , um das Menü Export options (Exportoptionen) zu öffnen und zusätzliche Exporteinstellungen anzupassen.
- Klicke neben der Vorschau auf , um eine Vorschau deiner Objekte anzuzeigen.
Tipp! Exportiere deine Designobjekte mit einem größeren Multiplikator, um höher aufgelöste Exporte zu erhalten und Unschärfen zu vermeiden. Die höhere Auflösung führt allerdings zu größeren Dateien.
Hinweis: Ein / im Ebenennamen wird von Figma als Symbol für die Ebenenhierarchie interpretiert und deine Auswahl entsprechend in Ordner exportiert. Du kannst Ebenen umbenennen, um eine Ebenenhierarchie aufzulösen und zu vermeiden, dass Figma Objekte in eine Ordnerhierarchie exportiert. Hier erfährst du, wie du Ebenen umbenennen kannst→
Exporteinstellungen ändern oder entfernen
Du kannst Exporteinstellungen jederzeit ändern oder entfernen.
- Klicke dazu einfach in eines der Felder der Einstellung.
- Klicke oben im Bereich Export auf das -Symbol.
- Daraufhin wird diese Einstellung nicht mehr auf die aktuelle Auswahl angewendet.
Objekte exportieren
Figma speichert alle Exporteinstellungen, die du auf eine Auswahl anwendest, in der Export-Liste der entsprechenden Datei. Dadurch kannst du alle in der Export-Liste gespeicherten Objekte in einem einzigen Vorgang exportieren.
Du kannst eine bestimmte Auswahl an Ebenen oder Objekten für den Export festlegen oder alle Objekte auf einmal exportieren.
Eine bestimmte Auswahl exportieren
Du kannst eine beliebige Auswahl mit Exporteinstellungen exportieren. Das geht sowohl, wenn du das erste Mal Exporteinstellungen auf eine Auswahl anwendest, wie auch, wenn du eine Auswahl triffst, für die bereits Exporteinstellungen festgelegt worden sind.
- Wähle die zu exportierenden Ebenen aus.
- Füge die gewünschten Exporteinstellungen hinzu oder passe sie an.
- Klicke in der rechten Seitenleiste auf die Schaltfläche Export.
- Figma exportiert jetzt die aktuelle Auswahl.
Gruppe exportieren
Über die Exportliste kannst du Gruppen von Objekten exportieren. Das beinhaltet alle Auswahlen, für die du Exporteinstellungen festgelegt hast.
- Klicke auf das -Menü und wähle in den Optionen File (Datei) und anschließend Export aus. Alternativ kannst du auch die folgenen Tastenkürzel verwenden:
- macOS: Umschalttaste Befehlstaste E
- Windows: Umschalttaste + Steuerung + E
- In der Export-Ansicht werden alle Auswahlen angezeigt, für die du Exporteinstellungen festgelegt hast. Für jede Auswahl kannst du:
- Skalierung, Format und Abmessungen des Objekts anzeigen.
- mit dem Mauszeiger über dem Thumbnail oder dem Ebenennamen hovern, um den Dateinamen der Exportdatei anzuzeigen.
- auf das Thumbnail klicken, um diese Auswahl auf der Arbeitsfläche anzuzeigen.
- Aktiviere das Kästchen neben allen Auswahlen, die exportiert werden sollen.
- Klicke auf die Schaltfläche Export, um die ausgewählten Objekte zu exportieren.
Tipp! Speicher deine Designs als .fig-Dateien, um die gesamte Figma-Datei zu exportieren. Kommentare, Versionsverläufe und Berechtigungen, die in der Originaldatei enthalten sind, werden nicht exportiert. Du kannst .fig-Dateien nur mit Figma öffnen.
- Klicke auf
, um das Menü zu öffnen.
- Klicke auf File (Datei) > Save local copy (Lokale Kopie speichern).
- Figma speichert nun eine Kopie der Datei in deinem Download-Ordner.
