Exportformate und -einstellungen

Figma-Design unterstützt eine Vielzahl von Exportformaten und -einstellungen. In diesem Artikel erfährst du, welches Format am besten zu deinen Bedürfnissen passt. Wenn du bereit bist, deine Entwürfe zu exportieren, findest du unter Exportieren aus Figma eine Anleitung zum Anwenden dieser Einstellungen.

Exportformate

PNG (Portable Network Graphics)

PNG ist ein Rastergrafikformat, das verlustfreie Komprimierung, Transparenz und Farbkontrast unterstützt. Bei der verlustfreien Komprimierung bleiben die ursprüngliche Bildqualität und die Lesbarkeit von Text beim Export erhalten. Beachte, dass der Export als PNG eine viel größere Datei ergibt als der Export als JPG.

PNG-Dateien eignen sich am besten für Bilder, die transparent sind, sowie für Grafiken, die Bilder und Text enthalten, wie z. B. Logos, Diagramme oder Illustrationen.

Folgende Exporteinstellungen sind für PNG verfügbar:

• Ignore overlapping layers (Überlappende Ebenen ignorieren)
• Include bounding box (text layers only) Begrenzungsrahmen einbinden (nur bei Textebenen)

JPG (Joint Photographic Group)

JPG (oder JPEG) ist ein Rasterbilddateiformat mit verlustbehafteter Komprimierung. Verlustbehaftete Komprimierung verringert die Dateigröße, indem Daten endgültig aus der Datei entfernt werden. Das Ergebnis sind kleinere Dateien, aber auch eine geringere Bildqualität.

In den meisten Fällen ist JPG-Qualität für die Verwendung im Internet gut geeignet und verkürzt die Ladezeit aufgrund der geringeren Größe. JPG-Dateien können auch für Printdesign und Fotografie verwendet werden.

Beachte, dass JPG-Dateien keine Transparenz unterstützen und die Komprimierung die Lesbarkeit von Text beeinträchtigen kann. Wenn dein Bild Text oder Transparenz enthält, exportiere es stattdessen als PNG- oder SVG-Datei.

Folgende Exporteinstellungen sind für JPG verfügbar:

• Ignore overlapping layers (Überlappende Ebenen ignorieren)
• Include bounding box (text layers only) (Begrenzungsrahmen einschließen (nur bei Textebenen))

SVG (Scalable Vector Graphics)

SVG ist ein XML-basiertes Vektorgrafikformat. Das sind Formen, die auf numerischen Werten und Koordinaten basieren und die du auf jedem Bildschirm darstellen kannst. Da SVGs nicht auf Pixeln basieren, können sie auf jede Größe skaliert werden, ohne die Bildqualität zu beeinträchtigen. Darüber hinaus unterstützen sie Transparenz.

Du kannst SVG-Dateien in Skripten oder Code darstellen, was sie zu einer beliebten Wahl für digitales Design macht. Verwende SVGs für Logos, Icons oder Illustrationen, die du in Responsive Designs einbinden willst.

Die folgenden Exporteinstellungen sind für SVG verfügbar:

• Ignore overlapping layers (Überlappende Ebenen ignorieren)
• Include bounding box (text layers only) (Begrenzungsrahmen einbeziehen (nur bei Textebenen))
• Include “id” attribute (Attribut „id“ einbeziehen)
• Outline text (Text fixieren)
• Simplify stroke (Kontur vereinfachen)

PDF (Portable Document Format)

In PDF-Dateien kannst du komplexe und interaktive Layouts teilen. PDFs enthalten Text, Schriftarten, Vektorgrafiken und Bilder in einem festen Layout. Mit PDFs kannst du einzelne Elemente eines Designs in jedem System darstellen und bearbeiten. Das macht es zu einem vielseitigen Format, denn es ist selbstständig und unabhängig von Software, Hardware oder Betriebssystemen.

Xcode, die mobile Entwicklungssprache von Apple, unterstützt PDF. Das macht sie zu einem nützlichen 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.

Exporteinstellungen

Mit den Exporteinstellungen kannst du genauer festlegen, wie Figma deine Designs exportiert.

Scale (Skalieren)

Wähle eine der Standard-Skalierungsoptionen oder gib eine eigene Größe in das Feld ein. Um die Größe anzupassen, gib eine Zahl zusammen mit einer der folgenden Optionen ein:

• Füge x nach dem Wert hinzu, um ihn als Multiplikator zu verwenden
• Füge w nach dem Wert hinzu, um eine feste Breite festzulegen
• Füge h nach dem Wert hinzu, um eine feste Höhe festzulegen

Wenn du Inhalte für Bildschirme mit hoher Dichte exportierst (z. B. Retina-Displays), solltest du den Export in einem größeren Maßstab vornehmen, um die Auflösung des Assets zu erhöhen.

Standardmäßig haben Assets, die als Bilder aus Figma exportiert werden, einen DPI-Wert von 72. Um den DPI-Wert eines maßstabsgetreu exportierten Bildes zu berechnen, multipliziere 72 mit dem gewählten Maßstab. Zum Beispiel haben Bilder, die mit doppelter Größe exportiert werden, einen DPI-Wert von 144. Bilder, die mit dreifacher Größe exportiert werden, haben einen DPI-Wert von 216.

Bei der Skalierung gibt es einige Einschränkungen für die einzelnen Formate:

• Figma unterstützt den Export von SVGs nur mit Skalierungsfaktor 1x. Du kannst ein SVG trotzdem skalieren, indem du die Werte im Code anpasst oder indem du Variablen für Breite und Höhe verwendest. Zum Beispiel: <img src="image.svg" width="50px">.
• Figma unterstützt nur PDF-Exporte mit Skalierungsfaktor 1x. Um Assets in einem anderen Maßstab zu exportieren, musst du ein anderes Format wählen.

Suffix

Dies ist eine optionale Einstellung. Alles, was du in das Feld „Suffix“ einträgst, wird dem Dateinamen beim Export hinzugefügt. Damit kannst du die exportierten Assets organisieren, ohne den Ebenennamen ändern zu müssen. Wenn du zum Beispiel einen Frame mit der Bezeichnung „HomePage“ als PNG exportierst und in diesem Feld „Entwurf“ eingibst, lautet der exportierte Dateiname „HomePageEntwurf.png“.

Formatspezifische Exporteinstellungen

Einige Formate unterstützen zusätzliche Exporteinstellungen. Klicke im Abschnitt „Export“ des Eigenschaftsfensters auf , um diese Einstellungen anzuzeigen und anzupassen.

In dieser Tabelle sind die Einstellungen für jedes Format aufgeführt:

Format	Ignore overlapping layers (Überlappende Ebenen ignorieren)	Include bounding box  (Begrenzungsrahmen einschließen)	Include “id” attribute (Attribut „id“ einbeziehen)	Outline text (Text fixieren)	Simplify stroke (Kontur vereinfachen)
PNG	✓	✓	✕	✕	✕
JPG	✓	✓	✕	✕	✕
SVG	✓	✓	✓	✓	✓
PDF	✕	✕	✕	✕	✕

Ignore overlapping layers (Überlappende Ebenen ignorieren)

Diese Einstellung ist standardmäßig aktiviert. Wenn sie aktiviert ist, schließt Figma nur die ausgewählten Ebenen in den Export ein. Alle anderen Objekte, die sich mit dem ausgewählten Objekt schneiden oder es überlappen, werden nicht exportiert. Wenn sie deaktiviert ist, schließt Figma alle Ebenen ein, die sich mit der ausgewählten Ebene oder Gruppe überschneiden.

Include bounding box (Begrenzungsrahmen einschließen)

Nur für Textebenen verfügbar. Wenn diese Option aktiviert ist, bestimmt Figma die Größe des Exports anhand des Begrenzungsrahmens der Textebene. Falls der Begrenzungsrahmen größer ist als der Text, schließt Figma den leeren Raum in den Export ein. Wenn er kleiner ist, schneidet Figma die Textteile, die außerhalb des Begrenzungsrahmens liegen, ab und verwirft sie.

Wenn diese Funktion deaktiviert ist, bestimmt Figma die Größe des Exports anhand der Abmessungen des Textes selbst. Figma beschneidet und verwirft jeglichen Raum zwischen den Zeichen und dem Begrenzungsrahmen.

Include "id" attribute (Attribut „id“ einbeziehen)

Wenn diese Funktion aktiviert ist, fügt Figma ein „id“-Tag zu den Metadaten der SVG-Datei hinzu. Damit kann JavaScript einfach auf das Element <svg> zugreifen und kann auch verwendet werden, um auf einen bestimmten id-Selektor in einem Style Sheet zu verweisen. Figma legt die „id“ auf den Namen des Objekts im Ebenen-Tab fest.

Outline text (Text fixieren)

Diese Einstellung ist standardmäßig aktiviert, wenn mindestens eine Textebene ausgewählt ist. Figma wandelt alle Textebenen in Glyphen um, damit das Erscheinungsbild erhalten bleibt. Wenn diese Einstellung aktiviert ist, kann der Text nach dem Export nicht mehr bearbeitet werden. Wenn du die Bearbeitung ermöglichen willst, deaktiviere diese Einstellung.

Kontur vereinfachen

Diese Einstellung ist standardmäßig aktiviert, wenn das ausgewählte Objekt ein Vektornetzwerk (keine Grundform) ist und eine innere oder äußere Kontur enthält. In Figma kannst du innere, zentrierte oder äußere Konturen auf ein Objekt anwenden. SVG unterstützt nur zentrierte Konturen. Diese Einstellung stellt sicher, dass andere Systeme innere und äußere Konturen richtig darstellen.