Плагіни закладки у Sketch, генерація стилів та експорт слайсів у Adobe After Effec

Вкладені символи – це, поза всяким сумнівом, найкрутіша фішка Sketch

Поділитися

Плагін Bookmark: створюємо закладки у документі Sketch

Зробіть закладку в потрібному місці та розкрийте її у Sketch.app

Працюючи з довгими документами в Sketch.app, я постійно думав, як було б зручно швидко переміщатися між потрібними частинами. Зрештою я написав для цього невеликий скрипт. Ви можете зберегти до 5 закладок на кожній сторінці та швидко переміщатися між ними.

Встановлення не повинно викликати особливих проблем. Ось два способи:

Встановлення за допомогою Sketch Toolbox (рекомендується)

Встановіть програму з http://sketchtoolbox.com/
Встановіть плагін за допомогою програми.
Можете розпочати його використання.

Встановлення з репозиторію

Завантажте та відкрийте Bookmark-master.zip
Перейдіть в меню Sketch в Plugins ▸ Manage Plugins… ▸ (Settings gear symbol) ▸ Show Plugins Folder
Помістіть Bookmark.sketchplugin у знайдену директорію плагінів

Як використовувати

Щоб завантажити закладку, виберіть Plugins ▸ Bookmark ▸ Load bookmark 1 на панелі меню Sketch або використовуйте клавішу fn + 1 , щоб відкрити збережену закладку. Якщо ви зберігаєте нову закладку на той же номер, стара стирається.

Наразі Bookmark підтримує до 5 закладок на одну сторінку. Якщо з якоїсь причини ви хочете видалити всі закладки для поточної сторінки, скористайтеся відповідною опцією в меню плагіна.

fn + ⇧ shift + 1 – Зберегти закладку 1 для поточної сторінки
fn + ⇧ shift + 2 – Зберегтизакладку 2 для поточної сторінки
fn + ⇧ shift + 3 – Зберегти закладку 3 для поточної сторінки
fn + ⇧ shift + 4 – Зберегти закладку 4 для поточної сторінки
fn + ⇧ shift + 5 – Зберегти закладку 5 для поточної сторінки
fn + 1 – Перейти на закладку 1 для поточної сторінки
fn + 2 – Перейти на закладку 2 для поточної сторінки
fn + 3 – Перейти на закладку 3 для поточної сторінки
fn + 4 – Перейти на закладку 4 для поточної сторінки
fn + 5 – Перейти на закладку 5 для поточної сторінки

Генератор стилів Sketch

Sketch Styles Generator - це плагін, створений для Sketch, допомагає дизайнерам у генерації загальних стилів (Shared Styles) для Design System без необхідності звертатися до різних посібників від сторонніх інструментів типу Craft.

Чому цей плагін?

Sketch не дозволяє генерувати безліч загальних стилів (текст та/або фігури) одночасно
Sketch додає суфікс Style до назви кожного стилю, який ви створюєте
Craft та інші інструменти змушують діяти в рамках певних стандартів, які завжди підходять під вашу стилізацію.

Якщо ви зіткнулися як мінімум з однією з перерахованих вище проблем, то напевно знаєте, наскільки складним може бути bootstrap дизайн-системи. Створення вручну, перейменування та повторні перевірки кожного загального стилю забирають багато часу. А час – це найдорожчий ресурс!

Sketch Styles Generator дозволяє виділити будь-яку кількість шарів (тексти, фігури, або все відразу) і генерувати безліч загальних стилів, які будуть називатися точно як шари.

Вручну

Завантажте репозиторій у вигляді zip-архіву
Розархівуйте файл sketch-style-generator.zip
Перейдіть до папки sketch-styles-generator/plugin/
Двічі клацніть на Sketch Styles Generator.sketchplugin для встановлення

Через термінал

Клонуйте репозиторій Github

Перемістіть до директорії плагінів

Відкрийте плагін для встановлення у Sketch

Використання

Перейменуйте шари так, як ви хотіли б назвати майбутні загальні шари. Цей нудний процес можна значно прискорити за допомогою плагінів на кшталт Find-And-Replace та RenameIt.
Виділіть всі шари, неважливо, фігури це чи текст
Запустіть плагін через меню Plugins->Styles Generator->Generate Shared Styles, або за допомогою гарячої клавіші ctrl+cmd+s
Маленька собачка внизу вікна покаже кількість стилів, що згенерували, і як багато стилів було пропущено.

Sketch Styles Generator зараз повністю інтегрований у Sketch Runner, відмінний інструмент для прискорення роботи у Sketch. Ви можете запустити плагін, просто ввівши перші літери його назви.

Що означає “пропущені стилі”?

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

Що станеться, якщо виділити безліч елементів, включаючи символи?

Sketch Styles Generator визначить тип виділеного шару, автоматично виключить символи та інші сутності, які не можна конвертувати у текстовий чи загальний стиль.

Плагін Sketch2AE: експорт слайсів з Sketch до Adobe After Effects

Цей Sketch-плагін дозволяє експортувати слайси в Adobe After Effects та автоматично їхпозиціонувати. Більше того, ви можете використовувати опцію Save Frame As Photoshop Layers усередині AE для експорту вмісту у Photoshop!

Завантажте файл плагіна та розархівуйте.
Двічі клацніть на Sketch2AE.sketchplugin.

Як використовувати:

Збережіть свою роботу у Sketch.

Виділіть групи шарів, які потрібно експортувати до списку шарів (згрупуйте, якщо шар поза групою). Запустіть Plugins -> Sketch2AE -> Generate ExportSlices.
Запустіть Plugins -> Sketch2AE -> Export Artboards, потім задайте довжину композиції та FPS у спливаючій панелі, виберіть артборди для експорту.
Натисніть кнопку ОК і виберіть місця збереження файлу .jsx, що згереновано, і папки slice.
В After Effect，запустіть File -> Script -> Run Script File, виберіть файл .jsx, композиції згенеруються автоматично.

**ПРИМІТКА: Зберігайте файл “.jsx” та папку “slice” в одній батьківській папці.

Поверніться до Sketch, можете запустити плагін через Plugins -> Sketch2AE -> Clear ExportSlices – щоб очистити поточні ExportSlices (слайси для експорту).

Можливі проблеми:

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

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

** З обережністю використовуйте гарячі клавіші, щоб уникнути конфліктів з іншими плагінами

Control + Alt + S : Генерувати експорт-слайси
Control + Alt + E: Експортувати артборди
Control + Alt + C : Очистити експорт-слайси
Control + Alt + H : Допомога