Zeplin у бою Блог компанії uKit Group Хабр
Звичайно ж як - скидають .psd і крутись як хочеш.
Навесні 2015-го, прийшовши до uKit, я дізнався про Sketch — і побачив, як шаблони почали з'являтися з красивими та однаковими мітками розмірів щодо один одного та дуже докладним описом.
Тоді мені захотілося більше.І буквально через кілька місяців вийшов Zeplin 1.0. Ця програма змінила моє уявлення про верстку в цілому — тому що вона по-справжньому робить життя верстальника щасливим.
Що таке Zeplin і навіщо він потрібний
У зв'язці зі Sketchви можете закінчити версійну війну файлів та зручно підтримувати макети в живому стані. Коли складні екрани не перевантажені колосальною кількістю шарів та груп шарів, дизайнеру можна легко і на льоту вносити дрібні правки – верстальник побачить їх одразу.
Але головне в Zeplin – він дозволяє клікати по будь-якому простому векторному об'єкті на полотні та дивитися всю доступну інформацію про нього.
Рівно ту інформацію, яку заклав дизайнер— чи то точний розмір полотна, точні розміри кожного елемента, точні відступи, тіні, товщини лінії, прозорості чи CSS-коди ефектів.
Ще одна приємність – робота з контентом. Наприклад, можна натиснути текст на макеті, і Zeplin дозволить скопіювати текст. Також ви можете тегувати контент (полотна) всередині папки з проектом і робити в них позначки.
А ще ця штука ідеально підходить для роботи на трьох моніторах:
Наприклад: середній монітор завжди з кодом. Великий горизонтальний – відображає сторінку і, за потреби, ще одне вікно з кодом. На третьому можна тримати налагоджувач DOM-дерева або кілька вікон консолі.
На превелике щастя, у Zeplin є підтримка фотошоп-макетів — особливий плагін просить мінімум знань про те, як це краще експортувати.
Для чистоти експерименту скажу, що накладки з розпізнаванням фотошоп-макетів іноді зустрічаються і у Zeplin – наприклад, він не завжди акуратно розпізнає міжрядкові інтервали у великих блоках тексту.
Але такі моменти мають бути частиною договору із дизайнером. Адже розбивати великі шматки на різні об'єкти правильніше хоча б тому, що так зручніше працювати.
Як впровадити це у команду
N.B.Порада - попередньо переконайте ваших дизайнерів робити макети не у фотошопі. Наприклад, наочно показавши їм різницю відображення вмісту макетів при збільшенні Zeplin під час роботи.
Далі вам потрібно зробити три простих кроки.
Крок 1. Зацікавити, сказавши всім:«Піксель-перфект — не міф і не утопія, а цілком реально при правильному інструментарії».
Крок 3. Роздати верстальникам інвайти,щоб вони увійшли в проект і стали радіти життю — їм більше не потрібно пам'ятати про масштаби та екранні лінійки під час перевірки та розробки макета.
Як з ним працюється
При цьому ви вже точно знаєте, скільки потрібно div-елементів, і як це розпарити під React, JQ або просто лендінг. А значить, залишається час прикинути, що застосувати нового, щоб трохи вирости на цьому конкретному завданні.
2. Zeplin сам автоматично збирає в одному місці.всі кольори - і найчастіше навіть дає їм назви CSS-змінних. Залишається зумити макет та розглядати деталі. Якщо ж вам не до вподоби новомодні нативні змінні CSS, завжди можна перенести їх у улюблений CSS-препроцесор і назвати через звичний спецсимвол на кшталт @ або $.
Функціонал, який автоматично збирає всі кольори, що зустрічаються в змінні, дуже сильно економить час. Наприклад, якщо з'ясується, що«потрібний чорний почорніше», - достатньо буде просто поміняти колір в одній спільній змінній, і він відразу застосовується до всіх.
3. Далі розбираємося з версткою та стилями елементів - вибираємо елемент у WYSIWYG-режимі на сторінці, тиснемо і відразу бачимо все чи майже все, що потрібно знати про нього.
Залишається поелементно обрамити верстку у стилі. Я зазвичай йду згори донизу — від стилізації контейнерів до внутрішніх елементів.
Здесь Zeplin помітно економить час.Можна писати стилі, просто дивлячись на макет, і рідко відриваючись на використання браузера, щоб перевірити більш-менш великі сутності - чи не помилився де синтаксично.
Якось у мене загубилися букви Ё та Й
Основні проблеми під час роботипов'язані з перенесенням тексту: у процесі може втратитиЙіЕ. Або замінитиІнаЙна кнопці. Іноді - але це швидше за помилкою дизайнера - внести піктограму питання або набір букв замість пробілу в тексті.
Але навіть незважаючи на це - копіювати тексти одним кліком з макета і вставляти їх у потрібне місце в коді набагато швидше, ніж колупати файлик з текстами десь у хмарі.
Стаються забавні моментипри відображенні розмірів - але це, знову ж таки, людський фактор. Якось один фріланс-дизайнер наплутав з розмірністю: він вважав, що одна умовна одиниця це - 1px, а Zeplin - що 1pt.
Але взагалі, справа в тому, що Zeplin зазвичай точно показує макет, який зробив дизайнер. Так що ви легко можете зустріти півпікселя в інформації про елемент.
Є ще одна дуже образлива особливість— не можна просто в два кліки завантажити будь-який вибраний об'єкт. Така сама проблема може виникнути з картинками.
Звичайно, якщо мова про стандартні іконки, їх можна взяти з шрифтів іконок або підключити текстурою з відкритих бібліотек. А ось якщо це ексклюзивна картинка, іконка або логотип - тут спочатку дизайнер повинен у налаштуваннях вихідного коду в Sketch вказати експорт конкретного ассета. Так, з фотошопом так, знову ж таки, не вийде.
Ось уже другий рік, як я знову полюбив верстку. Діліться своїми рецептами та інструментами для задоволення від робочого процесу.
Задавайте питання про Zeplin.Це світова річ — на мій погляд, найсвітліше, що трапилося між дизайном у клієнт-сайді останнім часом.