2026 Mac Design-Liefermatrix: Figma Auto Layout — PNG-Pixelausrichtung, ganzzahlige Skalen & Remote-M4-Batch-Abnahme

Für breitere Übergabe-Patterns — Sketch/Figma-Benennung, Skalentabellen und typische Fallen — siehe die Batch-PNG-Export-Checkliste Sketch/Figma, den Workflow Affinity, Sketch & Figma: Export-Parameter sowie OpenClaw: PNG-Auto-Naming & Batch-Validierung. Farbpipeline vertiefend: sRGB / Display-P3-Checkliste und ICC-Metadaten & verlustfreies Rekomprimieren.

Schmerzpunkte & typische Szenarien

Auto Layout verteilt Abstände mit fraktionaler Mathematik; Browser und Designtools runden beim Rastern unterschiedlich. Typische Fehlerbilder in der Praxis:

• Weiche Icons und Striche: Ein 24×24-pt-Icon sitzt in einem 23,7 px breiten Frame bei 1× — Anti-Alias verwischt die Glyphe.
• „Haarlinien“-Spalten zwischen Slices: Benachbarte Export-Frames unterscheiden sich um Bruchteile eines Pixels; background-size-Kacheln oder Sprite-Sheets zeigen einen Ein-Pixel-Flimmer.
• Falsche @2x-Maße: Es wird nur 1× exportiert oder eine Sonder-Skala (z. B. 1,5×) genutzt — srcset und Asset-Pipelines lassen sich nicht sauber abbilden.
• Farbdrift: Dateien ohne eingebettetes sRGB-ICC; Safari, Chrome und die Figma-Vorschau interpretieren Neutrale unterschiedlich.

In Batch-Lieferungen potenzieren sich diese Effekte: Ein fehlerhafter Frame vergiftet Automation (Watch-Folder, OpenClaw, Manifest-Checksummen). Ein dedizierter Remote Mac mit eingefrorener Figma-Desktop-Version und einem dokumentierten Display-Profil reduziert die Varianz von „bei mir geht’s“ — sinnvoll zusammen mit dem Playbook Figma-Exportordner: Wasserzeichen & Archiv.

Für Frontend-Teams bedeutet das: Lieferkriterien müssen maschinenlesbar sein (erwartete Pixelbreite/-höhe pro Skala, Profil-Whitelist, Benennungskonvention). Nur so lassen sich Regressionen in CI oder nächtlichen Skriptläufen zuverlässig erkennen.

Export-Parametertabelle (Entscheidungsmatrix)

Die folgende Tabelle ist die Single Source of Truth für UI-PNG-Slices. Ausnahmen (z. B. Marketing-Full-Bleed) nur nach schriftlicher Freigabe und in getrennten Ordnern.

Kurzregel @1x / @2x / @3x: Design im logischen 1× (Points). Exportierte Breite und Höhe müssen round(frame_breite_pt × scale) entsprechen mit scale ∈ {1, 2, 3}. Beispiel: Frame 100×40 pt → erwartete PNGs 100×40, 200×80, 300×120 px — nicht 199×79 wegen versteckter fraktionaler Layout-Werte.

sRGB- & ICC-Abnahme (Kurz-Checkliste)

• Figma-Dateifarbraum für Web/Android-Handoff auf sRGB setzen.
• Nach Export Stichprobe mit sips -g profile oder exiftool auf dem Mac-Knoten; Chargen ohne eingebettetes sRGB-Profil ablehnen, wenn die Pipeline das vorschreibt.
• P3-only-Marketing-Assets separat labeln — nicht mit Standard-UI-PNG-Sets mischen.

Batch-Validierungsablauf (Remote M4)

Führen Sie diese Schritte auf einem Remote Mac mini M4 aus: Laptops bleiben frei, alle nutzen dieselben Tool-Versionen. Der Ablauf ist bewusst ausführbar formuliert — jeder Punkt liefert ein klares Ja/Nein.

1. Pre-Export einfrieren: Figma-Desktop-Build, Font-Versionen und macOS-Displayprofil notieren; in einer README im Exportordner committen.
2. Dimension-Gate: Pro Skala prüfen: pixelWidth = frameWidth_pt × scale (analog Höhe). Ungerade Werte flaggen; Frame in Figma öffnen und Auto-Layout-Constraints oder fraktionale Positionen korrigieren.
3. Regel „gerade Kanten“ (optional, strikt): Für Full-Bleed-Hintergründe gerade Maße fordern — vereinfacht Video- und Textur-Mip-Ketten.
4. Alpha-Naht-Stichprobe: 5 % der Dateien in der Vorschau bei 400 % — keine unbeabsichtigten Halbtransparent-„Halos“ auf Vollflächen (häufig: verschachtelte Deckkraft oder Mischmodi).
5. ICC-Stichprobe: Profil-Check bei 10 % oder bei allen Icons — je nach Marken-Vorgabe.
6. Manifest: JSON Dateiname → sha256 → B×H an die Lieferung anhängen; nur fehlgeschlagene IDs neu exportieren.
7. Archiv: Datums-Ordner tarren; an Watch / Retry / Log-Archiv anbinden, falls OpenClaw im Einsatz ist.

Konsistenz über Design-Tools hinweg

Figma ist selten die einzige Oberfläche. Parität mit Sketch oder Affinity erreichen Sie durch: (1) gemeinsames 1×-Designraster in Points, (2) identisches Skalen-Set pro Projekt, (3) einheitliche Benennung (z. B. [email protected]) und (4) eine sRGB-Policy. Wenn Ingenieure dieselbe PNG in Xcode, Android Studio und dem Web-Repo importieren, verhindern ganzzahlige Maße und eingebettete Profile stilles Resampling. Transparenz-Verhalten im Dual-Tool-Setup: Figma vs. Sketch — Transparenz-Vergleich.

Frontend-seitig lohnt es, eine Quelle der Wahrheit für erlaubte Dateiendungen, maximale Dateigröße pro Slot und erlaubte Farbprofile zu pflegen — die Remote-Mac-Validierung wird dann zur mechanischen Durchsetzung dieser Policy, nicht zur Diskussion im Ticket.

FAQ

Warum wirkt @2x in Figma schärfer als im Browser? Die Canvas-Vorschau skaliert anders als die Bildinterpolation im Browser. Maßgeblich ist die exportierte Datei: in der Vorschau bei 100 % öffnen, Pixel messen, dann im Zielbrowser mit CSS-Breite = 1×-pt-Größe laden.

Darf Auto Layout fraktionale Abstände behalten? Für Entwicklung ja; für Raster-Export müssen die Exportgrenzen ganzzahlig sein. Abstände dürfen fraktional sein, solange der ausgeschnittene Rahmen auf Pixelgrenzen sitzt.

Hilft „Outline stroke“ gegen Unschärfe? Manchmal — bei reinen Vektorstrichen. Es kann brechen, wenn Sie auf live Stroke-Ausrichtung angewiesen sind; vor Batch-Konvertierung ein Icon testen.

PNG vor Übergabe komprimieren? Nur verlustfrei (z. B. oxipng) nach bestandener QA; Byte-Deltas loggen. Strukturierter Vergleich: ImageOptim vs. CLI-Kompression.