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

Cover image for 7 новых интересных плагинов для Sketch
Редакція
Редакція

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

7 новых интересных плагинов для Sketch

Slicer - плагин для экспорта исходников

Сортировка по папкам

Выберите пресет (или кастомизируйте его) и ваши нарезки будут названы и отсортированы по папкам.

горячие клавиши Slicer

Настройте вашу нарезку один раз и нажимайте ⌘ + E постоянно для экспорта используя одинаковые настройки

Slicer экспорт для андроид

Нарисуйте 4 черных прямоугольника один раз и смотрите, как они будут экспортированы во все размеры Android устройств

9patch Slicer

Руководство по работе с 9-patch

Для работы с 9-path, следуйте правилам работы:

  • Нарисуйте 4 черных патча и сгруппируйте их
  • Сгруппируйте контент (лучше добавить актуальную нарезку или маску внутрь для того, чтобы быть уверенным, что это необходимый размер)
  • Сгруппируйте 2 группы и назовите эту группу так, чтобы в конце было ".9"

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

Symbol organizer - плагин для упорядочивания символов Sketch

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

symbol-organizer

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

Sketch Guides - плагин для создания быстрых направляющих в Sketch

Плагин для Sketch с простым и понятным интерфейсом, который позволяет быстро добавлять точные направляющие на границы и центральные точки. Никогда это еще не было проще и быстрее.

Sketch Guides панель инструментов

Интуитивный пользовательский интерфейс

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

Sketch Guides

Точное определение

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

screen-32

Процесс дизайна становится точнее и быстрее

На протяжении нескольких лет, я создавал UI в Photoshop и использовал плагин Velositey 1.0 и он помогал мне экономить много времени и не устанавливать направляющие вручную. После перехода на Sketch, я не мог найти похожий плагин, поэтому я попробовал создать его сам. Надеюсь, вам понравится.

Скачать плагин с github (доступен для Sketch 40+)

QuickColor Sketch - плагин для быстрого применения цвета

Плагин для Sketch, который позволяет применять цвета из палитры цветов к выбранным объектам.

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

После того, как у вас есть документ с цветами вашего Sketch файла, используйте сочетание клавиш Cmd + ] для применения первого цвета из цветовой палитры в документе к существующему заполнению шейпа объекта. После нажатия указанного сочетания клавиш повторно, вы примените второй цвет из документа. Данное сочетание клавиш перемещает вас по очереди цветов в палитре. Для возврата к предыдущему цвету нажмите Cmd + [

Если текущий цвет объекта уже есть в цветах документа, будет применен следующий цвет.

68747470733a2f2f7777772e64726f70626f782e636f6d2f732f68336734753168633368686d6a68652f446f63756d656e74436f6c6f72735461622e706e673f7261773d31

Информация и отзывы

Если у вас возникли вопросы или вы обнаружили ошибку, обратитесь ко мне в Twitter: @colesperks

Обратите внимание: Данный плагин работает только с непрозрачностью в 100%.

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

Плагин для обрезки строки текста в Sketch

Сочетание клавиш: ctrl+alt+cmd+t

Обрезайте количество строк в текстовом поле путем добавления многоточия при необходимости. Это работает для слов и символов. Большинство идей были взяты из плагина Sketch data populator.

trimline-word

trimline-character

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

Butter плагин состыкует ваши слои

Данный плагин состыкует ваши слои вместе.

Этот плагин занимает место между инструментами "выравнивания" и "распределения". Вместо выравнивания объектов по одной оси или равномерного распределения объектов,

я хотел состыковать объекты вместе, удалив пробелы и наложения между ними.

Обновление V2: добавлена опция разделения пробелами!

Конфигурация сочетания клавиш

Вы можете настраивать сочетания клавиш: Apple > Preferences > Keyboard > Shortcuts. Руководство.

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

Плагин Sketch Design Doc для экспорта гайдлайнов

Этот плагин экспортирует простой вебсайт используя набор условных обозначений и документ Sketch в качестве структуры. Мы назвали данный плагин “design doc” потому, что по сути, мы используем его для экспорта дизайн гайдлайна, но также, используем для многих других вещей.

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

Как установить

  1. Скачайте и откройте sketch-designdoc-master.zip
  2. Откройте DesignDoc.sketchplugin
  3. Готово!

Как он работает

Плагин сканирует документ и сторит страницу на основании данных правил:

Рабочие области ⇒ Структура веб страницы

Плагин сканирует страницы в панеле по порядку меню. Плагин генерирует index.html страницу, которая осуществляет переход к первому элементу меню.

  • Плагин игнорирует страницу Symbols.
  • Если имя страницы начинается с нижнего подчеркивания _, плагин игнорирует страницу.
  • _Settings - особый случай.

001-pagesmenu

Рабочие области ⇒ Структура веб страницы

Порядок рабочих областей на панеле зависит от последовательности контента на веб странице.

  • Если имя рабочей области начинается с нижнего подчеркивания _, плагин не генерирует заголовок для секции и не делает запись в меню.
  • Если имя рабочей области начинается со слеша /, плагин делает отступ на один уровень контента в меню и создает более легкий заголовок для контента.

002-artboardsstructure

Текст рабочей области

Каждая рабочая область имеет текст описания. Создайте текстовый слой и назовите его [name-of-the-artboard].md. Используйте разметку для форматирования выходных файлов. Плагин будет игнорировать стиль, примененный к слою.

003-artboardtext

Вводная часть

Создание текстового слоя с именем _Preface.md в странице, будет отображать введение на уровне веб страницы. Этот текстовый слой поддерживает также разметку страницы.

004-preface

Настройка

Кастомизируйте логотип, цвет меню и цвет ссылок на странице при необходимости (_Settings). Эта страница не является обязательной.

  • Кастомизируйте логотип путем добавления рабочей области с именем _logo. Если рабочая область отсутствует, выходная переменная не будет содержать логотип.
  • Кастомизируйте цвет меню при помощи векторного слоя с именем _primary.
  • Кастомизируйте цвет ссылок на странице при помощи векторного слоя с именем _secondary

005-settings

Дальнейшее развитие

  • Выходные переменные пока не адаптированы под мобильные устройства

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

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