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

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

• більше 800 мокапів скомпонованих в один прототип
• до 8 дизайнерів в одній команді
• 4 бібліотеки з 980 первинних символів (Master Symbols)

Отже, як із цим впоратись? Ось найважливіші поради:

Читайте також: Ми будуємо платформу з персоналізації контенту: інтерв’ю з продакт-менеджером Reface

Назви шарів

Використовуйте правильні назви шарів, щоб зробити опції в панелі Overrides зрозумілими

Ім’я шарів використовується для позначення властивостей, які ви можете змінити в панелі Overrides (панель із опціями для касмомізації). Якщо ви хочете там легко знайти необхідну властивість, ваша кнопка має містити «Ім’я кнопки» та «Властивості фону» (Background).

Ми також перейменували вкладені символи. Для секції сторінки з двома чартами ми використали Chart1 та Chart2 замість того, щоб мати дві властивості з назвою Charts/Placeholder.

Порядок шарів

Створіть логічний порядок шарів, щоб зручніше знаходити необхідну властивість

Порядок шарів вашого Master Symbol використовується для впорядкування властивостей на панелі Overrides. У наші боковій панелі навігації було 30 пунктів, які йшли один за одним в такому ж порядку, як вони відображаються. Таким чином ми швидко знаходили потрібний елемент просто відкривши цей порядок.

Правила зміни розміру шару

Встановіть правила зміни розміру для кожного шару в Master Symbol і всі ваші похідні (Instances) будуть у безпеці.

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

Розумний лейаут

Застосовуйте Autolayout для групи чи для символу, щоб автоматично змінювати розміри Instances для будь-якого контенту.

Розумні лейаути, які запровадили та дуже детально описали у версії Sketch #58, врятували нам життя. Ми можемо застосовувати їх як до символу, та і до груп шарів всередині нього.

Управління Overrides

Вимкніть всі опції, які ви не збираєтесь змінювати. Це зменшить кількість позицій на панелі Overrides.

Хочете відчути, що в команді вас люблять? Впорядкуйте свої оверрайди! Зазвичай нам вдавалось зменшити кількість опцій override у два—три рази, просто вимикаючи всі властивості Master Symbol, які нам не потрібно змінювати.

Які лайфхаки спрацювали

Використовуйте плейсхолдери для вкладених елементів, які часто змінюються

Створіть Master Symbol з вкладеним плейсхолдером. Змініть його за допомогою панелі Overrides на будь-який інший символ.

Просто створіть символ такого ж самого розміру з будь-яким фоном та розмістіть його як вкладений символ. Це ідеально підходить для:

• іконок
• зображень
• карток
• чартів
• таблиць

Зберігайте ваш Master Symbol у найбільш завантаженому контентом кейсі

Якщо до Master Symbol застосувати автолейаут, ви зможете видаляти будь-що з вашого Instances і Sketch автоматично змінюватиме його розмір.

За допомогою функції No Symbol (Без символу) можна видалити вкладені символи. Саме тому ми створили Master символи з максимальною кількістю елементів, а потім налаштовували Instances під конкретний потрібний кейс.

Що не спрацювало

Застосовувати лінки через Craft

Craft дозволяє експортувати артборди в InVision з усіма хотспотами — але через те, що можливості обрати вкладений символ кнопки чи поля немає, потрібно перетворювати Parent символ на Local і далі залінковувати його прямо там. Тому просто оберіть шар, натисніть «C» на клавіатурі та оберіть потрібну сторінку.

Читайте також: Дайджест релізів вересня: останні оновлення застосунків, які ви могли пропустити

Як ми організували файли бібліотеки

Чому ми зберігали всі Master символи в окремих файлах:

• одне джерело для всієї дизайн-команди
• можна контролювати всі зміни, що застосовуються до похідних символів (Instances)
• мінімальний ризик того, що символи будуть дублюватися

Чому ми використовували декілька бібліотек для одного проєкту:

• так простіше ними керувати та користуватись
• одночасна командна робота в багатьох напрямках

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

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

Ми перепробували багато плагінів для Sketch, але ці три спрацювали найкраще:

Move to library — додати символ у бібліотеку з іншого файлу

Symbol Swapper — перелінкувати існуючий символ та Instances до нового;

Symbol Organizer — допомагає підтримувати сторінку символів Symbol page у чистоті.