18 порад щодо використання Sketchapp для прискорення вашої роботи

1. Ви початківець Sketchapp і хочете працювати ефективніше;
2. Ви впевнений користувач Sketchapp і хочете перевірити себе знання програми. Спочатку легкі функції з гарячими клавішами, але ви дочитайте до кінця, я постарався, щоб вас здивувати.
3. Ви користувач іншої відомої графічної програми і досі не вірите, що Sketchapp є настільки гарним.

• Гарячі клавіші
• Символи
• Загальні стилі
• Зображення
• Адаптація макетів
• інше

На момент написання статті я використовую Sketch версії 41, деякі функції не доступні в попередніх версіях.

Гарячі клавіші

Скорочення: — клавіша Cmd позначатиметься значком ⌘; — клавіша Option/Alt позначатиметься значком ⌥;

1. Швидко виділити об'єкт

У Sketch передбачена функція швидкого виділення об'єкта, що лежить усередині декількох груп, для цього потрібно: затиснути ⌘ і виділити курсором необхідний елемент. Ми одразу виділяємо необхідний нам шар.

2. Перемістити виділений об'єкт

Якщо вам потрібно перемістити об'єкт, який лежить під іншим об'єктом, виділіть необхідний шар в меню layers, далі одночасно затисніть клавіші ⌘+⌥ і почніть перетягувати шар в макеті. Таким чином пересуватиметься лише обраний шар, а не той, на який наведено курсор.

3. Виміряти відстань між об'єктами

У Sketchapp дуже зручно реалізовано функцію вимірювання відстані. Для цього потрібно: вибрати об'єкт, відстань від якого хочемо дізнатися; затиснути клавішу ⌥; навести курсор на другий об'єкт, відстань до якого нам потрібно дізнатися. Таким чином, ми дізнаємося відстані між ними. Функція працює так само і звнутрішніми відступами та групами.

Порада: щоб дізнатися відстань між об'єктами, що знаходяться в різних групах, замість ⌥ натисніть ⌘+⌥.

4. Виділити батьківську папку чи артборд

Виділіть необхідний об'єкт і натисніть клавішу Esc, тоді буде автоматично виділено батьківську папку. Отже, можна назвати і артборд.

5. Швидко дублювати об'єкти

У Sketch після дублювання елемента можна швидко продублювати цей елемент на таку ж відстань, що і вперше. Для цього треба: вибрати об'єкт, який будемо дублювати; затиснути ⌥; перетягнути копію об'єкта на потрібне місце; відпустити ⌥; натиснути комбінацію клавіш ⌘ +D, така кількість разів, яка вам потрібна.

Якщо у вас не працює функція, зайдіть в налаштування, перейдіть в меню Preferences > Layers і зніміть галочку з опції Offset duplicated layers.

6. Швидко змінити прозорість

У Sketch реалізовані гарячі клавіші для зміни прозорості, як у Photoshop. Зробити це досить просто: виділіть шар та натисніть цифри від 1 до 9, прозорість цього шару зміниться відповідно від 10% до 90% (0 – це 100%).

Якщо вам потрібно точніше змінити прозорість, то після першої цифри швидко натисніть на другу, яку вам потрібно.

7. Змінити масштаб, щоб одразу було видно всі артборди

Іноді треба швидко подивитися щось на іншому артбоді, для швидкої зміни масштабу, щоб було видно всі артборди, потрібно натиснути ⌘+1.

Символи – це особливий вид груп. Особливість символів, що при зміні символу в одному місці, він також змінюється у всіх місцях, де присутні його копії. Символи потрібно використовувати для елементів інтерфейсу,які використовуються по кілька разів у макеті. Наприклад: шапка сайту, меню, футер, іконки, картки товару, кнопки тощо.

8. Створення та зміна символів

Спочатку вам потрібно намалювати ваш елемент. Наприклад, картку товару. Далі тиснемо кнопку “Create Symbol” на панелі інструментів. Щоб відредагувати символ, двічі клацніть по ньому. Після внесення змін, усі копії символу також зміняться.

9. Змінити контент у символах

Найкраще, що весь контент у символах можна змінювати таким чином, щоб на різних копіях символу він був різним. Для цього виділіть необхідну копію символу і праворуч відкриється меню “Overrides”. Там ви можете замінювати значення кожного зображення та тексту.

Порада: Якщо замість контенту в текстовому блоці ввести пробіл, можна просто приховати непотрібні поля.

Порада: Якщо всередині символу заблокувати шар, то його значення не можна буде змінити.

10. Вкладені символи

Якщо нам треба замінити не просто контент, а замінити цілу частину символу. Тут на допомогу приходять вкладені символи - це звичайні символи, що лежать всередині інших символів. Тепер, коли ми змінюватимемо контент, у нас додатково з'явиться поле для заміни вкладеного символу. Де ми можемо вибрати інший символ такого ж розміру або приховати вкладений символ.

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

На гіфках нижче, я спочатку створюю символ із кнопки play, а потім дублюю його. Тепер у нас 2 різні символи однієї кнопки. Другою кнопкою я змінюю колір. надругий гіфці я заміняю вкладені символи, спочатку на порожній простір, а потім на другу кнопку.

11. Створити структуру у знаках

Для зручнішої роботи із символами їх можна сортувати за групами. Для цього просто перед назвою напишіть будь-яку назву групи та “/”, назви символу залиште. Зрештою у вас може вийде ось так: "btn/btn play".

Загальні стилі

Чудова функція Sketch - це загальні стилі. Вони допомагають працювати задано гайдлайну. І швидко змінювати характеристики об'єктів у багатьох місцях.

12. Створення та робота із загальними стилями

Працює це таким чином: створіть елемент і задайте йому необхідні стилі (колір, прозорість, межа, тіні, розмиття або вирівнювання, шрифт, розмір шрифту тощо), далі натисніть на “no shared style” у меню, що випадає, виберіть “create new shared style ”. Далі створіть нову фігуру і для неї в полі "no shared style" виберіть щойно створений стиль. Тепер у нас на двох постатях використовуються однакові стилі. Якщо буде необхідно змінити, наприклад, всі кнопки з жовтого на червоний, то ми можемо змінити його на будь-якій фігурі і натиснути на кнопку оновити біля назви стилю. Це набагато швидше та зручніше, ніж змінювати колір на кожній кнопці.

Символи та загальні стилі – це чудові інструменти. Потрібно розуміти, як їх грамотно використати.

Символи підходять для блоків та елементів. Їх можна рухати, копіювати, заповнювати контентом.

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

Зображення

13. Додавання зображенняпатерном у фігуру

Замість масок можна заливати зображення патерном на фігуру. Тоді при зміні розмірів не змінюються пропорції зображення, на відміну використання масок. Нижче на гіфці зображені дві картинки: ліворуч у масці, праворуч патерном. Можете помітити, як по-різному поводяться зображення при зміні розмірів у фігур.

Адаптація макетів

14. Функція Group Resizing

У Sketch можна настроювати поведінку об'єкта при зміні розміру його батьківського елемента. Для цього виділіть необхідний об'єкт, він обов'язково повинен бути в папці або символі, і праворуч в меню "Resizing" виберіть одну з можливих поведінок:

• Stretch - це стандартна поведінка для шару групи. Воно розтягує елемент, але важливо пам'ятати, що не є пропорційним.
• Pin to corner використовується для закріплення елемента на заданій відстані від межі групи. Скетч автоматично обчислює які межі ближче та щодо них працює.
• Resize object – це масштабування шару. Підходить для зображень.
• Float in place – зберігає відносне положення об'єкта. Зручно використовувати для відстаней між об'єктами, які мають змінюватися пропорційно залежно від розміру групи.

Як це працює на реальних прикладах, можете прочитати тут.

15. Математичні розрахунки значень

У всі поля можна вводити математичні вирази. Наприклад: нам треба збільшити ширину фігури на 15 px, для цього прописуємо в полі widht: 480 (ширина в даний момент) + 15, тиснемо ентер, готово! Наша фігура шириною 495 px.

16. Різне закруглення кутів у фігури

Для цього в полі радіус прописуйте значення через слеш. Наприклад: 5/0/10/5, девідповідно кути фігури: верхній лівий / верхній правий / нижній правий / нижній лівий.

17. Зміна стандартного виду фігур

За замовчуванням у Sketch усі фігури створюються із заданим кольором, кордоном та прозорістю. Всі ці значення за замовчуванням можна змінити на ті, які вам потрібні. Для цього: створіть фігуру; Змініть її параметри на необхідні; зайдіть в Edit > Set Style as Default. Тепер нові фігури будуть створюватися з новими параметрами.

18. Налаштувати панель інструментів

У Sketch можна прибрати/додати необхідні інструменти на панель інструментів. Для цього натисніть на ній правою клавішею миші та виберіть Customize Toolbar; перетягніть потрібні елементи на панель, а непотрібні витягніть з панелі.

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

• http://sketchshortcuts.com - список гарячих клавіш у Sketch;
• https://www.sketchappsources.com - безліч цікавих матеріалів та ресурсів для роботи в Sketch;
• https://sketchapp.tv - ще один сайт із різними матеріалами для Sketch;
• https://sketchtalk.io - портал, де люди спілкуються на тему роботи в Sketch. Можна знайти вирішення різних проблем із програмою;
• http://www.sketchtips.info - статті з цікавих хаків у скетчі;
• http://sketchapp.me/ — найбільша українськомовна спільнота зі скетчу.

Тепер, коли ви навчилися користуватись усіма цими функціями, швидкість вашої роботи зросте в рази. Якщо у вас виникли питання чи рекомендації напишіть мені в соціальних мережах: vk/fb/telegram @farguk

---