Für Designer, Ops und Frontend-Teams, die auf dem Mac Sketch oder Figma nutzen und PNG-Assets in Serie exportieren müssen, sind einheitliche Größen- und Benennungsnormen entscheidend. Unklare Spezifikationen führen zu Rückfragen, Nacharbeiten und verzögerter Ablieferung. Dieser Artikel liefert eine umsetzbare Schritt- und Prüf-Checkliste für den Batch-PNG-Export auf einem Remote Mac, inklusive @1x/@2x/@3x-Größen, Namensregeln sowie typischer Fehler bei Farbverschiebung und Auflösung.
Inhaltsverzeichnis
- Warum Größen- und Benennungsstandards die Ablieferungseffizienz beeinflussen
- Sketch/Figma Batch-PNG-Export: Häufige Einstellungen im Vergleich
- @1x/@2x/@3x und Größen-Spezifikationstabelle
- Benennungsregeln (Präfix/Suffix/Slice) und Prüfpunkte
- Ausführbare Schritte und empfohlener Workflow
- Häufige Export-Probleme: Farbverschiebung und Auflösung
- Zusammenfassung und nächste Schritte
Warum Größen- und Benennungsstandards die Ablieferungseffizienz beeinflussen
Inkonsistente PNG-Größen (z. B. gemischte @1x/@2x ohne Kennzeichnung) zwingen Frontend und Ops zu manueller Nachbearbeitung oder zu falsch skalierten Assets. Uneinheitliche Dateinamen erschweren Automatisierung, CDN-Caching und Versionskontrolle. Ein klares Größen- und Benennungs-Spec reduziert Rückfragen, beschleunigt die Abnahme und macht Batch-Exporte auf einem Remote Mac reproduzierbar – unabhängig davon, ob Sie lokal auf Windows oder Mac arbeiten.
Sketch/Figma Batch-PNG-Export: Häufige Einstellungen im Vergleich
Beide Tools unterstützen Mehrfach-Export und Skalierungsfaktoren; die Menüpfade und Optionen unterscheiden sich. Für einen einheitlichen Workflow auf dem Remote Mac lohnt es sich, die zentralen Parameter einmal festzulegen.
| Thema | Sketch | Figma |
|---|---|---|
| Skalierung | Export Presets: 1x, 2x, 3x (einzeln oder kombiniert) | Export: 1x, 2x, 3x, 4x pro Asset; Scale in Export-Einstellungen |
| Format | PNG, optional „Trim transparent pixels“ | PNG; „Include background“ für Transparenz deaktivieren |
| Batch-Auswahl | Mehrere Layers/Artboards markieren → Export-Liste | Frames/Components auswählen → Export mit gleichen Einstellungen |
| Namensgebung | Layer-/Slice-Name = Dateiname; Suffix z. B. @2x in Preset | Frame-/Node-Name = Dateiname; Suffix in Export-Settings (z. B. @2x) |
@1x/@2x/@3x und Größen-Spezifikationstabelle
Die Bezeichnungen @1x, @2x, @3x beziehen sich auf die physische Pixel-Dichte relativ zum Design-Canvas (logische Größe). Für die Abnahme und für Frontend müssen Sie wissen: Welche Pixelmaße erwarten wir pro Skalierungsstufe?
| Skalierung | Bedeutung | Beispiel (Design 100×100 pt) |
|---|---|---|
| @1x | 1 Design-Punkt = 1 Pixel | 100×100 px |
| @2x | 1 Design-Punkt = 2 Pixel (Retina) | 200×200 px |
| @3x | 1 Design-Punkt = 3 Pixel (hochauflösend) | 300×300 px |
Prüfpunkt: Nach dem Export die tatsächlichen Pixelmaße prüfen (z. B. mit sips -g pixelWidth -g pixelHeight <datei.png> auf dem Mac oder in Preview). So stellen Sie sicher, dass keine falsche Skalierung oder falscher Export-Multiplikator gewählt wurde.
Benennungsregeln (Präfix/Suffix/Slice) und Prüfpunkte
Für wiederholbare Pipelines und klare Abnahme sollten Sie Konventionen für Präfix, Suffix und Slice-Namen festlegen.
- Präfix: z. B. Modul oder Kategorie (
btn_,icon_,hero_). Einheitlich im ganzen Projekt. - Suffix: Skalierung im Dateinamen (
_@1x,_@2x,@2x.png). In Sketch/Figma oft über Export-Preset gesetzt. - Slice-/Layer-Namen: Keine Sonderzeichen, keine Leerzeichen; Bindestriche oder Unterstriche erlaubt. Namen = finale Dateinamen-Basis.
Checkliste Benennung: (1) Ein einheitliches Präfix-Schema? (2) @1x/@2x/@3x im Dateinamen oder Ordnerstruktur? (3) Keine doppelten Namen bei unterschiedlichen Inhalten? (4) Kleinbuchstaben und keine Umlaute in Dateinamen für maximale Kompatibilität?
Ausführbare Schritte und empfohlener Workflow
Folgende Reihenfolge eignet sich für einen wiederholbaren Batch-PNG-Export auf dem Remote Mac (Sketch oder Figma).
- Spec festlegen: Größen-Spec (@1x/@2x/@3x) und Benennungsregeln (Präfix/Suffix) im Team dokumentieren.
- Design-Assets vorbereiten: Frames/Layers/Slices mit finalen Namen versehen; Export-Presets in Sketch bzw. Export-Settings in Figma anlegen (1x, 2x, 3x).
- Transparenz prüfen: Hintergrund „transparent“, wo nötig; in Figma „Include background“ deaktivieren.
- Batch auswählen und exportieren: Alle relevanten Objekte markieren, einheitliche Einstellungen wählen, auf dem Remote Mac in einen festen Zielordner exportieren.
- Stichproben-Check: Größe (Pixelmaße), Transparenz (Alpha), Dateinamen und ggf. Farbprofil (sRGB) prüfen.
Für stabile Ergebnisse empfiehlt sich ein dedizierter Remote Mac (z. B. Mac mini M4): ein einheitliches System für alle Teammitglieder, konsistentes Farbprofil und keine Abweichungen durch lokale Windows/Mac-Unterschiede.
Häufige Export-Probleme: Farbverschiebung und Auflösung
Zwei typische Fallstricke beim Batch-PNG-Export:
- Farbverschiebung: Unterschiedliche Farbräume (z. B. P3 auf Mac vs. sRGB auf Windows) und Gamma-Interpretation führen zu abweichenden Farben. Lösung: Auf dem Remote Mac ein einheitliches Farbprofil (sRGB) einbetten; „Include background“ deaktivieren, um Transparenz nicht mit Hintergrundfarbe zu mischen.
- Falsche Auflösung/unscharf: Skalierungsfaktor nicht gesetzt oder Design-Größe (pt/px) missverstanden. Lösung: Export explizit mit 1x/2x/3x; Ausgabegröße = Design-Größe × Skalierung; nach Export Pixelmaße mit
sipsoder Preview prüfen.
Weitere Tipps: Große Batches auf schwacher lokaler Hardware vermeiden – Remote Mac entlastet die Arbeitsstation. Bei Abbruch oder fehlenden Dateien: Speicher und CPU auf dem Remote Mac prüfen, Batch in kleinere Chargen aufteilen.
Zusammenfassung und nächste Schritte
Für Designer, Ops und Frontend lohnt sich eine feste Größen- und Benennungs-Checkliste beim Batch-PNG-Export mit Sketch oder Figma. Klare @1x/@2x/@3x-Specs, einheitliche Präfix-/Suffix-Regeln und eine Stichproben-Prüfung von Größe, Transparenz und Farbprofil reduzieren Rückfragen und beschleunigen die Ablieferung. Ein Remote Mac sorgt für konsistente Export-Umgebung und entlastet lokale Rechner bei großen Stapeln.
Weitere Anleitungen: Technik-Insights (Blog-Übersicht), Startseite, Figma/Sketch Batch-PNG & Transparenz-Vergleich, Designer-FAQ Remote Mac M4 Batch-PNG. Sie möchten einen dedizierten Mac für Design-Export und einheitliche Assets? Jetzt Mac mieten – Preise & Knoten und Hilfe & Anleitung für Zugang und Einrichtung.
Remote-Mac für Sketch-/Figma-Batch-PNG und einheitliche Ablieferung
Mieten Sie eine Mac M4 Instanz für wiederholbare Batch-Exporte mit konsistenten Größen- und Benennungsstandards – ohne Anmeldung auf der Website.