2026 Mac: матрица доставки дизайна — Figma Auto Layout, экспорт PNG: пиксельное выравнивание, целочисленные масштабы и приёмка пакетов на удалённом M4

Для более широкой передачи макетов — именование, шкалы и типовые ошибки — см. чеклист пакетного экспорта PNG из Sketch/Figma, рабочий процесс параметров экспорта Affinity, Sketch и Figma и автоименование PNG и пакетную валидацию в OpenClaw. Детали цветового контура — в чеклисте sRGB и Display P3 и материале про ICC и безпотерьное пересжатие.

Боли и типовые сценарии

Auto Layout распределяет отступы и размеры с дробной математикой; браузеры и инструменты дизайна по-разному округляют координаты на этапе растеризации. Типичные сбои, с которыми сталкиваются команды доставки UI-графики и фронтенд-ассетов:

• «Мыльные» иконки и обводки: фрейм 24×24 pt фактически получается 23,7 px по ширине при 1× — антиалиасинг размазывает контур глифа.
• Щели в один пиксель между слайсами: соседние экспортируемые фреймы отличаются на доли пикселя; при фоне в CSS или спрайт-листе появляется мерцающая линия.
• Неверные размеры @2x: выгружают только 1× или задают кастомный масштаб (например 1,5×), который нельзя чисто сопоставить с srcset и соглашениями по именам.
• Уход цвета: в файлах нет встроенного профиля sRGB; Safari, Chrome и превью Figma по-разному показывают нейтрали.

В пакетной поставке один испорченный фрейм ломает автоматизацию: watch-папки, навыки OpenClaw и манифесты с контрольными суммами. Выделенный удалённый Mac с фиксированной сборкой Figma для десктопа и одним профилем дисплея снижает разброс «у меня на ноутбуке работало» — логично сочетать с сценарием водяного знака, checksum и архива экспорта Figma.

Таблица параметров экспорта PNG (матрица для команды)

Используйте таблицу как единый источник правды для UI-слайсов в PNG. Исключения (например полноразмерный маркетинговый арт) документируйте в README релиза.

Правило @1x / @2x / @3x (кратко): проектируйте в логическом 1× в пунктах. Ширина и высота файлов должны совпадать с round(ширина_pt × scale) и аналогично по высоте при scale ∈ {1, 2, 3}. Если фрейм 100×40 pt, ожидаются 100×40, 200×80 и 300×120 px — не 199×79 из-за скрытого дробного Auto Layout.

Чеклист приёмки sRGB и ICC

• В файле Figma для веб/Android handoff задайте цветовой профиль документа sRGB.
• После экспорта выборочно проверьте на узле Mac командой sips -g profile или через exiftool; отклоняйте батчи без встроенного sRGB, если пайплайн это требует.
• Маркетинговые ассеты только в P3 храните в отдельной папке — не смешивайте с набором UI PNG по умолчанию.

Мини-таблица: критерии пакетной приёмки

Пакетная валидация на удалённом M4

Выполняйте шаги на удалённом Mac mini M4, чтобы ноутбуки оставались свободными, а версии Figma, шрифтов и CLI совпадали у всей команды.

1. Заморозка до экспорта: зафиксируйте сборку Figma Desktop, версии шрифтов и профиль дисплея macOS; добавьте заметку в README каталога экспорта.
2. Ворота по размерам: для каждого масштаба проверьте pixelWidth = frameWidth_pt × scale (и высоту аналогично). Любое «странное» число — открыть фрейм в Figma и устранить дробные позиции или ограничения Auto Layout.
3. Правило чётных сторон (опционально, жёсткие команды): для полноэкранных фонов требуйте чётные ширина и высота — проще видео- и текстурные цепочки.
4. Выборка по альфе и швам: откройте ~5% файлов в Preview с масштабом 400%; убедитесь, что нет нежелательного полупрозрачного ореола (часто от вложенной непрозрачности или режимов наложения).
5. Выборка ICC: проверка профиля на 10% или на всех иконках — по требованиям комплаенса бренда.
6. Манифест: запишите имя файла → sha256 → WxH в JSON и приложите к поставке; повторный экспорт только для упавших идентификаторов.
7. Архив: упакуйте папки с датой; при использовании OpenClaw согласуйте с watch, retry и архивом логов.

Согласованность между инструментами

Figma редко бывает единственным звеном. Сохраняйте паритет со Sketch или Affinity, договорившись о: (1) сетке 1× в пунктах, (2) одинаковом наборе масштабов в проекте, (3) общем соглашении по именам (например [email protected]), (4) единой политике sRGB. Когда инженеры подключают те же PNG в Xcode, Android Studio и веб-репозиторий, целые размеры и встроенные профили предотвращают скрытое масштабирование. Сравнение прозрачности при смешанном стеке — в материале Figma и Sketch про прозрачность PNG.

FAQ

Почему @2x в Figma выглядит резче, чем в браузере? Превью холста Figma и интерполяция изображений в Chrome работают по-разному. Ориентируйтесь на экспортированный файл: откройте его в Preview в масштабе 100%, замерьте пиксели, затем загрузите в целевой браузер с CSS-шириной, соответствующей 1× в pt.

Можно ли оставлять дробные отступы в Auto Layout? Для вёрстки прототипа — да; для растрового экспорта привяжите экспортируемые фреймы к целым пикселям. Отступы могут быть дробными, если границы экспорта остаются целыми.

Помогает ли «Outline stroke» от размытия? Иногда — для чистых векторных обводок. Может сломать сценарии с живым выравниванием штриха; протестируйте на одной иконке до массовой конверсии.

Сжимать PNG до передачи? Только без потерь (например oxipng) и только после успешной приёмки; фиксируйте дельты по байтам. Сравнение подходов — в ImageOptim и CLI при пакетном сжатии.