···

    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.

    Hinweis: Figma unterstützt 32-Bit-PNG-Dateien, die das RGBA-Farbmodell verwenden. Das A in RGBA bezieht sich auf den Alphakanal, der die Deckkraft eines Pixels steuert. Es ist nicht möglich, PNG-Dateien ohne einen Alphawert zu exportieren.

    Folgende Exporteinstellungen sind für PNG verfügbar:

    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.

    Tipp: Mit der Pixelvorschau-Option kannst du dir eine Vorschau ansehen, wie deine Entwürfe in einem gerasterten Format aussehen werden. Erfahre mehr über die Pixelvorschau →

    Folgende Exporteinstellungen sind für JPG verfügbar:

    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.

    Hinweis: Beachte beim Export als SVG-Datei die folgenden Punkte:

    • Winkel- oder Rautenverläufe: Figma exportiert diese als radiale Verläufe
    • Hintergrundunschärfe: Du musst die Ebene direkt unscharf machen
    • Text: 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)
    • Konturen: Figma exportiert Konturen als Füllungen

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

    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.

    Hinweis: Figma exportiert Text als Glyphen, was bedeutet, dass du den Text in der fertigen PDF-Datei nicht bearbeiten kannst. Wenn du die PDF-Datei im Browser oder einer anderen kompatiblen Software öffnest, kannst du den Text trotzdem auswählen und kopieren.

    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.

    Note: Du wirst feststellen, dass die optische Größe eines Bildes, das mit Faktor 2x exportiert wurde, nicht erhöht wird, wenn du es wieder in Figma importierst. Das liegt daran, dass Figma davon ausgeht, dass Bilder mit einer DPI von 144 in Designs für Bildschirme mit hoher Pixeldichte verwendet werden, und sie automatisch auf die Hälfte skaliert, um dies zu berücksichtigen. Erfahre mehr über das Importieren von Inhalten in Figma →

    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.

    Additional_export_settings__2_.png

    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.

    Exportierst du ein Slice? Die Einstellung Ignore overlapping layers (Überlappende Ebenen ignorieren) funktioniert bei Slices anders als bei anderen Objekten. Wenn „Ignore overlapping layers“ aktiviert ist und die Slices innerhalb eines Rahmens oder einer Gruppe enthalten sind, exportiert Figma nur den Inhalt, der sich im selben Container wie die Slices befindet und visuell innerhalb der Slice-Grenzen liegt.

    Wenn Ignore overlapping layers deaktiviert ist, werden alle Inhalte, die sich visuell innerhalb der Slice-Grenzen befinden, exportiert. Wenn das Slice nicht in einem Rahmen oder einer Gruppe enthalten ist, hat das Aktivieren oder Deaktivieren der Einstellung „Überlappende Ebenen ignorieren“ keine Auswirkungen. Alle Inhalte, die sichtbar innerhalb der Slice-Grenzen liegen, werden exportiert.

    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.

    Hinweis: Wenn du diese Einstellung deaktivierst, erhöht Figma die Stärke der Konturen und wendet eine Maske an. Dadurch wird das gleiche visuelle Ergebnis erzielt, Figma muss jedoch zusätzliche Zeilen in den SVG-Code einfügen.

    Related Videos