Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Sketch и Zeplin: помощь дизайнерам и разработчикам в сотрудничестве

Length:LongLanguages:

Russian (Pусский) translation by Marat Amerov (you can also view the original English article)

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

Пару слов о Sketch

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

Кроме того, кривая обучения, если вы являетесь промежуточным пользователем Photoshop или Illustrator, близка к нулю.

Вот несколько примеров, которые дают вам обзор того, что вы можете сделать с помощью Sketch:

  1. Создавайте страницы для организации вашего контента (например, мобильные проекты, десктопные проекты) и артборды внутри этих страниц для макета вашего продукта (например: создайте пошаговое путешествие клиента).
  2. Используйте Inspector, чтобы найти все сведения о конкретном объекте (размер, расположение, цвета, стили шрифтов, прозрачность и многое другое).
  3. Используйте функцию Export для экспорта артбордов или отдельных объектов в определенные форматы файлов (PNG, JPG, PDF и т. д.).

"Я разработчик, я никогда не использовал Sketch!"

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

Мы не должны просить разработчиков быть опытными в тех же инструментах, которые используют дизайнеры для макетов. Тем не менее, мы не должны требовать от дизайнеров отказаться от того, что они делают лучше всего: дизайн! Построение "документа спецификации" каждый раз, когда они передают дизайн, далеко от "agile" и может отнимать много времени впустую между передачей проектов и необходимостью итерации при необходимости.

Zeplin

Здесь Zeplin выходит в сцену.

Zeplin - это инструмент совместной работы для разработчиков пользовательского интерфейса и front-end разработчиков. Он выходит за рамки рабочего процесса проектирования и помогает командам с компоновкой дизайна.

Это позволяет дизайнерам загружать свои каркасы или визуальные проекты прямо из Sketch и добавлять их в папки проектов в Zeplin. Хорошая вещь? Аннотации автоматически добавляются к проектам (размеры, цвета, поля и даже CSS-предложения для определенных элементов), которые предоставят вам онлайн-репозиторий, в который можно добавить свою команду.

"Zeplin отлично работает как единственный источник истины, когда он используется как таковой.

Кроме того, поскольку он доступен как автономное приложение, так и веб-приложение, вы можете получить доступ к нему практически в любом месте. Можно легко проверяет дизайн и параметры, такие как расстояние, размеры, цвета и т. д. - Daniel Setas Pontes, Javascript-разработчик @NOW TV, Sky

Экспорт проектов из Sketch в Zeplin

Zeplin работает как плагин в Sketch, поэтому загрузка проектов - это однократная работа.

Вот как начать проект:

Запуск Zeplin проекта
  1. Загрузите и установите Zeplin (доступен только для Mac). Разработчикам не нужно будет запускать OS X, так как им нужно будет получить доступ только к веб-версии, чтобы получить доступ к контенту.
  2. Создание проекта.
  3. Выберите платформу, для которой вы разработали дизайн.
  4. Назовите проект (убедитесь, что вы выбрали имя, знакомое всей команде).
Export from Sketch
Экспорт из Sketch

В Sketch выберите отдельные объекты и сделайте их экспортируемыми. Это позволит вашей команде разработчиков экспортировать каждый элемент из Zeplin позже. Вот как это работает:

  1. Затем выберите артборды, которые вы хотите загрузить в Zeplin.
  2. Перейдите в раздел Plugins > Zeplin > Export Selected Artboards.
  3. Выберите проект, в который вы хотите загрузить свои дизайны, затем нажмите Import.

Работа с Zeplin

В Zeplin вы можете перемещаться между проектами и легко изучить все компоненты внутри них. Выяснение характеристик некоторых элементов также интуитивно; выберите нужный элемент, тогда вся соответствующая информация появится в столбце справа.

Разработчики: вот как это работает, как только вы открыли веб-инструмент и залогинились:

  1. Выберите объект, который вы хотите проверить.
  2. Посмотрите на столбец с правой стороны, чтобы получить подробную информацию, такую ​​как стили шрифта, цвет и т. д. (Информация будет отображаться в соответствии с выбранным вами объектом).
  3. Скопируйте предлагаемый CSS.

Если команда дизайнеров разрешала экспортировать элементы при импорте проектов в Zeplin, команда разработчиков должна иметь возможность экспортировать отдельные ассеты. Ассеты будут доступны для загрузки в формате SVG и трех разных размерах PNG.

  1. Здесь вы можете добавлять примечания и комментарии к проектам.
  2. Здесь вы можете скопировать и поделиться ссылкой на проект, возможно, даже интегрироваться с каналом Slack команды, чтобы получать уведомления или приглашать членов команды для совместной работы!

Почему ваша команда должна сделать движение в эту сторону

Работа с Zeplin имеет много преимуществ, вот несколько примеров:

  • Вы избежите создания документации спецификаций; что не является ни гибким, ни легким для обновления.
  • Создавайте мгновенно аннотированные проекты со всей необходимой информацией для разработчиков и других дизайнеров.
  • Вы можете создавать экспортируемые проекты, поэтому разработчики получат быстрый доступ к отдельным ассетам.
  • Создайте столько проектов, сколько хотите, затем загружайте и обновляйтесь всего несколькими кликами.
  • Создайте руководства по стилю, которые помогут команде разработчиков оставаться в курсе актуальных стилей и правил.
  • Воспользуйтесь интеграцией Slack, не уведомляя свою команду каждый раз, когда есть обновление.

Попробуйте это!

Работа с Sketch и Zeplin - отличный способ для дизайнеров гармонично сотрудничать с разработчиками. Моя команда любит работать таким образом - я бы хотела услышать ваши мысли и опыт, которые накопились при работе с этими инструментами!

Полезные ссылки

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.