Замена графики, удобное выравнивание фигур, создание прототипов, удаление дублей стилей и быстрый ресайз

Sketch Image Replaste

Это простой Sketch-плагин для замены изображений картинкой из буфера обмена.

Что нужно сделать:

Убедиться, что только одно изображение скопировано в буфер обмена

Установка

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

1. Скачать последнюю версию zip-архива и разархивировать
2. В Sketch отобразить папку плагинов через меню Plugins > Reveal Plugins Folder…
3. Поместить папку sketch-replace-images в Plugins

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

1. Сделайте скриншот или скопировать изображение в файл Sketch
2. Выделите один или больше слоев (изображений), которые нужно заменить
3. Нажмите CMD + SHIFT + Y
4. Вуаля! Изображение заменилось на вашу скопированную картинку.

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

Sketch Distributor

Этот плагин для Sketch распределяет выделенные объекты по вертикали или по горизонтали с заданным интервалом. Как здесь:

Установка

Советую использовать Sketch Toolbox, но вы также можете скачать и распаковать zip-архив и затем открыть Distributor.sketchplugin, Sketch откроет и установит этот плагин за вас.

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

Вы выделяете объекты, которые хотите распределить, и просите Distributor сделать одно из следующих действий:

1. Распределить по горизонтали (CTRL+OPTION+H) - появится диалог с выбранной опцией горизонтального распределения. Нужно задать интервал (в пикселях).
2. Распределить по горизонтали (CTRL+OPTION+V) - то же самое, только для вертикального распределения.
3. Распределить снова ((CTRL+OPTION+A) - применяет последние использованные настройки распределения к выделенным объектам.
4. Распределить (CTRL+OPTION+D), тот же диалог, что и выше с настройками предыдущего распределения.

Распределение, изображенное выше, получено вводом CTRL+OPTION+V, 10, ⮐. Ваши пальцы могут оставаться на клавиатуре. Помните, что при отрицательном значении отступа распределенные элементы могут накладываться друг на друга. (CTRL+OPTION+H, -14, ⮐)

Он работает с Runner

Если вы используете плагин Runner, можете запускать команды Distributor из него.

Известные проблемы

Плагин некорректно распределяет повернутые слои. Также у некоторых фигур в Sketch есть странные прямоугольные рамки. Из-за этого они распределяются не так идеально, особенно в вертикальном направлении. Возможно, обновления Sketch API помогут исправить эти недостатки. Скачать плагин

Плагин Click-Thru Prototype: создание кликабельного прототипа

Этот плагин для Sketch создает кликабельный HTML-прототип дизайна сайта, так что вы можете показать клиентам, как будет выглядеть их будущий сайт.

Установка

Для установки скачайте zip-архив и дважды кликните на файле Click-Thru Prototype.sketchplugin. Команды будут доступны в меню Plugins > Click-Thru Prototype. Чтобы увидеть плагин в действии, откройте demo.sketch и выберите опцию Plugins > Click-Thru Prototype > Export to HTML, или посмотрите на сгенерированный сайт в документации.

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

Вы можете создавать ссылки между артбордами, добавлять внешние ссылки или показывать JavaScript-диалог. После добавления всех этих элементов вы можете сгенерировать HTML-сайт текущей страницы, выбрав опцию Export to HTML. Сгенерированные файлы затем можно загрузить на сервер и показать клиенту.

Адаптивный дизайн

Плагин также справляется и с адаптивными макетами, нужно только соответствующе называть артборды, например, homepage, homepage tablet, homepage mobile. При изменении ширины браузера, будет показываться соответствующий артборд в экспортированном сайте.

Мобильное меню

На мобильном устройстве вы наверняка захотите показывать мобильное меню вместо стандартного горизонтального. Для этого нужно выбрать, какой слой будет кнопкой, показывающей меню. Для этого есть опция Set Mobile Menu Button. Также нужно задать слой мобильного меню, выбрав опцию Set Mobile Menu.

Изображения Retina

По умолчанию плагин покажет 2х-изображения для экранов высокой пиксельной плотности. Чтобы отключить эту опцию, выберите Retina Images Setting и переэкспортируйте страницу. Скачать плагин

Удаление дублированных стилей в Sketch

BETA-версия

Стили дублируются, когда вы копируете объекты из разных файлов с одинаковыми стилями. Скрипт находит названия дублированных стилей, изменяет стиль согласно первой сущности и удаляет копии. Плагин исправляет только названия стилей и не изменяет реальные параметры (не синхронизирует их), так что все стили с одинаковыми именами должны иметь одинаковые параметры. Вы можете либо проверить файл на наличие дубликатов ("Check for duplicates"), либо удалить дубликаты ("Remove duplicates"). На это скрипту понадобится время, так что не волнуйтесь, если Sketch выглядит “подвисшим”. Так как это бета-версия, лучше сделайте резервную копию sketch-файла перед использованием плагина.

Пример “до и после”

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

SketchSize: плагин для быстрого ресайза

Этот плагин помогает изменить размер дизайна простыми горячими клавишами. Вы легко сделаете экран-заставку или скриншот для app store и google play Генерирует 7 разных размеров изображений, включая iOS (iPHone 4 / 5 / 7 / 7plus) и Android (hdpi / xhdpi / xxhdpi）

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

1. Скачайте ZIP-файл и разархивируйте, откройте SketchSize.sketchplugin
2. Выделите артборд
3. Запустите команду Plugins > SketchSize > ChangeSize
4. Или нажмите ⌘ + shift + 1 на клавиатуре, чтобы изменить размер выбранного дизайна

Известные проблемы:

1. Плагин может масштабировать каждый элемент на артборде, все штрихи, включая радиус, текст и границы
2. Обработка символов будет оптимизирована в следующей версии
3. Не вставляйте символ "/" в название артборда. Это может привести к ошибкам сохранения обработанных файлов в папку.
4. Полученный артборд будет в 1-кратном варианте заданного размера, вы можете получить оригинальный размер сами : )

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