Когда я использовал Photoshop или Illustrator в своем рабочем процессе, мне приходилось делать всевозможные трюки, чтобы убедиться, что файлы попали в правильную папку с правильным именем. Вы знаете, порядок вещей. Бесконечный процесс выбора правильных артбордов или слоев для экспорта, сохранение диалогов, настройки результатов, перезапись файлов, перетаскивание в нужную папку ресурсов. Тьфу.

У Sketch есть несколько трюков в рукаве, что делает этот процесс до смешного легким и последовательным. Вы можете использовать имя слоя, чтобы указать каталог, в который будут экспортироваться ресурсы? Ага! Это один из моих любимых фокусов Sketch!

Допустим, вы сделали эту супер классную иконку.

Фишки процесса экспорта исходников в Sketch, фото норме -1
Вы правы — это и есть супер классная иконка!

Вы настроили её для экспорта в SVG (хорошая работа!).

Фишки процесса экспорта исходников в Sketch, фото норме -2
Здорово!

Вы можете использовать имя слоя не только, чтобы задать имя файла (myIcon), но также и папки сохранения данных!

Фишки процесса экспорта исходников в Sketch, фото норме -3
Эти имена слоев выглядят немного необычно — почти как путь к файлу…

Sketch ужасно умный в этом плане тоже!

  • Он автоматически перезапишет ваши файлы по умолчанию.
  • Если каталог не существует, он создаст его для вас.
  • Если имя слоя имеет несколько / , то он создаст все необходимые каталоги, которые ему нужны.
  • Он даже распознает../ в качестве родительского каталога и будет переходить дальше! Вы даже можете делать сумасшедший сложный путь: ../../myFolderTwoFoldersBack.

Посмотрите на эту конфигурацию:

Фишки процесса экспорта исходников в Sketch, фото норме -4
Посмотрите, куда все эти ресурсы будут вместе экспортироваться

Как экспортировать

Когда дело доходит до экспорта, выберите ресурсы, которые вы хотите экспортировать, а затем используйте File > Export (⇧+⌘+E) для экспорта только выделенных ресурсов.

Фишки процесса экспорта исходников в Sketch, фото норме -5
Ага — Я хочу эту иконку во всех этих местах!

Выберите путь, куда бы вы хотели экспортировать ресурсы:

Фишки процесса экспорта исходников в Sketch, фото норме -6
“Demo” — Через полгода я однозначно вспомню, что это за папка…

В моем случае все будет экспортироваться относительно каталога “Демо”!

Бонусная фишка экспорта

Вы можете использовать похожий трюк внутри панели экспорта! Она будет экспортировать SVG во все эти папки (как и прежде), плюс создаст pngs папку и поместит туда все эти папки/файлы.

Фишки процесса экспорта исходников в Sketch, фото норме -7
В результате множество файлов с разными папками.

Sketch жутко крут. Вы можете сэкономить кучу времени и избежать раздражения, настроив свою структуру внутри Sketch, а затем пусть ваш компьютер все отсортирует для вас. В конце концов, разве компьютеры не предназначены для этого?

Дайте знать, если вы знаете другие прикольные хитрости по экспорту с помощью Sketch!

Подготовка и экспорт SVG-иконок в Sketch