Вы с энтузиазмом работали в Sketch и за это вы заслужили только высший балл. Но теперь пришло время поднять уровень знаний и улучшить рабочий процесс. Поэтому встречайте.

BaseAlign

BaseAlign Sketch плагин

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

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

Установите его сейчас

Batch Create Symbols

Batch Create Symbols Sketch плагин

Когда вы погружаетесь в работу и начинаете проектировать, легко переоценить себя и создать кучу элементов, которым суждено стать символами. Именно в эти моменты приходит мучительное напоминание… вы можете создавать только один символ за раз.

Плагин Batch Create Symbols позволяет вам выбрать несколько слоев, щелкнуть и заставить их все, волшебным образом, сразу стать символами. Он даже позволяет вам озаглавить группу символов или просто перенести имена слоев. Этот плагин однозначно нужно иметь в своем арсенале.

Установите его сейчас

Confetti

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

Установите его сейчас

Chromatic Sketch

 Chromatic Sketch плагин

Если вы когда-либо создавали красочный градиент, который был немного сероватым и тусклым посередине, то знайте, так бывает с RGB, немного невыгодным для создания красивых градиентных изображений с переходом между двумя разными цветами. Chromatic Sketch — это замечательный плагин, который использует математику, лежащую в основе цветового пространства LAB. Он возьмет ваш существующий градиент и сделает его красивее. Это определенно матемагически.

Установите его сейчас

Craft

Это замечательный плагин, который обязательно должен «висеть на поясе инструментов» каждого UI / UX дизайнера. Craft — это набор плагинов для Photoshop и Sketch, которые помогают оптимизировать рабочий процесс проектирования, автоматизируя однообразные действия и вытягивая более реалистичные образцы данных.

Craft состоит из следующих инструментов:

  • Duplicate: быстро скопируйте и разместите слой за мгновение
  • Library: создайте руководство по стилю внутри вашего файла Sketch. Он создает новую страницу с отдельной цветовой палитрой, шрифтами и стилями текста. Делитесь и синхронизируйте всю библиотеку со своей командой.
  • Data: привнесите реальный текст, изображения, JSON и живой веб-контент в ваш прототип. Это поможет сделать так, чтобы ваши прототипы стали реальными, не тратя время на создание ложных данных в приложении.
  • Sync: мгновенно отправляйте свои проекты в InVision — без сохранения, экспорта, перетаскивания или удаления. Просто выберите свои экраны в Sketch или Photoshop (для macOS и Windows), выберите прототип, который хотите синхронизировать, и просто импортируйте все свои экраны в InVision.
  • Freehand: быстрое отслеживание обратной связи в процессе разработки продукта в режиме реального времени.

Установите его сейчас

DynamicButton3.5

Современный преемник старого плагина Dynamic Button, который мы знаем и любим по более старым версиям Sketch. Одним щелчком мыши (или сочетанием клавиш) DynamicButton3.5 автоматически возьмет выделенный текстовый слой, сгруппирует его и разместит вокруг него прямоугольник с идеальными полями (выбранными вами). Создание кнопки текста не может быть быстрее или проще.

Установите его сейчас

Find and Replace

 Find and Replace Sketch плагин

Sketch — это не программа для обработки текста, поэтому, если у вас есть документ с большим объемом текста, может возникнуть необходимость в функциях «Поиск» и «Замена». Поскольку они не встроены в Sketch, установите плагин Find and Replace как можно скорее. Это может быть спасательным кругом для глобальных изменений текста.

Установите его сейчас

Find Instances of Symbol

Find Instances of Symbol — это ищейка, которую вы искали, когда пытались выяснить, куда в ваш документ был помещен символ. Запустите плагин, и вы мгновенно получите выделение, сделанное на выбранной странице, с каждым отдельным экземпляром выбранного символа.

Установите его сейчас

Flipsize

Если вы когда-либо работали с артбордом ландшафтной ориентации, а затем решили переключить его на портретную ориентацию, то Flipsize для вас. Запустите Flipsize, и тогда высота и ширина вашего артборда будут мгновенно преобразованы.

Установите его сейчас

Magic Mirror 3

Magic Mirror 3 - плагин для Sketch

Если вы перешли на Sketch c Photoshop, вы, время от времени, можете скучать по свободной трансформации. Например, когда вы пытаетесь поместить экран в перспективный макет. Magic Mirror 3 позволяет вставить артборд прямо в фигуру, и он автоматически примет вид фигуры. Если вы обновите связанный артборд, вы можете обновить перспективный макет с помощью клика и радоваться жизни, не погружаясь в Photoshop.

Установите его сейчас

Map Generator

Map Generator - плагин для Sketch

По той или иной причине мы все изучали Google Maps, чтобы сделать скриншот и сохранить его на своих компах. Ну … больше никогда. Map Generator захватит адрес и масштаб, а затем автоматически заполнит выбранную фигуру изображением вашей Google карты. Намного меньше работы.

Установите его сейчас

Nudge, Push, Shove

Nudge, Push, Shove плагин SKetch

Nudge, Push, Shove позволяет вам точно настроить сколько пикселей слоя будет перемещено подталкиванием с помощью клавиши со стрелкой, сдвига и нового интервала: Shove. Все 3 параметра позволяют вам ввести собственное значение в пикселях. Как обычно, Sketch с его функциональностью, следует вашему выбору.

Установите его сейчас

Pixel Perfector

Pixel Perfector плагин Sketch

Фактически неизбежно, что ваш документ будет содержать несколько слоев с размером или расположенных в плавающих значениях (ака половинчатые пиксели или доли пикселей). Трудная часть — это обнаружение таких слоёв, не говоря уже об их фиксации. Pixel Perfector может находить и выделять, или находить и исправлять любой слой до доли пикселя. Он может даже перейти на один уровень за раз, чтобы вы могли решить, как вы хотите округлить цифры.

Установите его сейчас

Random Size

Random Size плагин Sketch

Возможно, вы поняли из названия, что Random Size автоматически применит случайный размер к выбранным слоям. Что делает этот плагин более полезным, так это то, что вы можете произвольно выбирать ширину или высоту выбранных слоев в пределах минимальной и максимальной величины. Определенно нет способа быстрее построить столбчатую диаграмму.

Совет от профи: Плагин будет учитывать заблокированные пропорции, если вы хотите, чтобы объект не искажался.

Установите его сейчас

Remove All Disabled Styles

Чтобы быстро и легко очистить ваш документ до передачи, Remove All Disabled Styles будет прочесывать визуальные атрибуты и удалять все, что осталось непроверенным. Нажав на эти маленькие мусорные корзины, вы сможете сэкономить уйму времени.

Установите его сейчас

Remove All Guides

Удаление направляющих из документа может быть почти столь же утомительным, как их создание, особенно, если у вас их много. Запустите Remove All Guides, и вы все очистите в одно мгновение.

Установите его сейчас

Rename It

Rename It плагин Sketch

Итак, у вас есть несколько сотен слоев с именем rectangle copy? Все мы так делаем. Rename It поможет переименовать эти слои в пакетном режиме, чтобы очистить ваш документ для передачи кому-либо или просто для вашего удобства. У него даже есть несколько хитростей для изменения существующих имен слоев или даже поиска и замены в именах выбранных слоев. Он необходим для загруженных работой Sketch-дизайнеров.

Установите его сейчас

Repeat

Rename It плагин Sketch

Поскольку использование символов для глобальных элементов (например, навигация) на всех ваших экранах очень экономит время, им все же надо как-то попасть на эти экраны. Repeat возьмет выбранный слой (или слои) и мгновенно создаст копию в том же положении на каждом отдельном артборде. Теперь никогда не поздно добавить глобальный элемент к 195 артбордам.

Установите его сейчас

Runner

Runner плагин Sketch

Runner — это тот супер энергичный помощник, которого вы всегда хотели. Нажимайте сочетание клавиш и выскочит поле поиска, которое позволяет вам прыгать по вашему документу, вставлять символы, создавать стили и символы, применять стили и даже устанавливать плагины. Как Spotlight для Sketch. Это, безусловно, заставляет огромные документы ощущаться намного меньше.

Установите его сейчас

Save with Frame

Save with Frame — это быстрый и грязный способ экспортировать артборд имитируя отображение iPhone. У этого плагина есть изображения, встроенные для iPhone 6 и 7 во всех цветах так же, как и для Moto 360, если Вы предпочтете устройство, работающее на Android.

Установите его сейчас

Select By Name

Как следует из названия, Select By Name — это способ поиска слоев и их выбора на основе, как вы уже догадались, их имени. Это простой плагин, но он, безусловно, экономит время поиска по списку слоев, а затем отдельно делает выбор.

Установите его сейчас

Select Children

Select Children плагин Sketch

Еще один простой способ сэкономить время — Select Children, автоматически переместится в выбранную группу и выделит все слои внутри. После того, как вы привыкли к сочетанию клавиш (Option + Command + A), вы не сможете жить без этого плагина.

Установите его сейчас

Select Exportables

Select Exportables позволит вам всего за один клик выделить все артборды, группы, фрагменты и слои в документе, которые были сделаны экспортируемыми.

Установите его сейчас

Select Parent Artboards

Select Parent Artboards — это еще один плагин, который может сэкономить много времени, если вы привыкли использовать сочетание клавиш (Ctrl + Command + A). Просто выберите любой слой и нажмите сочетание клавиш, чтобы получить артборд, содержащий этот выбранный слой.

Установите его сейчас

Select Similar Layers

 Select Similar Layers плагин Sketch

Если вы перешли на Sketch с Illustrator, этот плагин заполнит дыру в вашем сердце. Select Similar Layers позволит вам сделать выделение, затем взять каждый другой слой с соответствующим цветом заливки, цветом границы, толщиной границы, шрифтом, прозрачностью, режимом наложения или именем. Как только вы привыкли пользоваться этим плагином, жить без него станет тяжело.

Установите его сейчас

Sketch Distributor

Sketch Distributor плагин Sketch

В дополнение к автоматическим настройкам выравнивания, встроенным в Sketch, у нас также есть возможность автоматически распределять интервалы между слоями. Иногда вы предпочитаете устанавливать определенное расстояние между слоями, а Sketch же просто усредняет существующее пространство.

Плагин SketchDistributor позволяет вам выбрать группу слоев и задать между ними определенное значение расстояния в пикселях. Больше никакой возни с подталкиванием пикселя к пикселю.

Установите его сейчас

Sketch Nearest 8

Подобно плагину Pixel Perfector, Sketch Nearest 8 помогает четко фиксировать объекты в пиксельной сетке. Отличие этого плагина в том, что он берет выбранный слой и подталкивает его по высоте или ширине до следующего значения, которое делится на 8. Для тех из вас, кто проектирует в системе 8-pt сеток, это несомненно сэкономит кучу времени и энергии.

Установите его сейчас

Sketchy Pies

Sketchy Pies плагин Sketch

Возможно, самое восхитительное название в этом списке, Sketchy Pies преобразует любой круг в круговую диаграмму, просто перечисляя шестнадцатеричные коды, разделенные запятыми, для желаемых цветов. После этого легко изменить цвета, изменив свойство цвета границы каждого сектора.

Совет от профи: Уменьшите толщину границ секторов, чтобы создать радиальный прогресс-бар.

Установите его сейчас

Sort Me

Sort Me плагин Sketch

Мы все сосредотачиваем внимание на том, чтобы наши артборды были упорядочены на холсте Sketch, но список слоев имеет тенденцию немного нарушать порядок. Sort Me быстро сортирует ваши артборды в списке слоев буквенно-цифровым способом. Вы можете даже выбрать сортировку по возрастанию или по убыванию, чтобы ваш документ работал так, как работает ваш мозг.

Установите его сейчас

Unlock All Layers

Unlock All Layers Sketch плагин

Этот плагин заполняет брешь в меню Sketch. Unlock All Layers избавит вас от проблемы поиска и разблокирования заблокированных слоев по одному. Безусловно, это функция, которая однажды может быть встроена в Sketch, ну, а пока этот плагин сэкономит вам время.

Установите его сейчас

Посетите эти бесплатные Sketch ресурсы:

Автор: Джозеф Анхело Тодаро — видео продюсер в InVision, UI/UX энтузиаст и любитель машин.