Экосистема Sketch
19 июня 2015
Мы перестали работать с интерфейсами в Фотошопе, начиная
с конца 2014. Скетч лучше подходит для этого и делает работу быстрее, но нравится в нем не только это. Интересна экосистема, которая сейчас рождается. Её не дал разработчикам Adobe из-за закрытости и непонимания потребностей разработчиков.

Этот материал об инструментах, которые мы используем
вместе со Скетчем.
Invision, Flinto и Marvel

Эти сервисы решают задачу «оживления» карты экранов приложения. До того как они появились было принято делать полотно из экранов со стрелками между ними, которое в пору было распечатывать на A1. Один раз мы так делали. Однако без динамики нельзя проверить целостность интерфейса приложения. Работая на дизайном мы сразу создаем прототип, экраны должны взаимодействовать на устройстве. Как говорят дизайнеры, Invision — лучший из сервисов. Вернее, он наименее плох и лучше подходит для проектов, в которых более пятидесяти экранов. Для проектов по-меньше хорошо подходит Flinto. Marvel — несовершенная копия Invision. У каждого сервиса есть интеграция со Sketch, это позволяет обновлять прототип автоматически.




Zeplin

Чтобы сверстать интерфейс, раньше приходилось делать графические спецификации. В этом помогали плагины к Photoshop, например, PNG EXPRESS. Для каждого экрана приходилось делать отдельный png файл, описывающий цвета, гарнитуры, размеры. Сейчас эту работу берет на себя Zeplin, недавно они вышли из beta. Макеты Sketch автоматически экспортируются в веб-сервис, в котором разработчик видит отступы, шрифты и цвета. Это сокращает время работы и позволяет сделать pixel-perfect верстку. Так же Zepline позволяет разработчикам нарезать графику.



Origami

Facebook сделал потрясающее средство для прототипирования анимаций iOS, Android и HTML, интегрированное со Sketch. Origami подходит для описания простых анимаций в рамках одного экрана. Например, после нажатия кнопка превращение в иконку с текстом. Крутое отличие от аналогов — кодогенерация, появившаяся во второй версии. Сгенерированный код с константами нельзя вставить в приложение «как есть», но его использование ускоряет реализацию анимации и убирает «испорченный телефон» между дизайнерами и разработчиками. Еще не попробовали Origami в продакшене, но поработали с примерами и внедрим при первой возможности.



Dropbox

Это не совсем относится к Sketch. Все макеты дизайна хранятся в Dropbox. Для работы над макетом дизайнер делает локальную копию файла. После внесения изменений в макет, копирует измененный арт-борд обратно в общий файл. Не изящно, но это работает, когда над проектом работает команда дизайнеров. Нарезку также храним в Dropbox в отдельной папке, откуда её берут разработчики. Мы пробовали работать с системами контроля версий для дизайна, например, закрывшимся LayerVault, купленным Dropbox Pixelapse, но отказались от них. Дизайнерам важна простая синхронизация, а не контроль версий. А разработчикам нужна актуальная нарезка. Сервисы контроля версий усложняли работу. Dropbox — пока самое жизнеспособное решение.




Экосистема Sketch

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

CAST
автор
Владимир Макеев

дизайнер и арт-директор
Максим Собковский
Другие материалы