Лайфхаки процесса экспорта исходников в Sketch

Когда я использовал Photoshop или Illustrator в своем рабочем процессе, мне приходилось делать всевозможные трюки, чтобы убедиться, что файлы попали в правильную папку с правильным именем. Вы знаете, порядок вещей. Бесконечный процесс выбора правильных артбордов или слоев для экспорта, сохранение диалогов, настройки результатов, перезапись файлов, перетаскивание в нужную папку ресурсов. Тьфу. У Sketch есть несколько трюков в рукаве, что делает этот процесс до смешного легким и последовательным. Вы можете использовать имя слоя, чтобы указать каталог, в который будут экспортироваться ресурсы? Ага! Это один из моих любимых фокусов Sketch! Допустим, вы сделали эту супер классную иконку. [caption id="attachment_35801" align="aligncenter" width="446"] Вы правы — это и есть супер классная иконка![/caption] Вы настроили её для экспорта в SVG (хорошая работа!). Здорово! Вы можете использовать имя слоя не только, чтобы задать имя файла (myIcon), но также и папки сохранения данных! [caption id="attachment_35803" align="aligncenter" width="614"] Эти имена слоев выглядят немного необычно — почти как путь к файлу…[/caption] Sketch ужасно умный в этом плане тоже!

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

Посмотрите на эту конфигурацию: Посмотрите, куда все эти ресурсы будут вместе экспортироваться

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

Когда дело доходит до экспорта, выберите ресурсы, которые вы хотите экспортировать, а затем используйте File > Export (⇧+⌘+E) для экспорта только выделенных ресурсов. [caption id="attachment_35805" align="aligncenter" width="800"] Ага — Я хочу эту иконку во всех этих местах![/caption] Выберите путь, куда бы вы хотели экспортировать ресурсы: [caption id="attachment_35806" align="aligncenter" width="800"] “Demo” — Через полгода я однозначно вспомню, что это за папка…[/caption] В моем случае все будет экспортироваться относительно каталога “Демо”!

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

Вы можете использовать похожий трюк внутри панели экспорта! Она будет экспортировать SVG во все эти папки (как и прежде), плюс создаст pngs папку и поместит туда все эти папки/файлы. В результате множество файлов с разными папками. Sketch жутко крут. Вы можете сэкономить кучу времени и избежать раздражения, настроив свою структуру внутри Sketch, а затем пусть ваш компьютер все отсортирует для вас. В конце концов, разве компьютеры не предназначены для этого? Дайте знать, если вы знаете другие прикольные хитрости по экспорту с помощью Sketch! http://ux.pub/podgotovka-i-eksport-svg-ikonok-v-sketch/

Перевод статьи Steve Stone