Я полюбив верстку після цього: Zeplin в бою

Іноді я питав себе і Гугл: «Чому мені буває соромно бути верстальником». Ну, знаєте, коли не міг на око визначити, який переді мною шрифт: open sans з font-weight: bold, або open sans bold з font-weight: normal — небудь випадково дізнавався, що «ой, забули тобі сказати, масштаб був не 1920x1080, а 2560x1440».

Звичайно ж як — скидають .psd і крутись як хочеш.



Навесні 2015-го, прийшовши в uKit, я дізнався про Sketch — і побачив, як шаблони стали з'являтися з красивими і однаковими мітками розмірів відносно один одного і дуже докладним описом.

Тоді мені захотілося більшого. І буквально через кілька місяців вийшов Zeplin 1.0. Це додаток змінило моє уявлення про верстку в цілому — тому що воно по-справжньому робить життя верстальника щасливою.


Що таке Zeplin і навіщо він потрібний
Це додаток під Mac, Linux і Windows з дуже швидкою і неглючной веб-версією, яке заощадить вам купу сил, часу і нервів. Особливо при роботі в команді — адже у нього є інтеграція з Slack.

У зв'язці зі Sketch ви можете закінчити версионную війну файлів і зручно підтримувати макети в живому стані. Коли складні екрани не перевантажені колосальною кількістю шарів та груп, верств, дизайнеру можна легко і швидко вносити дрібні правки — верстальник побачить їх відразу.



Але головне в Zeplin — він дозволяє клікати по будь-якому простому векторного об'єкта на полотні і дивитися всю доступну інформацію про нього.

Рівно ту інформацію, яку заклав дизайнер — будь то точний розмір полотна, точні розміри кожного елемента, точні відступи, тіні, товщини лінії, прозорості або CSS-коди ефектів.



Ще одна приємність — робота з контентом. Наприклад, можна клацнути по тексту на макеті, і Zeplin дозволить скопіювати текст. Також ви можете тегировать контент (полотна) всередині папки з проектом і робити в них помітки.

А ще ця штука ідеально підходить для роботи на трьох моніторах:


Три монітора — менше альт-табить.

Наприклад: середній монітор завжди з кодом. Великий горизонтальний — відображає сторінку і, при необхідності, ще одне вікно з кодом. На третьому можна тримати відладчик DOM-дерева або кілька вікон консолі.

Але ж...
Так, подібне додаток є і у фотошопу. Але, як і у всього Ps, його юзабіліті здається надмірно громіздким. Плюс є складнощі з визначенням об'єктів — і якщо розміри деяких елементів худо-бідно показуються, то відносні межэлементные відстані — ні. А це фатальний недолік.


Інтерфейс того ж Adobe Brackets містить багато непотрібного і заважає фокусуватися на правильному перенесення макета.

На щастя, в Zeplin є підтримку фотошоп-макетів — спеціальний плагін вимагає мінімуму знань про те, як це краще експортувати.


до Речі, в останній версії Ps плагін Zeplin вбудований з коробки!

Для чистоти експерименту скажу, що накладки з розпізнаванням фотошоп-макетів іноді зустрічаються і у Zeplin — наприклад, він не завжди акуратно розпізнає міжрядкові інтервали у великих блоках тексту.

Але такі моменти повинні бути частиною договору з дизайнером. Адже розбивати великі шматки на різні об'єкти правильніше — хоча б тому, що так зручніше працювати.

Як впровадити це в команду
Розповім, як ми зробили у себе. У нас як: мій відділ верстальників — 4 людини — і рівний влади начальник дизайнерів, у якого натовп хлопців в штаті і на аутсорсе.
Завдання полегшувалося тим, що всі дизайнери вже сиділи на Sketch.

N. B. Порада — попередньо переконайте ваших дизайнерів робити макети не в фотошопі. Наприклад, наочно показавши їм різницю відображення вмісту макетів при збільшенні в Zeplin під час роботи.


Зліва — макет, зроблений в фотошопі. Праворуч — у скетчі. У фотошопном видно сліди розмиття: начебто дрібниця, а неприємно.

Далі вам потрібно зробити три простих кроки.

Крок 1. Зацікавити, сказавши всім: «Піксель-перфект — не міф і не утопія, а цілком собі реально при правильному інструментарії».

Крок 2. Домовитися з дизайнерами. Обговорити, що потрібно промальовувати і вказувати в макетах, а що ні. Так, якщо ваш дизайнер все ще використовує Photoshop, для завантаження в Zeplin достатньо перетворити макет в смарт-об'єкт і натиснути ще 3 кнопки.

Крок 3. Роздати верстальникам інвайт, щоб вони увійшли в проект і стали радіти життю — їм більше не потрібно пам'ятати про масштаби та екранних лінійках при перевірці і розробці макета.

Як з ним працюється
1. Відкриваємо макет на одному екрані. Накидаємо верстку на другому, просто дивлячись на макет, — продумуємо, що робити, як робити, скільки робити.

При цьому ви вже точно знаєте, скільки буде потрібно div-елементів, і як це розпарсити під React, JQ або просто лендінгем. А значить, залишається час прикинути, що застосувати нового, щоб трохи зрости на цій конкретній задачі.

2. Zeplin сам автоматично збирає в одному місці усі кольори — і найчастіше навіть дає їм назви CSS-змінних. Залишається зумить макет і розглядати деталі. Якщо ж вам не до вподоби новомодні нативні змінні CSS, завжди можна перенести їх в улюблений CSS-препроцесор і назвати через звичний спецсимвол начебто @ або $.



Функціонал, який автоматично збирає все зустрічаються кольору в змінні, дуже сильно економить час. Наприклад, якщо з'ясується, що «потрібен чорний почернее», — достатньо буде просто поміняти колір в одній загальній змінної, і він відразу застосувати до всіх.

3. Далі розбираємося з версткою і стилями елементів — вибираємо елемент у WYSIWYG-режимі на сторінці, тиснемо і відразу бачимо все або майже все, що потрібно знати про нього.



Залишається поелементно обрамити верстку в стилі. Я зазвичай йду зверху-вниз — від стилізації контейнерів до внутрішніх елементів.

Тут Zeplin помітно економить час. Можна писати стилі, просто дивлячись на макет, і рідко відриваючись на використання браузера, щоб перевірити більш-менш великі сутності — не помилився де синтаксично.


Також з приємного — експорт відразу в готовий CSS, LESS, SASS, SCSS або Stylus. Зручно.

Як-то у мене загубилися літери Е і Ї
Zeplin 1.0 — це молоде додаток і, по суті, ще в беті. А бети без помилок не буває.

Основні проблеми при роботі пов'язані з перенесенням тексту: в процесі він може втратити Ї Е. Або замінити Ї на кнопці. Іноді — але це швидше за помилку дизайнера — внести значок питання або набір букв замість пробілу в тексті.


Особлива любов у Zeplin до заміни пробілів та букви І — приклади з різних проектів.

Але навіть незважаючи на це — копіювати тексти одним кліком з макета і вставляти їх в потрібне місце в коді куди швидше, ніж колупати файлик з текстами десь в хмарі.

Трапляються кумедні моменти при відображенні розмірів — але це, знову ж, людський фактор. Якось один фріланс-дизайнер наплутав з розмірністю: він вважав, що 1 умовна одиниця це — 1px, а Zeplin — що 1pt.

Але взагалі, справа в тому, що Zeplin зазвичай в точності показує макет, який зробив дизайнер. Так що ви легко можете зустріти полпикселя в інформації про елемент.


Дробові значення розмірів (height: 105.5 px) — якийсь пекло перфекціоніста.

Є ще одна дуже прикра особливість — не можна просто в два кличу скачати будь-який обраний об'єкт. Така ж проблема може виникнути з картинками.

Звичайно, якщо мова про стандартні іконки, їх можна взяти з иконочных шрифтів або підключити текстурою з відкритих бібліотек. А от якщо це ексклюзивна картинка, іконка або логотип — тут спочатку дизайнер повинен у налаштуваннях джерела в Sketch вказати експорт конкретного ассета. Так, з фотошопом так, знову ж, не вийде.

***

Ось уже другий рік, як я знову полюбив верстку. Діліться своїми рецептами та інструментами для отримання задоволення від робочого процесу.

Задавайте питання про Zeplin. Це світова річ — на мій погляд, найсвітліше, що сталося між дизайном в клієнт-сайдом за останній час.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.