Витрачаєте години на створення дизайну, в якому ідеальний кожен піксель, але коли нарешті ви його розробили, в браузері він має інакший вигляд: з’являються дивні інтервали і розмиті зображення? Продуктовий дизайнер Акшат Срівастава розповів, як без зайвих помилок передати розробникам UI-елементи з Figma чи Sketch.

Оригінал публікації англійською

Photo by UX Store on Unsplash

Коротко про інструменти для дизайну та передачі елементів

Sketch — це дизайн-інструмент, який потрібно поєднувати з такими інструментами для передачі (handoff tools), як Abstract, Zeplin чи Invision. Тоді як Figma — універсальне рішення для проєктування, прототипування та передачі проєктів.

Структуруйте свій файл

Розподіліть файл проєкту в Figma/Sketch на різні сторінки та розділи. Створіть окрему сторінку для усіх ваших основних компонентів. Вона діє як єдине джерело істини для усіх користувацьких інтерфейсів. Створюйте різні сторінки для дизайну та розробки й використовуйте елементи, щоб їх відокремлювати.

Дизайн-сторінки призначені для ітерацій дизайну, й розробник не має з ними взаємодіяти. До сторінок з інтерфейсами, які потрібні розробникам, входять фінальні дизайн-рішення, стайлгайди, стиль компонентів, блок-схеми та приклади взаємодії (за необхідності).

Що потрібно розробнику?

Дизайн

Огляд того, як виглядає ваш дизайн на усіх екранах/в усіх компонентах користувацького інтерфейсу.

Стилі кольору

Огляд усіх кольорів, які ви використовуєте чи плануєте використати у своєму проєкті. Додайте ваш колір до набору всіх кольорів, що можна повторно використовувати у проєкті. Іноді потрібно змінити кольори з RGB у CMYK чи навпаки. Це можна зробити за посиланням.

Стилі тексту

Вкажіть шрифти, які ви використовуєте у своєму проєкті. Не додавайте до дизайну дуже багато шрифтів, тримайтеся одного-двох і будьте послідовними у дизайні. Створіть стилі шрифту та оберіть назву залежно від того, де вони використовуються. Наприклад, Заголовок 1, Заголовок 2, основний текст, текст посилання тощо. Визначте розмір, висоту рядка і товщину шрифту.

Інші стилі

Визначте будь-які інші стилі, які потрібно використати у проєкті, наприклад, тіні, наведення, розмиття тощо.

Система сіток і відстаней

Сітки: визначте горизонтальний макет і поведінку ваших сіток на екранах різних розмірів. Сітки можуть бути фіксованими чи рухомими залежно від розмірів екрану.

Інтервали: визначте, як ваші елементи розподіляються вертикально і горизонтально відносно екрану та одне одного в сітці.

Точки зупинки (breakpoints) — це значення пікселів, які може встановити розробник чи дизайнер. Коли адаптивний вебсайт досягає заданих значень пікселів, відбувається перевтілення макета, розмірів та інтервалів, щоб сайт був зручним для користувачів.

Компоненти

Збережіть компоненти у своїй бібліотеці, щоб полегшити доступ до них протягом всього проєкту.

До огляду компонентів входять:

• головний компонент (the Master Component);
• компонент у різних станах (зависання, натискання тощо);
• інформаційний розділ про характеристики компонента.

Також визначте поведінку ваших компонентів — як вони відкриваються, розтягуються та реагують на взаємодію. Завантажте бібліотеку матеріалів Material Baseline Design Kit для Figma.

Зображення та компоненти

Дайте визначення зображенням як компонентам. Задайте їхню поведінку в різних станах. Також поясніть, як в цих станах поводиться оточення. Вкажіть, як зображення розміщується на вебсайті та у стіках.

Як працюють сітки

Гнучка сітка (Responsive Grid) зверху: гнучка та адаптивна. В неї є точки зупинки, які створюють діапазон плавного руху.

Адаптивна сітка (Adaptive Grid) знизу: містить кілька дизайнів з фіксованим макетом. Відображення залежить від ширини екрану користувача і має фіксовані точки зупинки.

Блок-схема і прототип

Створіть огляд блок-схеми зв’язків між різними екранами та прототип взаємодії для тестування, щоб краще зрозуміти, як виглядає вебсайт.

Блок-схема: використовуйте стрілки та описи, щоб пояснити послідовність та співвідношення між екранами.

Прототип: поінформуйте розробника про поведінку компонента під час взаємодії.

Передача дизайну з Figma

Після того, як ви закінчите структурування та документацію, перехід до Figma дуже простий: натисніть «поділитися» у правому верхньому кутку і додайте розробників до свого файлу. Для цього є два способи: ви можете ввести їхні email-и та натиснути кнопку запрошення або скопіювати посилання для загального доступу до вашого файлу (впевніться, що ви встановили дозвіл «Усі, в кого є це посилання, можуть переглядати»). Розробникам не потрібен доступ для редагування, щоб перевіряти елементи у Figma.

Передача дизайну через Sketch + Handoff Tool

Щоб передати дизайн за допомогою Sketch, ви можете використати спеціальний інструмент, наприклад, Zeplin. Встановіть Zeplin на свій комп’ютер, створіть новий проєкт. Тепер відкрийте файл Sketch, і з плагіну Zeplin ви можете експортувати свої фінальні дизайни, а також символи з усіх сторінок. Ви можете побачити усі експортовані екрани на вкладці панелі інструментів Zeplin.

Коли проєктуєте дизайн інтерфейсу, пам’ятайте про ширшу картину. Продукт забезпечить бездоганний досвід тільки якщо він добре спроєктований і розроблений. Розбіжності між дизайном і розробкою свідчать про розбіжності між дизайнером і розробником. Тому важливо поговорити з членами вашої команди та дізнатися, які інструменти вони вже використовують і з якими вони взагалі знайомі. Долучайтеся до кожного етапу створення продукту.