Как сделать спецификацию в sketch
Полное руководство по началу работы в Sketch с бесплатной шпаргалкой
Неважно, полный ли вы новичок, дизайнер на обучении, опытный профи, который переключается на новый продукт, — это статья для вас.
Во-первых, мы немного познакомимся со Sketch — что это такое, чем он завоевал свою популярность, как получить бесплатную триал-версию и установить приложение на Mac. Во-вторых, изучим интерфейс Sketch, я поясню основы и покажу некоторые фишки и приемы. В-третьих, мы коснемся более продвинутых функций приложения (кривые Безье, блендинг особенно впечатляют).
И, наконец, я поделюсь качественными ресурсами по Sketch, включая бесплатную шпаргалку на 99 пунктов, с которой очень удобно учиться работе в приложении. Звучит неплохо?
1. Почему Sketch
Некоторое время после релиза в 2010 году Sketch расценивался как легковесный инструмент для редактирования графики, с помощью которого дизайнеры UI и UX могли быстренько прототипировать дизайн приложений.
Сейчас Sketch гордо продается как визуальным, мобильным, иконочным, веб и продуктовым дизайнерам, и я думаю, это всего лишь вопрос времени, пока его разработчики, Bohemian Coding, с уверенностью не начнут ориентировать свой продукт и на иллюстраторов и художников.
Что такое Sketch?
Sketch — одна программа из группы под названием “векторные графические редакторы”. Другие представители этой категории — Adobe Illustrator, CorelDRAW и OpenOffice Draw.
Векторный редактор отличается от пиксельных (растровых) редакторов. В пиксельном графическом редакторе (например, Adobe Photoshop, GIMP или Microsoft Paint), когда вы рисуете фигуру, сохраняется масса данных о каждом пикселе, что со стороны выглядит как круг:
Но в векторном редакторе вроде Sketch сохраняется только математическая основа самой фигуры. На практике это означает, что вы можете масштабировать вектор, сколько угодно и никогда не увидите никакой потери в качестве изображения. Дизайнеры и иллюстраторы обычно отдают предпочтение исключительно векторам, потому что их всегда можно конвертировать в пиксели. Куда сложнее пойти обратным путем.
В Sketch, только если вы не вставите пиксельную графику, например, фото, все слои векторные. Каждый объект состоит из опорных точек и кривых, которые можно просмотреть и отредактировать, кликнув дважды на фигуре. Но мы к этому еще вернемся!
Все хорошее — компактно
Более того, постоянная программа Bohemian Coding по улучшению ПО означает, что, когда появляются баги, их довольно быстро фиксят.
Официальный соперник Sketch, Adobe Illustrator, существует на рынке с 1987 года (!) и остается стандартом в индустрии традиционных дизайн-студий. Но для дизайнеров новой генерации Sketch дает огромную возможность изучить основы и достичь отличных результатов.
Учиться дизайну в Sketch быстро, окупаемо, и весело!
2. Начало работы в Sketch
Сначала скачайте Sketch
Если вы совсем новичок, посетите страничку Getting Started на официальном сайте Sketch. Sketch будет работать на любом Mac-е с OS X El Capitan (10.11) или выше, и вы можете скачать бесплатную 30-дневную триал-версию.
Постарайтесь не заблудиться в интерфейсе
Когда работаете в Sketch, большую часть времени вам придется смотреть на вот такой экран. Это скриншот с надписями на основных разделах интерфейса и пояснением, что они делают.
Вот более детальное объяснение функционала каждого раздела:
Далее, ознакомьтесь с некоторыми важными командами
a. Создание артбордов
Когда вы открываете Sketch первый раз, у вас будет пустой канвас. Первым делом, вам наверняка захочется создать артборд, что позволит держать дизайны в порядке. Вы можете создавать столько артбордов, сколько хотите, на одной странице.
Чтобы создать новый артборд, нажмите “Insert” на панели инструментов, затем выделите “Artboard”, кликните на прямоугольник и перетяните мышкой на холст. Или же можете просто нажать “A” на клавиатуре, а затем кликнуть и потянуть.
b. Рисование фигур
Проще всего начать рисовать фигуры посредством горячих клавиш. (Не забудьте, впереди вас ждет шпаргалка из 100+ горячих клавиш!)
С помощью кнопки “Insert” в панели инструментов вы можете получить доступ к большему набору разных фигур типа звезды, многоугольника, треугольника и т.д. Вот тут я рисую звезду:
с. Выравнивание и распределение объектов
Когда я только начал работать в Sketch, я влюбился в их кнопки выравнивания и распределения, которые живут вверху панели Инспектора. Вот что они делают:
Распределить по горизонтали
Уравнивает горизонтальные отступы между выделением из 3 или более объектов.
Распределить по вертикали
Уравнивает вертикальные отступы между выделением из 3 или более объектов.
Выравнивание по левому краю
Выравнивает левые края 2 или более выделенных объектов.
Выравнивание по горизонтали
Выравнивает горизонтальные центры выделения из 2 или более объектов.
Выравнивание по правому краю
Выравнивает правые края 2 или более выделенных объектов.
Выравнивание по верху
Выравнивает верхние края 2 или более выделенных объектов.
Выравнивание по вертикали
Выравнивает вертикальные центры выделения 2 или более объектов.
Выравнивание по низу
Выравнивает нижние края 2 или более выделенных объектов
Эти команды выполняют две критически важные функции. Во-первых, они помогают вам работать эффективно, так как вы можете быстро создать кучу объектов и затем выровнять и распределить их равномерно всего за пару кликов. Теперь никаких отчаянных перетаскиваний объектов точно в нужных пиксель! И, во-вторых, они помогают очистить композицию в конце дизайн-процесса, так как вы точно знаете, что все элементы точно позиционированы и распределены, все на своих местах.
Вот пример, как я использую выравнивание по левому краю (кнопка “Align left”):
d. Дублирование слоев и артбордов
В Sketch очень легко дублировать слои и артборды. Кликните правой кнопкой мышкой на любом объекте, выберите опцию “Duplicate”, чтобы создать копию поверх оригинала. Как вариант, просто выделите объект и нажмите команду + D, или просто удерживайте alt, а затем перетяните объект, который хотите скопировать. Вот я дублирую свою звезду:
Дублирование артбордов также важно в налаживании продуктивного дизайн-процесса. Дублируя артборд после каждого важного изменения, вы всегда можете легко вернуться на более раннюю версию без необходимости пользоваться опцией “Undo” сотни раз:
e. Еще несколько подсказок по главным опциям в Sketch
Эта серия советов по Sketch поможет освоить программу и улучшить свою продуктивность:
И, наконец проработайте эти уроки по Sketch. Они на русском языке
Серия уроков от Marc Andrew
Создание мобильных приложений в Sketch от Marc Andrew
Если вам нужны еще уроки и советы по началу работы в Sketch, вы найдете их в разделе “Дополнительные ресурсы” в конце этого поста.
3. Более продвинутые приемы работы в Sketch
Как только вы справитесь с основами, настанет время перейти к более продвинутым возможностям, доступным Sketch-пользователям!
Освоение кривых Безье
Питер Новел написал шикарную статью о работе с кривыми Безье. Он описывает важные принципы работы с этим видом объектов, поясняет разницу между разными элементами управления, дает практические советы по работе с этим векторным инструментом в Sketch. Ознакомьтесь!
Sketch позволяет создавать собственные “символы”. Это означает, что вы можете сохранить слой или группу слоев как символ, и затем вставлять его в документ, как если бы это была простая фигура.
Особенными символы делает то, что вы можете кликнуть дважды на “сущности” символа, отредактировать “главный” символ, и все сущности этого символа в документе будут автоматически обновлены. На этой GIF-ке я создаю символ в форме листочка, вставляю еще две его сущности, и затем меняю непрозрачность родительского символа. Посмотрите, как остальные меняются:
Продвинутые опции ресайза
Когда работаете с сгруппированными объектами, может понадобиться, чтобы объекты в группе вели себя по-разному при ресайзе. Для каждого объекта внутри группы Sketch позволяет выбрать свой метод ресайза.
Вот возможные опции:
Детальнее о режимах блендинга
Использование Sketch для печатного дизайна!
Для тех, кто быстрее и более продуктивно работает в Sketch, имеет смысл подготавливать и печатные документы в этой программе вместо какого-то специализированного пакета вроде Adobe InDesign. В этой потрясающей статье Питер Новелл поясняет, как использовать Illustrator для подготовки PDF, который был создан в Sketch для печати.
Испытайте свои навыки в этих мини-проектах
Создание иконок в Sketch
Создание иллюстраций в Sketch
4. Дополнительные ресурсы
Обязательно для изучения
Скачайте шпаргалку из 99 горячих клавиш для Sketch!
Если эта статья показалась вам полезной, почему бы не скачать эту шпаргалку? Сохраните эту PDF-ку на компьютере для быстрых справок, или ее можно распечатать и прикрепить на стене у монитора.
Как вам Sketch? Как ваши успехи в работе с этой программой? Делитесь в комментариях!
Про Sketch: как сэкономить время в работе с таблицами и диаграммами
Так как язык оригинала английский, мы перевели для вас основную информацию. Если Вы хотите ознакомиться с полным текстом, перейдите по ссылке в конце поста.
Автор – дизайнер многочисленных мобильных и веб-приложений, он работает со Sketch уже довольно долго и заметил, что кучу времени у него отнимает именно возня с данными: визуализацией таблиц, диаграмм и графиков.
Создание круговых и кольцевых диаграмм
Для создания подобных диаграмм, автор использует два различных, каждый из которых по-своему удобен
Все данные вводятся в одном текстовом поле, поэтому их легко можно скопировать и вставить, скажем, из Excel.
— Использование Angular Gradients (Углового градиента)
Метод очень полезен, когда нужно быстро изменить значения без перерисовки всей диаграммы. Просто добавляем круг и применяем угловой градиент в качестве фона, затем добавляем 2 color-stop для каждого сегмента и выровняйте их соответствующим образом. Затем просто копируете и корректируете стиль каждого круга и настраиваете color stop.
Создание линейных диаграмм
Экономьте время – используйте тот же Excel. Просто создайте там линейную диаграмму и экспортируйте ее в виде PDF. При открытии PDF с помощью Sketch Вы можете выбрать каждый элемент отдельно, так как они экспортируются в виде векторной графики и организованы в группы слоев. Если же у Вас пока нет данных для генерации диаграммы, возьмите рандомные числа, используя RANDBETWEEN функцию.
-Создание символов для точек и общих стилей линий
В настройке линейных диаграмм особенно раздражает поиск и выбор правильных слоев для настройки. Чтобы максимально автоматизировать этот шаг, создавайте символы для каждой цветной линии. Таким образом, Вы всегда сможете обновить такие аспекты, как цвет и ширина границы для всех графиков в дизайне, просто обновив символ или общий стиль.
-Сделайте их изменяемыми!
С тех пор, как вышла версия 39, стало возможным создание легко масштабируемых дизайнов без искажения элементов, однако применение правил изменения размера к элементам линейного графика – это очень хорошая идея, ведь в один прекрасный день некоторые размеры родительского контейнера могут измениться.
—Распределяйте слои и векторные точки
При рисовании линии диаграммы вручную, используйте вертикальную и горизонтальную функцию распределения для расположения точек данных, линий для оси х, и всех меток, таким образом, чтобы между ними оставалось одинаковое пространство.
Таблицы
Обычно работа с таблицами осложняется тем, что изменение любого столбца, строки или даже содержимого ячейки влияет на все прочие элементы и может испортить общий вид. В итоге, добрая сотня текстовых и векторных слоев уходит на то, чтобы задать нужные параметры для каждого из них. В Скетче эта проблема устранена: программа предоставляет возможность определять размер для каждой ячейки в отдельности. Благодаря этому нововведению и возможности применять общий стиль к ряду элементов, оформить таблицу можно намного проще и быстрее.
-Организация ячеек и столбцов
Для того, чтобы правила изменения размера работали правильно, все элементы контента, такие как текст, кнопки, ячейки фона и границ, должны быть сгруппированы. Фон клеток, а также текст ячейки должны быть в положении «Изменение размера объекта», а элементы (например, стрелки индикатора сортировки), которые должны быть прижаты к левой или правой границе, должны быть установлены в положение «Pin to corner».
— Уменьшите количество слоев
— Создание контента
Наиболее трудоемкой задачей при дизайне таблицы является заполнение каждой строки индивидуальными данными. С помощью продукта Craft, мы можем автоматизировать эту задачу полностью.
— Заполните клетки реальными данными вашего API
При работе над дизайном, например, для веб или IOS приложения, которые уже имеют базу данных и API, который обслуживает контент с помощью JSON, Вы можете импортировать реальные данные с помощью панели данных Craft.
Если API является открытым, вы можете просто импортировать JSON, вставив URL для вызова API. Если API требует ключ или аутентификацию, Вам необходимо скачать файл в формате JSON и импортировать его вручную, так как эскиз интеграции еще не поддерживает аутентификацию. После успешного импорта данных в формате JSON, выберите текстовый слой, а затем присвойте значение JSON из представленного дерева данных. Повторите эту процедуру для каждой ячейки, а затем продолжайте дублировать строку столько, сколько нужно. При дублировании строк программа будет заполнить каждую ячейку таблицы реальными данными из API.
Обзор инструментов для создания дизайн-спецификаций: Avocode, Sympli и Zeplin
Разработчик интерфейсов Ник Бабич поделился с редакцией рубрики «Интерфейсы» колонкой, в которой сравнил три инструмента для совместной работы дизайнеров и фронтенд-разработчиков они готовят спецификации и позволяют сравнивать разные версии дизайна. Он рассказал об их интерфейсе и функциях и сделал вывод, для каких ситуаций подходит каждый из инструментов.
Дизайнеры, разработчики и менеджеры часто работают в сжатых временных рамках и вынуждены вести несколько проектов одновременно. Кроме этого, команда должна быстро давать обратную связь для своих заказчиков или клиентов. Малейшее изменение продукта в контексте пользовательского интерфейса или взаимодействия с продуктом на уровне пользовательского взаимодействия должны находить отражение в документации, чтобы у дизайнеров и разработчиков всегда была актуальная информация о продукте.
Наличие стайлгайда значительно сокращает вероятность того, что команда столкнется с серьезными проблемами, воплощая дизайн в жизнь. Но важно не столько наличие гайда, сколько его актуальность. Неактуальная или противоречивая информация может ввести в ступор самого опытного разработчика: ему придется гадать, как правильно определить тот или иной элемент пользовательского интерфейса в коде. Это отнимает много сил и времени и превращается в бесконечную головную боль для команды (особенно если в разработке находится сложное приложение).
В этой статье мы рассмотрим процесс создания стайлгайда, процедуру передачи дизайна и моменты взаимодействия между участниками команды. Мы также пройдемся по улучшенному взаимодействию и покажем, как могут помочь дизайнерам и разработчикам хорошие инструменты.
Проектная команда
Как правило, программный продукт разрабатывает команда из дизайнеров, разработчиков и проектных менеджеров. У каждого участника команды есть свои специфические потребности.
Дизайнеры
Когда дизайнер подготовил макет, он передает его разработчику. Часто это выглядит просто как экспорт PNG и подготовка спецификации со всеми необходимыми аннотациями. Для большого проекта подготовка спецификации может быть большой головной болью, потому что дизайн может часто меняться. Таким образом, традиционные (статичные) стайлгайды устаревают практически мгновенно.
Подготовка спецификации ужасно утомительна, и если она делается вручную, то занимает ужасно много времени. Кроме того, каждый дизайнер делает её по-разному. В конечном счете многие дизайнеры больше занимаются подготовкой спецификации, а не дизайном. Каждая минута, которую дизайнер тратит на проработку документации, — это потерянная минута, а ведь ее можно было использовать, чтобы улучшить существующий макет или приступить к новому.
Если вы хотите сберечь время и нервы дизайнеров — просто сделайте так, чтобы они не занимались подготовкой спецификации.
Разработчики
Изучение спецификации — это не праздник. Разработчикам часто приходится уточнять у дизайнеров информацию о деталях, которые недостаточно хорошо описаны в спецификации, или, хуже того, пользоваться Photoshop и Sketch, чтобы получить эти сведения.
В большинстве случаев они вынуждены вручную преобразовать все размеры активов в соответствии с требованиями платформы (например, преобразование пикселей в точки, не зависящие от плотности и масштаба экрана). Часто у них нет достаточно подробных данных о визуальном дизайне — они вынуждены додумывать детали, а это приводит к визуальным несоответствиям.
Даже если разработчик успешно воплотил в жизнь изначальный дизайн, есть вероятность, что он изменится и разработчику предстоит пройти по всем кругам ада снова. Это совсем не гибкий подход.
Менеджер
Роль проектного менеджера предполагает организацию наиболее эффективных процессов, и в первую очередь это касается взаимодействия между всеми участниками команды. Все в команде должны быть одинаково осведомлены об изменениях в дизайне. Многие проекты создают распределенные команды, и это вынуждает менеджеров создавать единый канал для взаимодействия.
Современные инструменты, такие как Slack, позволяют создать такой канал, но это не решает главную проблему — необходимость отслеживать изменения и предоставлять по ним обратную связь. Все менеджеры знают, что такое беспорядочные письма с кучей вложений по изменениям в дизайне от всех членов команды.
Менеджеры должны быть осведомлены о текущем состоянии продукта. Они должны оставаться на вершине процесса проектирования и иметь возможность в одном месте просматривать любые изменения, легко сравнивать, как выглядят разные версии дизайна, и в реальном времени их обсуждать.
Оптимизируем работу дизайнеров и разработчиков
Создание спецификации для дизайна включает в себя определение размеров элементов, их положения, цветовых схем, шрифтов, расстояния между элементами и кучу других характеристик и свойств объектов. Каждый элемент дизайна несет в себе перечень характеристик, которые нужно учитывать и отражать в спецификации.
Нужен мост между дизайном и разработкой — инструмент, который бы упростил и ускорил подготовку спецификации и разработку продукта в целом, а также гарантировал бы, что вы (дизайнер, разработчик, менеджер) избавитесь от вечного вопроса: «А где посмотреть последнюю доработку по дизайну?».
К счастью, такие инструменты существуют. Они используют макеты Photoshop или Sketch и автоматически готовят спецификации для разработчиков. Эти спецификации включают в себя фрагменты кода и графические объекты (иконки и изображения). Инструменты также позволяют отслеживать изменения между версиями дизайна.
Что это за инструменты и как они работают
Это Avocode, Sympli и Zeplin. Они позиционируются как инструменты для совместной работы дизайнеров пользовательских интерфейсов и фронтенд-разработчиков и нацелены на процесс перевода макета из Photoshop или Sketch в код. Нужно просто загрузить макет дизайна, и инструменты превратят его в спецификацию и стайлгайд, который будет адаптирован под нужды вашей платформы. Эти инструменты позволяют:
Дизайнеры и разработчики работают в едином пространстве, где размеры элементов, цвета и расстояния между элементами свободно адаптируются под каждого из участников команды. Больше не нужно готовить огромное описание этих деталей — инструменты делают всю эту работу автоматически.
Повторю, что это инструменты для просмотра, а не для редактирования или интерактивного прототипирования. Это не редакторы изображений, они не позволяют создавать новые дизайны или прототипы. Чтобы представить изначальный дизайн, потребуются Photoshop или Sketch.
Avocode
Этот инструмент ориентирован в большей степени на веб-разработку. Процесс создания сайта начинается с дизайна в Photoshop или Sketch. Однако, как только дизайнер завершит готовить макет, фронтенд-разработчик будет готов приступить к разработке. Для этого у него будут все необходимое: макет будет превращен в спецификацию с отдельными изображениями и CSS-стилями. Создатели Avocode называют его мостом между дизайнерами и разработчиками.
Первые шаги
Прежде чем начать использовать Avocode, нужно зарегистрироваться и получить аккаунт. Avocode не предоставляет бесплатных аккаунтов под один-два проекта, и на знакомство с продуктом у вас будет только две недели триального периода.
Сервис состоит из двух частей: веб-менеджер и десктопное приложение. Avocode работает с дизайн-макетами в рамках проекта, и первым делом необходимо будет создать свой проект. Чтобы понять, что из себя представляют проекты, можно посмотреть демо-проект, который будет создан при регистрации аккаунта (по сути это лендинг).
Как загрузить свой дизайн
После создания проекта нужно будет загрузить дизайн. Есть два варианта: подключить свой аккаунт Dropbox и указать файл дизайна оттуда — или загрузить свой дизайн с локальной машины.
Пользовательский интерфейс
Теперь можно понять, какие плюсы дает Avocode. Для этого нужно установить десктопное приложение. Веб-приложение Avocode ограничено в функциональности и не подходит для инспектирования дизайна в деталях — оно позволяет только отслеживать глобальные изменения дизайна (такие как ревизии) и комментарии к ним.
Итак, вы установили и запустили Avocode. Ваше первое ощущение — очень знакомый интерфейс, похожий на Photoshop: те же цветовые схемы и схожесть расположения инструментов.
В основном окне вы увидите название своего проекта с миниатюрной проекцией его дизайна и датой последней активности.
Дважды кликнув по проекту, вы перейдете к детальному описанию дизайна: перечню слоев, групп элементов и их свойств — в общем, всему, что представляет собой PSD-файл. Внизу вы увидите перечень доступных инструментов.
Первый инструмент, который мы будем использовать, называется Select Tool. С помощью него можно выделять любой слой и получать детальную информацию по его свойствам в правой панели.
Давайте выделим слой с кнопкой call to action. Сайдбар мгновенно показывает CSS для нее. Как бонус, Avocode дает нам возможность копировать свойства в виде Less/Sass-кода:
Остальные инструменты мы рассмотрим в следующей секции, а пока давайте еще немного узнаем о пользовательском интерфейсе и возможностях Avocode.
Avocode легко решает такую частую задачу, как получение изображения в разных разрешениях. Экспорт изображений работает просто превосходно, можно задать правила, которые позволят выгружать изображения в самых разных конфигурациях (например, в форматах JPG, PNG, SVG или пропорциях 1x, 2x, 4x).
Панель информации в левой части экрана очень важна для проработки дизайна. Используя ее, вы можете, например, получить список шрифтов со ссылками на них в Adobe Typekit и Google Web Fonts.
Инструменты
Очень удобен Measure Tool. С помощью него можно выделять элементы и видеть расстояние относительно других элементов. Возьмем для примера выделенный слой с кнопкой Get started now.
Следующий инструмент — Color Picker. Он оправдывает свое название, так как позволяет определить и скопировать цвет с его HEX-кодом в клипборд. Значения цветов можно добавить как свойство проекта. Это позволит создавать цветовые схемы для своих дизайнов — огромное преимущество для тех, у кого в работе несколько проектов.
И напоследок — инструмент Slice. Он позволяет сделать экспорт выделенного участка макета как изображение или как стилевую схему:
Для каждого из инструментов есть «горячие клавиши», что очень полезно для продвинутых пользователей.
За рамками основного набора инструментов есть отличная функция — направляющие для макета. Те, кто использует Avocode впервые, могут удивиться наличию такой возможности: она спрятана за маленькой кнопкой в правом нижнем углу экрана. Avocode поддерживает и направляющие, созданные в Photoshop или Sketch, и те, что пользователь создал сам. Если у вас есть направляющие в оригинальном документе — не сомневайтесь, что они появятся и в Avocode.
Вернемся к веб-приложению. Может показаться, что его функция лишь декоративная, но это не так. Avocode позволяет визуально сравнивать две ревизии, и эта функциональность доступна в веб-приложении — менеджеры должны быть в восторге.
Взаимодействие
Avocode позволяет оставлять комментарии к отдельным участкам дизайна. Это дает возможность обсуждать дизайн прямо в контексте макета. Все участники проекта сразу получают об этом уведомления.
Стоимость продукта
Sympli
Sympli — это не просто инструмент для передачи дизайна, а полноценная платформа для совместной работы, которая идеально вписывается в стандартный процесс разработки продукта, включая процессы передачи макетов Photoshop (поддержка XD появится в ближайшее время) или Sketch, а также импорт дизайна в Android Studio и Xcode. Этот инструмент сильно ускоряет разработку программного продукта.
Первые шаги
Первым, что вы увидите на Sympli.io, будет секция How it works — она расскажет, что нужно знать пользователю, который работает с продуктом впервые. Пользователь должен зарегистрироваться и создать новый проект. Sympli поддерживает проекты для веба, Android и iOS. После этого можно загружать свой дизайн.
Как загрузить дизайн
Sympli позволяет загружать дизайн с помощью плагина для Photoshop или Sketch (сделать это напрямую, как в Avocode, невозможно). Все загруженные макеты появляются в «облаке». Для компаний, которые требовательны к безопасности данных или не используют «облачные» технологии, Sympli предоставляет корпоративные опции для локального разворачивания продукта.
По сравнению с Avocode и Zeplin в Sympli достаточно гибкие настройки экспорта ресурсов.
Плагин Sympli для Sketch позволяет экспортировать скрытые ресурсы (если в макете представлено несколько состояний для одного и того же контрола), а также он сам валидирует имена ресурсов в соответствии с требованиями платформы. Sympli не просто преобразует отдельные элементы дизайна по требованиям платформы — он делает их максимально пригодными для непосредственного кодирования в Android Studio и XCode.
Разработчики также могут применять правила наименования элементов, чтобы имена задавались автоматически каждый раз, когда дизайнер поставляет новый макет.
Sympli особенно выделяет момент с командным взаимодействием и обозначает этот вопрос задолго до непосредственной передачи дизайна. Инструмент может быть ориентирован под одновременную работу над макетом сразу нескольких дизайнеров. Поэтому, как только в системе появляется информация о первом дизайне, менеджер проекта может приглашать людей для совместной работы. Нужно лишь отправить прямую ссылку или указать в форме электронные адреса членов команды. Все заинтересованные лица получат уведомления.
Пользовательский интерфейс
Sympli — веб-приложение. Последняя загруженная в «облако»ревизия дизайна всегда доступна напрямую по ссылке. При необходимости можно отправлять ссылку на конкретный экран приложения.
Sympli автоматически сохраняет все цвета и шрифты, которые используются в проекте. Эти активы хранятся в Summary проекта. Инструмент сам находит множественные использования одного и того же цвета или шрифта в слоях, группирует их в виде расширяемого списка и дает им имена (при необходимости их можно изменить). Система синхронизирует все подобные изменения.
Sympli не просто группирует все используемые шрифты и цвета, но позволяет командам использовать эти свойства в других проектах. Эта функциональность называется Brandbooks. Вы можете включить в проект файлы шрифтов и цветов, которые используются в вашей компании (с уникальными именами этих шрифтов) — и разработчики мгновенно получат к ним доступ. Это сильно облегчает создание множества проектов для одного бренда.
Все цвета и шрифты представлены в соответствии со спецификой платформы, так что ничего не нужно переводить вручную.
Sympli также позволяет выгружать все ресурсы в формате Bitmap или Vector. Оба генерируются автоматически, разработчикам остается только выбрать один из них.
Здесь тоже можно сравнивать ревизии дизайна по версиям. Для этого нужно открыть проект и нажать на кнопку Version. Совсем скоро будет доступен принципиально новый механизм сравнения, в котором можно будет сравнивать ревизии «бок о бок».
Инструменты
Первым инструментом, который мы используем, будет Layers. С помощью него можно выделять в макете слои и наблюдать их свойства в правой панели. Довольно очевидный инструмент, но пользоваться им удобно и приятно, потому что все данные в правой панели обновляются автоматически:
Следующий инструмент — Rulers. Он показывает относительное положение любого выделенного элемента в макете. Как видите, все размеры представлены в единицах платформы (points для iOS, dp для Android и пиксели для веб-проектов).
Взаимодействие
Как было сказано, Sympli уделяет много внимания коммуникациям в команде. В панели инструментов есть Spots, который нацелен на то, чтобы сделать совместную работу легче. С его помощью можно выделять в макете секции и объекты, которые требуют дополнительного уточнения, и прорабатывать эти моменты в самом дизайне. Можно сказать, что благодаря Spots все дефекты и шероховатости проекта всегда на виду.
Кроме этого, Sympli отлично интегрирован со Slack. Механизм уведомления об изменениях дизайна или новой Spot-записи мгновенно оповестит об этом все заинтересованные стороны.
Бонус: счастливые разработчики
Как было сказано, огромная разница Avocode и Zeplin в том, что Sympli предоставляет плагины к студиям разработки Android Studio и Xcode. Это позволяет практически мгновенно перенести макеты из Photoshop и Sketch в код.
Расширения для IDE предоставляют ряд отличных возможностей — например, «умной» синхронизации ресурсов. Эта функция включает в себя визуальный диалог объединения ресурсов — он показывает, как ваш текущий дизайн будет выглядеть в IDE после синхронизации. Это позволяет включать или исключать какие-либо ресурсы.
Мне кажется потрясающей функция визуального воплощения дизайна в сторибордах —разработчики могут делать drag-and-drop дизайна из мокапа в проектировщик интерфейса IDE, и дизайн будет воплощен так же, как в изначальном мокапе (абсолютно все, включая конфигурацию и все runtime свойства):
Еще больше порадует разработчиков то, что Sympli не создает third-party зависимостей в проектах, а также не меняет технических требований к сборкам. Так что разработчикам не нужно будет изучать новые фреймворки или включать в проекты дополнительные библиотеки, чтобы пользоваться такими замечательными возможностями.
Стоимость
Zeplin
Zeplin — еще один инструмент для совместной работы дизайнеров UI и фронтенд-разработчиков. Дизайнеры экспортируют файлы из Photoshop или Sketch в Zeplin, и он отображает все свойства дизайна для разработчиков.
Первые шаги
На сайте Zeplin.io мгновенно замечаешь приятные детали вроде мультипликационного дирижабля. Это создает нужное настроение еще до использования продукта и привносит долю легкости в сам процесс.
После регистрации пользователю первым делом предложат посмотреть базовый курс работы с инструментом. Его вполне достаточно, чтобы начать полноценную работу с Zeplin.
Подобно Avocode, Zeplin просит вас установить десктопное приложение и создать проект. Приложение спросит, какой тип проекта вы хотите создать. В отличие с Avocode, Zeplin, кроме веб-проектов, поддерживает Android и iOS. В нашем случае мы выберем iOS.
Пришло время загружать сам дизайн. Чтобы сделать этот процесс очевидным и предсказуемым, Zeplin приводит очень детальную информацию на странице, где должен быть дизайн: вам пошагово объясняют, что сделать, чтобы на этой странице появился ваш дизайн.
Как загрузить дизайн
Zeplin не позволяет загружать дизайн напрямую, через веб-приложение. Загрузка осуществляется с использованием плагина Photoshop или Sketch, механизм очень похож на то, что мы видели у Sympli. В обычной ситуации после установки Zeplin плагин будет доступен без каких либо дополнительных действий, так что загрузка дизайна — это вопрос нескольких кликов. В самом Photoshop или Sketch можно экспортировать дизайн целиком или выделить отдельные объекты дизайна, обозначив их как exportable.
Чтобы увидеть все ресурсы в приложении Zeplin, нужно пометить слои как exportable. Приложение Zeplin нам помогает, рассказывая, как это сделать, шаг за шагом:
Когда дизайн будет загружен, участники команды смогут приступить к совместной работе. Менеджер проекта может отправить прямую ссылку или пригласить отдельных участников по email:
Интересна возможность демонстрации дизайна (разница между демонстрацией или полноценной работой в том, что в первом случае не нужно добавлять в проект отдельных людей как участников команды) с целью получения отзывов. Делается это с помощью элемента меню Share, который находится рядом со Scene:
Обзор пользовательского интерфейса
У многих продуктов, нацеленных на улучшение рабочей продуктивности, сухие и лишенные эмоций интерфейсы. Zeplin совершенно не такой — он превращает процесс, который кажется нудным и однообразным, в забавное действо. Кажется, что все происходит само собой, — настолько это просто и очевидно. Вы просто загружаете свой дизайн — и вот перед вами готовые спецификации, подогнанные под нормы платформы.
По сравнению с Avocode и Sympli интерфейс Zeplin лишен всех дополнительных инструментов, в нем только самое необходимое для работы. Приложение похоже больше на просмотр дизайна с возможностью экспорта деталей этого дизайна. Как разработчик вы можете выделить слой и увидеть всего его свойства:
Все размеры будут отображаться в соответствии с требованиями платформы (у нас iOS-приложение, так что это будет pt). Также можно посмотреть цветовую палитру и при необходимости переименовать цвет.
Если вы пометили изображения как exportable в Sketch, вы увидите их в перечне ресурсов для своего проекта в Zeplin:
Все используемые цвета и шрифты в проекте отображаются в папке Styleguide. Всегда можно сделать экспорт любого из этих ресурсов, чтобы использовать его в проекте. Zeplin подготовит код сниппета в соответствии с требованиями платформы. В целом, создание дизайна для iOS и Android становится приятным занятием.
Разработчики могут просматривать и копировать стили в формате CSS для веба, XML-ресурсы для Android, UI Font или UI Label экстеншены для iOS. Вот вариант для веб-проекта:
И еще один — для iOS:
Совместная работа
Так как Zeplin представлен в виде веб-приложения и stand-alone десктопного приложения, его можно использовать практически повсеместно. У любого макета дизайна в Zeplin есть собственная ссылка, которую можно увидеть в правом нижнем углу экрана.
Zeplin также позволяет оставлять комментарии для коллег прямо в макете.
Стоимость
Советы по выбору инструмента
Avocode отлично подходит для веб-разработки. Если вы нацелены в основном на мобильную разработку, лучше обратить внимание на Sympli или Zeplin.
Стоит уделить внимание Sympli, если вы хотите полноценной интеграции с XCode или Android Studio: инструмент сэкономит время на переводе дизайна из мокапа в среду разработки.
Sympli идеально подходит для больших команд, когда несколько дизайнеров одновременно работают над одним проектом и нужно отслеживать изменения по версиям. Приятный момент — в блоге Sympli регулярно появляется информация о новых возможностях, которые появятся в релизе.
Стоит рассмотреть Zeplin, если у вас относительно небольшой проект, который не требует многочисленных и частых изменений дизайна или визуального сравнения различных ревизий.
Выводы
Все рассмотренные инструменты предлагают хорошие решения для того, чтобы построить мост между дизайном и разработкой, и для улучшения работы команды в целом. Подчас это дается нелегко: нужно находить баланс в работе очень разных типов групп с разными потребностями. Но Avocode, Sympli и Zeplin идеально вписываются в процесс передачи дизайна в разработку, предоставляя великолепный механизм быстрого создания динамических спецификаций.
Так что смело говорите «нет» статичным, сложным для понимания и часто несвязным спецификациям. Пришло время использовать современные инструменты, чтобы переводить дизайн в код без потери сил. Сэкономленную энергию всегда можно направить на то, что действительно важно, — функциональность, дизайн и проработку взаимодействия с пользователями.