UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Плагины: закладки в Sketch, генерация стилей и экспорт слайсов в Adobe After Effects
Редакція
Редакція

Опубліковано

Плагины: закладки в Sketch, генерация стилей и экспорт слайсов в Adobe After Effects

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

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

Установка

Установка не должна вызвать особых проблем. Вот два способа:

Установка с помощью Sketch Toolbox (рекомендуется)

  1. Установите приложение из http://sketchtoolbox.com/
  2. Установите плагин, используя приложение.
  3. Можете приступить к его использованию.

Установка из репозитория

  1. Скачайте и откройте Bookmark-master.zip
  2. Перейдите в панели меню Sketch в Plugins ▸ Manage Plugins... ▸ (Settings gear symbol) ▸ Show Plugins Folder
  3. Поместите Bookmark.sketchplugin в найденную директорию плагинов

Как использовать

Выберите Plugins ▸ Bookmark ▸ Save bookmark 1 в панели меню Sketch или используйте горячую клавишу fn + ⇧ shift + 1 для сохранения текущей позиции в документе в закладки. Чтобы загрузить закладку, выберите 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

$ git clone https://github.com/lucaorio/sketch-style-generator

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

$ cd sketch-styles-generator/plugin

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

$ open Sketch\ Styles\ Generator.sketchplugin

Использование

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

Sketch Styles Generator - 1 Sketch Styles Generator сейчас полностью интегрирован в Sketch Runner, отличный инструмент для ускорения работы в Sketch. Вы можете запустить плагин, просто введя первые буквы его названия. Sketch Styles Generator - 2

FAQ

Что означает “пропущенные стили”? Если есть несколько слоев с одним названием, генерируется только первый. После того, как я поработал с плагином какое-то время, он показался полезнее, чем опции удаления/обновления/дублирования общих стилей. Что случится, если выделить множество элементов, включая символы? Sketch Styles Generator определит тип выделенного слоя, автоматически исключит символы и другие сущности, которые нельзя конвертировать в текстовый или общий стиль. Скачать плагин

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

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

Установка:

  1. Скачайте файл плагина и разархивируйте.
  2. Дважды кликните на Sketch2AE.sketchplugin.

Как использовать:

Сохраните свою работу в Sketch.

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

**ПРИМЕЧАНИЕ: Храните файл ".jsx" и папку "slice" в одной родительской папке. Вернитесь в Sketch, можете запустить плагин через Plugins -> Sketch2AE -> Clear ExportSlices, чтобы очистить текущие ExportSlices (слайсы для экспорта). Sketch2AE - 1 Sketch2AE - 2 Sketch2AE - 3

Возможные проблемы:

  • Плагин не может экспортировать векторные фигуры, редактируемые тексты, стили слоев. Все сглажено.
  • По умолчанию генерирует 1х слайсы. Если нужно 2х или другой размер, нужно экспортировать вручную.
  • Если в файле не хватает шрифтов, ExportSlices может глючить.

Горячие клавиши:

**С осторожностью используйте горячие клавиши во избежание конфликтов с другими плагинами

  • Control + Alt + S : Генерировать экспорт-слайсы
  • Control + Alt + E : Экспортировать артборды
  • Control + Alt + C : Очистить экспорт-слайсы
  • Control + Alt + H : Помощь

Скачать плагин

Топ коментарі (0)