Дизайнеры, операторы и специалисты по обработке фронтенд-материалов, которые пакетно экспортируют PNG на удалённом Mac из Sketch или Figma, часто сталкиваются с одними и теми же проблемами: неверные размеры в пикселях, несогласованные имена файлов, сдвиг цветов или неожиданное разрешение. В этом материале — пошаговый чеклист и список проверок, чтобы зафиксировать стандарты размеров и правила именования и уверенно запускать экспорт.
Содержание
- Почему стандарты размеров и именования влияют на эффективность поставки
- Сравнение типичных настроек пакетного экспорта PNG в Sketch и Figma
- @1x / @2x / @3x и таблица стандартов размеров
- Именование (префикс, суффикс, правила слайсов) и пункты проверки
- Выполняемые шаги и рекомендуемый рабочий процесс
- Типичные проблемы: сдвиг цветов и разрешение при экспорте
Почему стандарты размеров и именования влияют на эффективность поставки
Несогласованные размеры экспорта и имена файлов приводят к переделкам: фронтенд вынужден менять размеры или переименовывать ассеты, дизайн — переэкспортировать, а версионирование усложняется. Когда все придерживаются одних правил по размерам и именованию — особенно при экспорте на удалённом Mac, которым пользуются несколько человек — передача материалов ускоряется, автоматизация (скрипты, дизайн-системы) работает предсказуемо, а тестирование опирается на чёткий чеклист. Заранее заданные @1x/@2x/@3x и единый шаблон именования (префикс/суффикс/правила слайсов) превращают пакетный экспорт PNG в повторяемый и масштабируемый процесс.
Сравнение типичных настроек пакетного экспорта PNG в Sketch и Figma
Оба инструмента поддерживают пакетный экспорт в PNG; окна настроек отличаются. Согласуйте параметры так, чтобы результат был взаимозаменяемым и предсказуемым.
| Параметр | Sketch | Figma |
|---|---|---|
| Формат | PNG (32-бит для прозрачности) | PNG (экспорт с прозрачностью) |
| Масштаб | 1x, 2x, 3x в Make Exportable | 1x, 2x, 3x в настройках экспорта |
| Цветовой профиль | Документ / sRGB; встраивать в экспорт | sRGB (встраивать в экспорт) |
| Именование | Имя слоя + суффикс (напр. @2x) | Имя фрейма/слоя + суффикс масштаба |
| Пакетный экспорт | Export All / Export Selected | Экспорт выделенного или всей страницы |
На удалённом Mac используйте один инструмент (или один конвейер экспорта) на проект, чтобы имена файлов и масштабы оставались единообразными. Перед пакетным экспортом задайте в документе цвет sRGB и «встраивать профиль» в обоих приложениях.
@1x / @2x / @3x и таблица стандартов размеров
Холст в дизайне обычно задаётся в @1x (логические пункты). Масштабы экспорта определяют фактические размеры в пикселях. Используйте таблицу ниже как справочник для проверки.
| Масштаб | Применение | Размер в пикселях (пример: 100×100 pt) |
|---|---|---|
| @1x | Стандартная плотность, устаревшие ассеты | 100×100 px |
| @2x | Retina / HiDPI (часто по умолчанию) | 200×200 px |
| @3x | Высокоплотные мобильные и большие экраны | 300×300 px |
Чеклист: (1) Согласуйте с разработкой/продуктом, какие масштабы поставлять. (2) В Sketch/Figma включите в пресете экспорта только эти масштабы. (3) После экспорта выборочно проверьте размеры одного ассета в пикселях (например, в «Просмотре» или через sips на Mac) по этой таблице.
Именование (префикс, суффикс, правила слайсов) и пункты проверки
Стабильное именование делает автоматизацию и передачу материалов надёжными. Определите и проверяйте следующее.
- Префикс: например
icon_,btn_илиmodule_. Используйте один префикс на тип ассета, чтобы скрипты и дизайн-системы могли фильтровать. - Суффикс: суффикс масштаба стандартен:
@1x,@2x,@3x(или_1x,_2x,_3x, если конвейер ожидает подчёркивания). Держите его единым в Sketch и Figma. - Имена слайсов/слоёв: называйте артборды или слои так, чтобы итоговое имя файла было осмысленным (напр.
icon_home→[email protected]). Избегайте пробелов и спецсимволов; используйте нижний регистр и подчёркивания.
Проверка: после пакетного экспорта выполните быстрый контроль: (1) все имена файлов соответствуют принятому шаблону префикса/суффикса; (2) нет дублирующихся базовых имён для одного масштаба; (3) количество файлов совпадает с ожидаемым (напр. 3 масштаба × N ассетов).
Выполняемые шаги и рекомендуемый рабочий процесс
Используйте эту последовательность на удалённом Mac, чтобы каждый пакетный экспорт был воспроизводимым.
- Задать стандарты документа: холст в пунктах @1x; цветовой режим RGB; профиль sRGB, встроенный.
- Определить пресет экспорта: PNG, 32-бит при необходимости прозрачности; включить только @1x, @2x и/или @3x в зависимости от проекта.
- Именовать слои/фреймы: применить префикс + описательное имя (напр.
icon_close); инструмент добавит суффикс масштаба. - Запустить пакетный экспорт: «Export all» или «Export selection» в одну выходную папку.
- Проверить: размер в пикселях и имя одного файла; затем просмотреть папку по именованию и количеству.
- Поставить: архив или выгрузка из той же папки, чтобы фронтенд получил один согласованный набор.
Типичные проблемы: сдвиг цветов и разрешение при экспорте
Две частые проблемы после пакетного экспорта PNG:
- Сдвиг цветов: разная гамма или профиль между дизайн-приложением и вебом. Решение: экспорт в sRGB с встроенным профилем; не используйте «профиль документа», если документ не в sRGB. На удалённом Mac держите один цветовой конвейер (macOS + одна версия приложения) для всех экспортов.
- Неверное разрешение или размытость: масштаб экспорта выставлен в 1x, когда ожидался 2x, или холст задан в пикселях вместо пунктов. Решение: задайте холст в пунктах @1x; выберите 2x/3x в диалоге экспорта и проверьте размеры одного файла в пикселях. При работе на удалённом Mac убедитесь, что масштабирование дисплея не меняет «логический» размер холста в приложении.
Быстрая проверка: откройте один экспортированный PNG в браузере или другом приложении на другом устройстве; если цвет или резкость выглядят неправильно, переэкспортируйте с встроенным sRGB и верным масштабом.
Используйте удалённый Mac для согласованного пакетного экспорта PNG из Sketch/Figma
Зафиксируйте стандарты размеров и именования на выделенном удалённом Mac: единая среда для всей команды, без различий между локальными машинами и предсказуемый вывод @1x/@2x/@3x. Арендуйте Mac mini M4 помесячно, подключайтесь по SSH или VNC и запускайте пакетный экспорт без нагрузки на рабочую станцию.