Зміст
- 01. Копіювати та вставляти напрямні
- 02. Засіб для очищення ескізів
- 03. Аніма
- 04. React Sketch.app
- 05. Плагін Git Sketch
- 06. ImageOptim
- 07. Чарівне дзеркало
- 08. Експортувати більше
- 11. Маркетч
- 12. Сегментовані кола
- 13. Ескізний бігун
- 14. Значок Шрифт
- 15. Знайти та замінити
Плагіни Sketch допомагають зробити Sketch ще кращим. Ескіз - це інструмент веб-дизайну, який вибирає багато для когось, і частина того, що робить настільки хорошим, - це спільнота людей, яка працює над розширенням його функціональних можливостей та можливостей шляхом створення власних плагінів.
Управління вашими плагінами Sketch стало простішим, ніж будь-коли. Плагіни оновлюються автоматично, а застарілі вимикаються. Робить екосистему плагінів ще більш корисною - це Sketch Cloud, служба обміну файлами, на яку може зареєструватися кожен, де ви можете переглядати, завантажувати та коментувати документи Sketch, якими розповсюджувались загальнодоступно або приватно безпосередньо з Sketch.
Тож давайте розглянемо найкращі плагіни Sketch - ті, які можуть кардинально змінити спосіб проектування користувацьких інтерфейсів. Визначивши потрібний, прочитайте, як встановити плагіни Sketch. Якщо ви любите свої веб-інструменти, не пропустіть наші улюблені інструменти веб-дизайну, конструктор веб-сайтів та обласне сховище. І пам’ятайте, ваш вибір постачальника веб-хостингу має вирішальне значення для успіху вашого сайту (наш посібник допоможе).
01. Копіювати та вставляти напрямні
- Завантажте тут
- Ціна: Безкоштовно
- Короткий зміст: Скопіюйте, вставте або видаліть напрямні зі своїх монтажних областей
Кожен дизайнер має стосунки любові / ненависті з гідами. Іноді вони абсолютно необхідні, а решту часу вони просто заважають вам. Якщо ви використовуєте напрямні замість варіанту макета Sketch, їх зміна для кількох монтажних областей може бути страшним кошмаром, але за допомогою цього плагіна легко копіювати, вставляти та видаляти напрямні з усіх ваших монтажних областей.
02. Засіб для очищення ескізів
- Завантажте тут
- Ціна: $2
- Короткий зміст: Отримайте свої дизайнерські файли так само чисто, як свисток
Будь-який дизайн ескізу, який пройшов кілька ітерацій, обов’язково підбере трохи сміття, наприклад, приховані шари, невідповідні позиції кордонів та невикористані стилі шарів.
Хоча це ще не кінець світу, щоб мати брудний файл Sketch, це може вплинути на передачу, і це полегшить життя кожному, хто повинен зрозуміти це в подальшому. Замість того, щоб переглядати все вручну, використовуйте Sketch Cleaner для автоматичного вирішення всіх поширених проблем.
03. Аніма
- Завантажте тут
- Ціна: Вільний вгору
- Короткий зміст: Створіть чуйні, високоточні прототипи
Раніше доступний як окремі безкоштовні плагіни - Auto Layout і Launchpad - тепер Anima - це все-в-одному плагін, розроблений, щоб допомогти вам створити чуйні макети із шпильками, стеками та відступами та високоякісні прототипи, які підходять для всіх екранів. Є ще безкоштовна версія, яка підтримує один проект; для необмежених проектів ціна починається від 25 доларів на місяць.
04. React Sketch.app
- Завантажте тут
- Ціна: Безкоштовно
- Короткий зміст: Надайте компоненти React в Sketch
Управління дизайнерськими активами в Sketch може бути складним. Цей зручний плагін Sketch забезпечує простіший та надійніший спосіб управління вашими активами. Реалізуйте свої проекти в коді як компоненти React, а потім використовуйте цей плагін, щоб зробити їх ескізними. Це також полегшує отримання та впровадження реальних даних у файли Sketch.
React Sketch.app був розроблений Airbnb для використання з його дизайнерською системою з метою подолання розриву між дизайнерами та розробниками.
05. Плагін Git Sketch
- Завантажте тут
- Ціна: Безкоштовно
- Короткий зміст: Клієнт Git, вбудований у Sketch
Цей плагін має на меті внести контроль версій у Sketch. Це працює, експортуючи зображення для кожної частини дизайну, а потім генеруючи гарні відмінності, щоб було зрозуміло, які зміни були внесені. Документуючи кожен крок процесу проектування, кожен із команди може бачити, як просувався проект.
Плагін Git Sketch був створений Матьє Дютуром, який відтоді перейшов до створення більш всеохоплюючої, платної системи контролю версій під назвою Kactus.
06. ImageOptim
- Завантажте тут
- Ціна: Безкоштовно
- Короткий зміст: Оптимізація зображень у Sketch
Хоча Sketch пропонує своє власне рішення для оптимізації файлів SVG, не існує різноманітних опцій для стиснення зображень JPG та PNG. Оскільки ImageOptim вже кілька років пропонує солідну послугу, має сенс, що ця функціональність буде додана до Sketch.
Будь-який дизайнер, який піклується про час завантаження та оптимізацію зображень (що повинно бути для всіх дизайнерів), повинен додати ImageOptim до свого набору інструментів. Зауважте, що, як і плагін, вам знадобиться основна програма ImageOptim (безкоштовно), встановлена у вашій системі macOS, і вам все одно потрібно позначити шари як експортувані в Sketch (для початку перейдіть до пункту «Експортувати та оптимізувати всі активи»).
07. Чарівне дзеркало
- Завантажте тут
- Ціна: Від $ 4 / міс
- Короткий зміст: Інструмент перетворення перспективи зображення
Якщо ви намагаєтеся створити вражаючі макети продуктів, але вам потрібно продовжувати стрибати у Photoshop, щоб розібратися з хитрощами, Magic Mirror може стати для вас порятунком життя. Це інструмент перетворення перспективи зображення, що дозволяє створювати макети перспектив та інші спотворені ефекти, не залишаючи Sketch.
08. Експортувати більше
- Завантажте тут
- Ціна: Безкоштовно
- Короткий зміст: Автоматично генерує зображення заповнювачів
Додавання зображень-заповнювачів до дизайну є необхідною частиною прототипування, але пошук справжніх зображень може нашкодити. Тож замість того, щоб витрачати час на це, залиште все це на Day Player. Це дозволяє додавати індивідуальні зображення заповнювачів до будь-якого документа Sketch із ряду різних служб зображень заповнювачів, тому найбільшим рішенням, яке вам доведеться прийняти, буде використання Білла Мюррея, Ніколаса Кейджа чи кошенят.
11. Маркетч
- Завантажте тут
- Ціна: Безкоштовно
- Короткий зміст: Створіть HTML-сторінку, яка може вимірювати та отримувати стилі CSS
Якщо ви хочете отримати стилі CSS зі своїх ескізів, тоді плагін, такий як Marketch, є абсолютно необхідним. Це дозволяє експортувати ваші монтажні області Sketch у вигляді zip-файлу, повного HTML-документів, які потім можна витягти, щоб витягти безліч солодких CSS, готових до роботи.
12. Сегментовані кола
- Завантажте тут
- Ціна: Безкоштовно
- Короткий зміст: Створюйте точну кругову графіку
Ось швидкий спосіб зробити сегментовані кола для діаграм та діаграм. Цей плагін може створювати різні стилі кругової діаграми, включаючи штрихові та галочкові кола, а товщини контролюються за допомогою простого списку значень, розділених комами.
13. Ескізний бігун
- Завантажте тут
- Ціна: Безкоштовно
- Короткий зміст: Прожектор для пошуку
Ескіз улюблений завдяки мінімалістичному робочому процесу клавіатури. З огляду на це, завжди є дві-три комбінації клавіш, про які ви завжди, здається, забуваєте або плутаєте їх з іншим дизайнерським додатком, таким як Photoshop, - і не будемо забувати ті менш поширені інструменти та функції, які не мають комбінації клавіш і приховані глибоко в Меню ескізу.
Sketch Runner вирішує ці проблеми і робить це таким чином, щоб користувачі macOS були знайомі - Sketch Runner - це macOS Spotlight, але для Sketch.
14. Значок Шрифт
- Завантажте тут
- Ціна: Безкоштовно
- Короткий зміст: Керування шрифтами значків
Шрифти значків - це високоефективний спосіб використання піктограм у веб-дизайні без необхідності експортувати та оптимізувати тонну графічних ресурсів. Зазвичай ми посилаємося на шрифти значків у голова> розділ веб-сторінок HTML, як це робимо з CSS та JavaScript. Однак використовувати їх у Sketch трохи складніше. На щастя, Icon Font полегшує це.
Після завантаження та встановлення Sketch IconFont завантажте файли шрифтів SVG або завантажте цей комплект шрифтів, який включає файли шрифтів для FontAwesome, Піктограми матеріального дизайну, Іонні значки та Піктограми простих ліній. Завершивши, перейдіть до Плагіни> Шрифт значків> Встановити пакет шрифтів, виберіть завантажені шрифти з діалогового вікна Відкрити файл, а потім перейдіть до Плагіни> Шрифт піктограм> Вставка сітки> [потрібний шрифт піктограми], щоб вставити значок.
Навіть якщо ви маєте намір створити власний набір піктограм для вашого дизайну, наявність у вашому розпорядженні готових піктограм може допомогти вам швидко зробити прототипи на ранніх стадіях дизайну, додавши трохи більше чіткості / вірності вашим макетам з низькою точністю. .
15. Знайти та замінити
- Завантажте тут
- Ціна: Безкоштовно
- Короткий зміст: Пошук і заміна тексту у вибраних шарах
Текстові редактори - не єдине місце, де вам потрібно знайти та замінити - це корисно і в Sketch. Цей плагін має безліч розширених опцій, і він дозволяє шукати екземпляри певних слів або фраз у тексті у вибраних шарах (і все, що міститься в ньому), а потім легко його замінити.
Наступна сторінка: Більше плагінів Sketch, що економить час
