Sketch і Zeplin: допомога в співпраці дизайнерів та розробників

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

Декілька слів про Sketch

Близько шести місяців тому, коли я змінив роботу, мені запропонували спробувати Sketch. Найважливішим в цьому програмному забезпеченні є те, що воно ціленаправлено спрямоване на інтерфейс та дизайн іконок; від артбордів з відповідними розмірами для веб, мобільних та іконок до функцій, які допомагають покращити процес проектування дизайну, Sketch – просто обов’язковий для дизайнерів.

Крім того, якщо ви являєтесь користувачем Photoshop або Illustrator середнього рівня, вам практично не потрібно буде вивчати нічого нового.

Ось декілька прикладів: огляд того, що ви можете зробити за допомогою Sketch:

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

"Я розробник, я ніколи не користувався Sketch!"

За останні роки дизайнери навчилися співпрацювати між собою, використовуючи такі інструменти, як InVision, проте цій платформі не вистачає функцій, які дозволяють швидко організувати команди розробників.

Ми не повинні просити розробників бути досвідченими в тих інструментах, які використовують дизайнери для макетів продукту. Також не потрібно вимагати від дизайнерів відійти від того, що вони роблять краще за все – дизайн!  Побудова "документу специфікації" щоразу, коли доводиться відкладати дизайн – це зовсім далеко від «кмітливості», і скоріше може означати велику трату часу між передачею дизайну і його поверненням при необхідності.

Zeplin

Ось тут Zeplin виходить на сцену.

Zeplin – це  інструмент для спільної роботи UI дизайнерів та front-end розробників. Він виходить за межі робочого процесу проектування та допомагає командам в передачі дизайну.

Це дозволяє дизайнерам завантажувати свої ваєрфрейми чи візуальні дизайн-проекти безпосередньо зі Sketch та додавати їх в папки проектів в Zeplin. Чудово, правда? Анотації автоматично додаються до проектів (розміри, кольори, поля і навіть CSS-вказівки для певних елементів), що дає вам онлайн простір, в якому може працювати вся команда.

“Zeplin відмінно працює як єдине джерело істини, якщо він використовується в такій якості”.

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

Експорт проектів зі Sketch в Zeplin

Zeplin працює як плагін в Sketch, тому завантажити дизайн – це робота в один клік.

Ось як почати проект:

1. Завантажте та встановіть Zeplin (доступний тільки для Mac). Розробникам не потрібно буде запускати OS X, оскільки їм потрібно буде отримати доступ тільки до веб-версії, щоб мати доступ до контенту.
2. Створіть проекти.
3. Оберіть платформу, для якої ви розроблювали дизайн.
4. Дайте назву проекту (переконайтесь, що ви обрали ім'я, відоме всій команді).

Виберіть в 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 – це чудовий спосіб гармонічної співпраці дизайнерів та розробників. Моя команда любить працювати таким чином -  я б хотіла почути ваші думки та ваш досвід, який ви отримали в роботі з цими інструментами!

Корисні посилання

• Sketch plugins
• Sketch tutorials on Envato Tuts+
• Sketch website templates on Envato Market
• @zeplin_io on Twitter
  
• zeplin.io