Как открыть макет из Sketch на Windows и Linux

Раньше некоторые верстальщики с Windows и Linux были против макетов в Sketch, потому что открыть их сложно или невозможно. Но недавно запустилось приложение Avocode App (http://avocode.com), которое позволяет делать это без лишних трудов. Я решила проверить процесс сама.

Качаем Avocode

Вот оно — https://manager.avocode.com/downloads. Сразу же — создание учетки. В разархивированной папке будет файл приложения. В приложении тоже надо будет залогиниться, но это происходит почти без участия пользователя.

Установка Avocode на Windows
Приложение авторизует тебя “само” через браузерные редиректы

Загружаем свой проект

Все файлы в Avocode объединены в проекты (можно считать это просто папкой). Но залить sketch-файл в проект из Windows нельзя. В учетной записи в Avocode уже должен быть расшаренный дизайнером проект. То есть совсем без мака (где будут все шрифты из макета) сейчас обойтись нельзя. Загрузить из дропбокса тоже не получится.

Пока не поддерживается

Через плагин к самому скетчу (https://avocode.zendesk.com/hc/en-us/articles/202196441) можно загрузить скетч-файлы в проект (плагин Avocode поддерживается только с версии 3.1). Ставить плагин просто. Нужно довериться редиректам и подсказкам, и нажимать всегда на самые заметные кнопки. Впрочем, это уже к верстальщику напрямую не относится.


Вытаскиваем стили и картинки

После этого нужно зайти в свои проекты в программе и синхронизировать их с учеткой. Еще в Avocode есть демо-макет, на котором можно посмотреть, как и что устроено. Из макетов можно вытаскивать стили, делать экспорт .png, jpg, .svg, смотреть расстояния между объектами.

Экспорт картинок: переименование файла, выбор размера и формата
Стили текста в Avocode на Ubuntu

В Avocode нельзя изменять объекты, а я думаю, такая привычка есть у многих. Например, мне обычно хочется подвигать маску объекта. Но можно скрывать элемент через панель слоев аналогично другим графическим редакторам.

Макет с несколькими артбордами открывается в режиме превью, а фон между ними прозрачный. Для работы с конкретным артбордом Avocode открывает отдельную вкладку.

Между артбордами — прозрачность

Прямо в приложении есть 4 понятных видео-туториала о начале работы и базовых операциях.


Следим за версиями

С помощью плагина для скетча дизайнер сможет обновлять существующие макеты (Sync Updates). В веб-менеджере Avocode это называется revisions, а каждая последняя версия будет помечаться как current.

Sync Updates

По сути, для дизайнера Avocode — это хранилище. Но нужно следить за шрифтами в приложении. Нельзя, например, передавать макеты менеджеру, чтобы он залил их в Avocode со своего макбука: если в системе нет нужных шрифтов, макет загрузится и отобразится некорректно.


Для теста я использовала макеты с ресурса SketchAppSources sketchappsources.com/easy-one-page-layout и sketchappsources.com/android-material-design-ui-kit-sketch-freebie-rsource.