ВАЖНО: Этот плагин был обновлен для работы со Sketch 3.3+

Дизайн часто требует свободы и хаотичности. Но дизайн также нуждается в хорошей организации и структуре. Sketch хорош в обоих аспектах, но переход от свободного рисования к структурированным макетам с едиными стилями текста и цветовой гаммой представляет определенные трудности. Начинаете ли вы проект с чистых файлов или используете уже имеющиеся наработки, которые необходимо привести в порядок, Style Inventory поможет вам. Этот плагин дает обзор всех используемых стилей и помогает объединить стили идентичных слоев в один.

1
Лог изменений

26 апреля, 2015

  • Добавлен Symbols Inventory
  • Упрощен экспорт
  • Добавлен конфигуратор

14 апреля, 2015

  • плагины обновлены для работы со Sketch 3.3+

7 декабря, 2014

  • Все плагины перемещены в новый репозиторий Sketch Mate. Несколько дней потребуется на обновление документации.

Директория плагина

 

Inventory

Генерация ctrl + ⌘ + ⌥ + I

Selection

  • По цвету/выделить слои по цвету shift + ctrl + ⌘ + C
  • По цвету/выделить слои по цвету на артборде ctrl + ⌘ + C
  • По имени/выделить слои по имени shift + ctrl + ⌘ + N
  • По имени /выделить слои по имени на артборде ctrl + ⌘ + N
  • По String/заменить String shift + ⌘ + K
  • По стилю текста/выделить одинаковые текстовые стили shift + ctrl + ⌘ + T
  • По стилю текста/ выделить одинаковые текстовые стили на артборде ⌘ + control + T

Установка

Чтобы установить все плагины, скачайте их сначала, разархивируйте и поместите содержимое папки в вашу папку Sketch Plugins, перейдя в Sketch > Plugins > Reveal Plugins Folder…
Чтобы установить плагины выборочно, сначала нужно поместить файл библиотеки inventory.js в корень каталога Sketch Plugins. Это очень важно, так как все плагины работают с его функционалом.
Затем вы можете установить выбранные плагины двойным кликом на файл или простым перетаскиванием файла на иконку приложения Sketch. Это действие автоматически скопирует плагин в вашу папку Sketch Plugins.

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

Большинство плагинов имею предопределенные горячие клавиши. Вы всегда можете заменить их, отредактировав назначенные сочетания клавиш в скобках в конце первой строки плагина.
Например, первая строка Duplicate Artboard.sketchplugin:

// Duplicates the current artboard right next to it. (shift command d)

Вы можете использовать другие клавиши, такие как option, command, control, shift

Генерация

Эта команда может генерировать артборды, которые будут содержать все цвета, стили текста и символы документа. Выберите элементы для генерации в конфигураторе. Артборды будут сгенерированы на новой странице под названием «Style Inventory».
Горячая клавиша: ctrl + ⌘ + ⌥ + I

2

Экспорт мета-данных

При выборе этой опции в генераторе, Sketch экспортирует мета-данные и изображения вашего проект, которые вы можете использовать при разработке. Цвета экспортируются в JSON, символы в PNG, текстовые стили в JSON.
Горячая клавиша: ctrl + ⌘ + ⌥ + I

3

Выделить слои по цвету на артборде

На основе выбранного слоя, будут отобраны все слои текущего артборда, которые соответствуют заливке или цвету текста.
Горячая клавиша: ctrl + ⌘ + C

4
Выделить слои по цвету

Экспериментальная опция. На основе выбранного слоя будут отобраны все слои документа, соответствующие заливке или цвету текста выбранного слоя.

Выделить слои по имени

На основе выбранного слоя, будут выделены все слои, соответствующие его имени. Также выделение будет включать слои с добавочными номерами после дублирования (например, Rectangle 1, Rectangle 2, …)
Горячая клавиша: ctrl + ⌘ + N

Удалить строку

Удаляет все вхождения выделенной строки, встречающиеся в выделенном текстовом слое
Горячая клавиша: shift + ⌘ + K

5

Выделить следующий слой по цвету

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

Выделить следующий слой по стилю текста

Экспериментальная опция. На основе выделенного слоя будет выделен следующий слой с таким же стилем текста.

6
Style Inventory

Генерирует список визуальных стилей со всеми цветами и стилями текста, которые вы используете. Это поможет вам получить обзор используемых стилей, чтобы можно было объединить идентичные или очень близкие друг к другу стили в один. Также сгенерируется CSS файл с экспортом текстовых стилей.

Generate/Text Style Inventory

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

7

Generate/Color Inventory

Генерирует артборд со всем цветами, используемыми на текущей странице.
8

 

Rename/Rename selected layers

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

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