Лучшие Sketch плагины для UX/UI дизайнеров в 2018

28.12.2017

1. Marketch

Как правило, после создания макета дизайнерам нужно передать фронтенд разработчикам точные размеры картинок, шрифтов и интервалов, и Marketch сильно упрощает этот процесс.

Marketch – это плагин для Sketch 3, который автоматически генерирует HTML страницу с CSS стилями, позволяя использовать такие супер полезные функции как динамические аннотации и преобразование единиц измерения.

Этот плагин не только помогает дизайнерам снизить нагрузку, но и позволяет просматривать параметры всех элементов, включая CSS код. К тому же, этот плагин генерирует HTML локально, решая за вас проблему безопасности и приватности файлов.

Sketch плагин

Скачать: https://github.com/tudou527/marketch

Туториал:

Шаг 1: Запустите Marketch —> Экспортируйте как Zip файл

Marketch туториал

Шаг 2: Назовите файл и экспортируйте

Marketch туториал

Шаг 3: разархивируйте Zip и откройте HTML файл, чтобы протестировать результат в браузере

Демо: http://tudou527.github.io/marketch/

2. Mockplus

Хорошо известно, что Sketch предназначен для работы с векторной графикой. Если мы хотим делать интерактивные макеты и работать в команде с другими дизайнерами, то плагин Mockplus для Sketch крайне рекомендован. Как только вы закончите разрабатывать свой дизайн в Sketch, вы можете экспортировать MP файл и начать прототипирование в Mockplus, что позволяет нескольким дизайнерам работать с команде над одним файлом и добавлять аннотации.

Sketch плагин

Скачатьhttps://www.mockplus.com/download

Туториал:

Шаг 1: Скачайте бесплатный плагин. Разархивируйте Zip файл и дважды кликните на .sketchplugin файл.

Marketch туториал

Шаг 2: После завершения работы над дизайном выберите “Plugins” — “Mockplus” — “Export project files”

Mockplus туториал

Шаг 3: Отредактируйте настройки вашего проекта. Вы также можете выбрать тип проекта и размер экспортируемого изображения. После всех необходимых изменений в настройках кликните “Export”, чтобы экспортировать контент из Sketch.

Mockplus туториал

3. Content Generator Sketch Plugin

При разработке дизайна некоторых страниц нам может понадобиться добавить некоторые данные, чтобы улучшить точность макета. Самый обычный способ это сделать – добавить различные аватары, отличные друг от друга. Не переживайте, этот плагин поможет вам быстро добиться этого эффекта: нужно просто выделить нужные элементы, и плагин рандомно выберет и заполнит Аватар.

Sketch плагин

Плагин также может рандомно генерировать имя пользователя, номер телефона и адрес электронной почты – очень полезно для создания страницы “контакты”.

Sketch плагин

Скачать плагин: https://github.com/timuric/Content-generator-sketch-plugin

Важно отметить, что заполненные данные могут также быть использованы в плагине Mockplus.

Sketch плагин

При использовании изображений в качестве компонентов, плагин автоматически поместит изображения в сетку, так что вам не придется искать другие материалы. Изображения могут быть нескольких типов: картинка с placeholder’ом, аватар, портреты персонажей, дизайн, бизнес и т.д. Если используется текст, то для него можно выставить “auto-fill type” —> “Date”, и тогда весь текст превратится в рандомные даты в сетке.

Sketch плагин

4. Rename it

Во время разработки дизайна нам часто приходится изменять графическое имя. Желательно, чтобы имена отражали параметры и свойства, чтобы можно было быстро и легко найти нужный слой. Rename it станет вашим отличным помощником.

Sketch плагин

Скачать плагин: https://github.com/rodi01/RenameIt

Туториал:

Шаг 1: Выберите элементы, для которых нужно изменить названия.

Шаг 2: Выберите Plugins —> Rename it и задайте названия во всплывающем окне. % W% H – переменные, и они будут заполнены автоматически в зависимости от размера изображений. Все что нам нужно – это добавить правила и нажать ОК.

5. IconFlower

Этот плагин отлично подходит для создания популярных бэкграундов с множеством иконок, так что вам не придется вручную перетаскивать иконки по одной в разные части полотна. Нужно только добавить все материалы на полотно, выделить их все и кликнуть на IconFlower, который сам автоматически распределит иконки.

IconFlower туториал

Скачать плагин: https://github.com/avadhbsd/IconFlower

Туториал:

Шаг 1: Установите IconFlower плагин для Sketch.

Шаг 2: Создайте Artboard и разместите множество иконок/объектов/слоев на artboard (вы можете использовать Iconjar для перетаскивания слоев): чем больше – тем лучше.

Шаг 3: Выделите все иконки/объекты/слои.

Шаг 4: Запустите плагин.


Перевод статьи 5 Best Sketch Plugins for UX/UI Designers in 2018

Автор оригинального текста: linda