Designer und Frontend-Verantwortliche nutzen Figma Dev Mode, um Abstände und Absicht zu kommunizieren — doch die annotierte Slice-PNG, die Sie liefern, muss weiterhin harte Rasterregeln erfüllen: ganzzahlige Rahmen, ausschließlich ganzzahlige @1×/@2×/@3×-Skalen, genau eine sRGB-Vereinbarung und vorhersagbare Dateinamen. Dieser Text ist eine Liefer-Entscheidungsmatrix für 2026: wo Dev Mode hilft, wo er trügt, und wie Sie dieselbe Batch-Abnahme auf einem Remote Mac mini M4 ausführen, damit QA reproduzierbar bleibt und Tickets nicht an unterschiedlichen Laptop-Vorschauen hängen bleiben.
Drei wiederkehrende Brüche erzeugen Nacharbeit. Erstens: fraktionales Layout innerhalb eines Slices exportiert bei 2× und 3× weiche Kanten oder ungerade Breiten. Zweitens: Vorschau versus Datei — Dev Mode und der Browser skalieren nicht identisch; Teams diskutieren „Schärfe“, während die PNG auf der Platte bereits falsch ist. Drittens: stilles Farbdriften, wenn ICC-Policies zwischen Handoff-ZIP und Windows-Review-Rechnern nicht einheitlich sind. Ergänzend zur Tool-Matrix vergleichen Sie Alpha-Verhalten mit dem Artikel Figma vs. Sketch — Transparenz beim PNG-Export; für Profil-Gates dient die sRGB-/Display-P3-Checkliste. Nach Transcodierung und Byte-Verträgen hilft die WebP→PNG-Liefermatrix als Referenz für reproduzierbare CLI-Pfade.
Inhaltsverzeichnis
Exportparameter-Tabelle
Dev Mode beschleunigt die Inspektion, aber das Export-Preset bleibt der Vertrag. Übernehmen Sie die Tabelle wörtlich in Ihre Handoff-README, bevor jemand auf Export klickt — so entfallen Diskussionen darüber, ob „noch schnell 1,5ד erlaubt sei.
| Parameter | Empfehlung (Web / App-UI) | Hinweise |
|---|---|---|
| Format | PNG (8-Bit RGBA) | JPEG ist für harte UI-Kanten und Transparenz untauglich. |
| Skalen | nur 1×, 2×, 3× | Eigene Prozentwerte brechen Ganzzahl-Erwartungen für srcset und CI-Validatoren. |
| Rahmengrenzen | Ganzzahlige X, Y, Breite, Höhe bei 1× | Subpixel-Ursprünge summieren sich bei höheren Skalen und verwischen Striche. |
| Farbe | Eine sRGB-Regel (ICC einbetten oder profilfrei mit schriftlicher Policy) | Doppelprofile durch Plugins oder Nachbearbeitung ablehnen. |
| Hintergrund | Transparent oder Vollton gemäß Spec | „Hintergrund einblenden“ zerstört oft die Alpha-QA. |
| Slice-Benennung | Komponente_Zustand@2x.png, an Design-Tokens gekoppelt |
Ebenenname = Dateiname; Leerzeichen vermeiden, wenn der Bundler streng ist. |
Zitierfähige README-Regeln: (1) Logische Designbreite in Punkten entspricht exportierter 1×-Breite in Pixeln. (2) Bei Skala s erwarten Sie round(rahmen_breite × s) mit s ∈ {1, 2, 3}. (3) Jeder als transparent markierte Slice muss Alpha tragen — flache Deckexporte sind ein Fehler, kein Stilmittel.
Pixelgenauigkeit ist mehr als „am Raster ausrichten“: Sie müssen auch festlegen, ob Striche innen, mittig oder außen am Slice-Rand liegen und ob Schatten in die Exportbox einfließen. Jede dieser Entscheidungen verschiebt die Bounding Box um ein Pixel — Dev Mode zeigt brauchbare Zahlen, aber nur, wenn dieselbe geometrische Definition später im CSS (box-sizing, outline, filter) nachvollzogen wird. Dokumentieren Sie deshalb neben der Tabelle einen Satz zur Referenzkante (Frame-Kante versus sichtbare Pixelkante); bei komplexen Symbolen ergänzen Sie einen Verweis auf die Auto-Layout-PNG-Pixel-Checkliste im Technik-Insights-Blog, damit neue Teammitglieder nicht raten müssen.
Für Design-Tokens und Code-Splitting lohnt sich ein stabiles Präfixschema: z. B. ui.icon.close.default@2x.png statt frei gewählter Ebenennamen. Frontend kann dann per Glob importieren; QA erkennt fehlende Zustände sofort am Dateinamen. Wenn Sie mehrere Marken in einer Datei pflegen, trennen Sie Marken-Präfixe strikt — gemischte Ordner sind die häufigste Ursache für „falsches Logo, richtiger Dateiname“. Die drei harten Gates aus dem Kasten unten (ganzzahlige Skalen, sRGB, Slice-Namen) bleiben dabei Ihre schnellste Vorabkontrolle vor jedem Batch-Export.
Batch-Abnahme-Checkliste
Führen Sie dieselben Schritte auf einem Remote Mac mini M4 aus, damit lokale Figma-Sitzungen flüssig bleiben und CI dieselbe Realität wie die manuelle QA sieht. Apple Silicon macht sips, identify und kleine Python-Validatoren selbst bei Hunderten Dateien günstig in CPU-Zeit.
Legen Sie auf dem Remote-Knoten gepinnte Tool-Versionen fest (ImageMagick, libpng-Helfer, ggf. exiftool). Ein Major-Upgrade ohne Regressionsset hat schon oft eingebettete ICC-Fragmente oder Alpha-Premultiplikation leise geändert. Parallelität: starten Sie nicht mehr Worker, als Kerne minus Reserve für UI/Figma sinnvoll erlauben — stabile Laufzeiten schlagen kurze Spitzen, wenn Tickets ohnehin an deterministischen Logs hängen. Die Checkliste unten ist bewusst maschinenlesbar formuliert, damit Sie sie 1:1 in YAML-Gates oder einfache Shell-Schleifen übersetzen können.
- Manifest-Parität: exportierte Dateizahl entspricht der Slice-Liste; keine Duplikate, keine fehlenden Skalen.
- Geometrie-Gate: jede PNG-Breite und -Höhe entspricht logischen Rahmenpixeln multipliziert mit der Skala — Toleranz null, sofern nicht ausdrücklich anders dokumentiert.
- Alpha-Sonde: bei Transparent-Specs Histogramm oder Stichprobe; in der Vorschau 400 % auf Halo-Effekte durch verschachtelte Deckkraft achten.
- sRGB-Gate: ICC- bzw. Colorspace-Tags mit ImageMagick oder exiftool stichprobenweise lesen und mit README abgleichen; Batch bei erstem Drift fail, außer benannter Ausnahmeordner.
- Namens-Lint: Präfix, Zustandssuffix,
@2x-Token und verbotene Zeichen per kurzem Shell-Skript erzwingen. - Byte-Obergrenze: optional pro SKU
max_bytes; wenn verlustbehaftete Nachkompression erlaubt ist, pngquant-/oxipng-Version neben dem Manifest dokumentieren. - Audit-Log: sha256, Tool-Versionen und Pass/Fail an JSONL anhängen; nur grüne Dateien nach
out/für Engineering verschieben.
Wenn Sie Ordner-Watches oder Agenten ketten, nutzen Sie dieselben Log-Felder wie in anderen MacPng-Playbooks — Operatoren können dann projektübergreifend greppen. Ziel: Ist das Skript grün, stimmt Design der Raster-Vereinbarung zu — ohne Screenshot-Streit.
FAQ
Zeigt Dev Mode dieselben Pixel wie Produktion? Es ist eine gute Annäherung, kein Bodenwahrheit-Viewer. Bewerten Sie die exportierte PNG immer bei 100 % in einer neutralen App und im Zielbrowser mit CSS-Logikgrößen. Zusätzlich lohnt ein kurzer Abgleich auf einem Referenz-Viewport (z. B. 375 × 812 und 1440 × 900), weil Subpixel-Rendering von Schriften die wahrgenommene Schärfe neben Icons beeinflusst, ohne die Icon-PNG selbst zu ändern.
Soll man CSS-Werte aus Dev Mode 1:1 in Code übernehmen? Als Hinweis ja, dann auf das vereinbarte Spacing-Raster runden. Fraktionale Werte in Layout-Systeme zu kopieren, die pro Plattform unterschiedlich snappen, reproduziert genau die Ein-Pixel-Fehler, die Sie vermeiden wollen. Wenn Design und Frontend dasselbe Raster (z. B. 4 px oder 8 px) fixieren, sinkt die Streuung der „fast gleich“-Tickets deutlich.
Wie verhalten sich Anmerkungen zu automatischen Watchdogs? Overlays landen typischerweise nicht im Raster-Export — Ausnahme: Pipelines, die ganze Frames rasterisieren. Zeigen Watchdogs nur auf den Komponenten-Slice-Ordner, nicht auf Vollbild-Captures.
Dürfen Designer individuelle Export-Prozentwerte setzen? Nur, wenn Engineering ausdrücklich nicht-srcset-basierte Pfade einsetzt und CI die nicht-ganzzahligen Maße kennt. Für Standard-Web-UI gilt: nein — die Tabelle oben bleibt die Leitplanke.
Wann reicht profilfreies sRGB? Wenn der gesamte Stack sRGB ohne ICC-Auswertung rendert und Sie die Interpretation schriftlich fixieren. Sobald ein Teil der Pipeline (Druck, Windows-Viewer, ältere Electron-Builds) ICC erwartet, ist Einbetten meist die geringere Friktion — aber nur einmal, ohne zweite Konvertierung.
Nächste Schritte
Der Technik-Insights-Index, die MacPng-Startseite, Pakete & Preise sowie Hilfe zu SSH/VNC sind ohne Anmeldung lesbar — Stakeholder können Pakete abstimmen, bevor ein Konto angelegt wird. Mieten und Kaufen: Kaufen / Mieten.
Export und QA auf einem Apple-Silicon-Knoten pinnen
Dev-Mode-Presets einfrieren, Batch-Gates auf einem M4-mini fahren und PNG-Slices liefern, die Engineering beim ersten Mal akzeptiert.