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

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

How to use Sympli Xcode plugin from Sympli on Vimeo.

Дизайнер

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

Sympli - загрузка дизайна в облако одной кнопкой
Sympli — загрузка дизайна в облако одной кнопкой

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

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

Sympli - дизайн в облаке
Sympli — дизайн в облаке

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

Программист

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

Плагин Sympli в Xcode
Плагин Sympli в Xcode

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

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

Относительность координат при переносе элемента из плагина на экран
Относительность координат при переносе элемента из плагина на экран

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

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

Sympli - комментирование дизайна
Sympli — комментирование дизайна

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

Sympli - версионность
Sympli — версионность

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

Symply - версионность
Symply — версионность

Менеджер

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

Итог

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

Автор

Егор