Sympli – простая совместная работа дизайнера и программиста

Наткнулся случайно на сервис Sympli, посмотрел ролики, скачал плагины и быстренько повторил то, что показано было в этих коротких роликах. Я в восторге.

How to use Sympli Xcode plugin from Sympli on Vimeo.

Дизайнер

Во-первых, всё действительно просто. Одной кнопкой через плагин экспортируется дизайн из Sketch, всё само и быстро. Дизайн уходит в облако.

Всё, от дизайнера больше ничего не требуется! Ни резать макет, ни экспортировать наборы иконок в разных масштаба: ни-че-го!

Я, как разработчик, могу добавить, что всякие инструменты по проставлению прямо на дизайне каких-то размеров, линеек и прочих сторонних, не имеющих отношения к дизайну элементов – только путает дизайнера и разработчика. Если экран действительно сложный по верстке или анимациям – вам необходим другой инструмент, а именно инструмент для прототипирования. Особенности же вёрстки, например, поведение Auto Layout, всё равно нужно обговаривать письменно в отдельном сопроводительном письме или в общем дизайн-документе.

Прямо в облаке есть возможность просмотреть параметры элемента: размер и местоположение, режим смешивания цветов, тип и параметры заливки, прозрачность, параметры текста, тени и эффекты… Есть очень удобная линейка, которая позволяет делать измерения относительно любого места экрана. Класс!

Программист

Теперь поговорим о программисте. Sympli предлагает установить плагин в Xcode. Плагин добавляет свою кнопку на тулбар Xcode, кнопка включает и выключает отображение панели плагина, её можно включить на любом файле, не только для Storyboard. Это удобно, потому что далеко не всегда интерфейс создается в Interface Builder.

С помощью плагина программист может не имея под рукой ни Sketch, ни Photoshop работать с дизайном, заботливо загруженным дизайнером в облако прямо из этих замечательных, но платных программ.

Элементы можно перетаскивать прямо на создаваемые экраны из плагина, тогда будет создаваться соответствующий компонент со всеми стилями и на нужном месте. Так как сервис пока что в бете, то есть проблемы с некоторым поведением. Например, ожидаешь, что при переносе элемента из плагина во вложенный UIView позиция элемента будет перенесена соответственно его же позиции относительно родителя в группе слоёв в дизайне, но она выставляется абсолютной, относительно верхнего левого угла экрана. Но этот недостаток легко исправляется благодаря уже упомянутой удобной линейке. В принципе, понятно даже откуда он происходит: часто группы слоёв в дизайне не отражают реальной структуры представлений в реальной программе, невозможно каждый раз угадать, где же у данной группы настоящий координатный «ноль».

Но бог с ним, с драг-эн-дропом, есть более крутая вещь – это инспектор свойств всех элементов дизайна. Его можно видеть справа на скриншоте выше. Выбираете любой элемент в Interface Builder и соответствующий в плагине Sympli и легко можете переносить его свойства, нажимая кнопку Apply. Даже копипастить ничего не надо или запоминать постоянно RBG коды цветов (что довольно сильно раздражает обычно). Есть возможность выбрать язык проекта: Swift или Objective-C, чтобы копировать автоматически сгенерированные строки кода с цветом из дизайна:

// swift
UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 1.0);
// objective-c
[UIColor colorWithRed: 52/255.0 green: 170/255.0 blue: 220/255.0 alpha: 1.0]

Есть возможность добавлений комментариев в виде горячих точек прямо на дизайне:и  на веб-платформе, и в Xcode их можно добавлять, читать и отвечать сразу же. Мини-чат такой. Обновляются автоматически.

Есть даже версионность! Допустим, дизайнер снова загрузил файл в облако, но чуть изменённый. Новая версия в плагине в Xcode помечена синей точкой (как приложения на iOS). При попытке открыть документ плагин предупредит о новой версии:

Чтобы быстро обозреть изменения есть небольшая утилита превью, выбираете нужные версии и между их рендерами можно быстро переключаться:

Менеджер

И напоследок, несколько слов о работе менеджера. Хоть я и не управленец, но могу предположить, что если наладить работу команды через Sympli, легко получить новые возможности по контролю за совместной работой, иметь общую картину проекта (с точки зрения дизайна), в любой момент вклиниться в общение дизайнера и программиста и вносить свои коррективы. В общем, портить им двоим их сладкую жизнь станет легче! =)

Итог

Тулза – огонь, бегите пробовать!