Определите разные состояния и умело переключайтесь между ними.

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

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

Хочу представить вам новый плагин Sketch, который решит эту проблему.

Давайте рассмотрим пример

Скажем, мы создаем приложение с двумя скинами: день и ночь, а также есть кнопка с тремя состояниями: нормальное, подсвеченное и отключенное состояние. Также есть два других состояния отключенного положения: нормальное и в обработке.

1. Создание групп состояний

Давайте начнем с двух определений:

  1. Группа состояний (State reference group): Специально названная группа, чьи дети и потомки используются для переключения состояний. Так что эти группы будут нашими переключателями.
  2. Слой состояния (State layer): Специально названный слой или группа. Он соединяет группы состояний с настоящими состояниями.

Вот группы состояний из нашего примера:

Плагин State Switch Master - мастер переключения состояний - создание групп состояний

Как и мы, вы можете создать вложенные состояния. Плагин поддерживает неограниченное количество вложенных состояний.

2. Связь групп состояний с реальными группами

Связывание — это вроде пометки на группе, которая говорит «Эта группа связана с состоянием, ок?». После связывания, плагин будет знать, какие группы прятать, а какие показывать при переключении состояний. Есть две команды для связки:

Плагин State Switch Master - Связь групп состояний с реальными группами

Организовать связку очень легко — просто выберите слой внутри группы состояния и нажмите shift + control + C. Затем выберите группу, которую хотите привязать, и нажмите shift + control + V. Вуаля! Плагин создает слой состояния в этой группе. Вы можете создать слой состояния и назвать его самостоятельно, но быстрее будет поручить это дело плагину.

Плагин State Switch Master - мастер переключения состояний - пример

Примечание: GIF не отражает весь процесс. Также вы можете улучшить эффективность, настроив одну ссылку и используя ее в нескольких группах.

Секрет: Shift + Control + C = Shift + Control + V. Я даю две команды, потому что это более естественно смотрится, как копирование и вставка. Если вам так больше нравится, используйте одну и ту же команду для обеих операций.

3. Давайте попробуем мастер переключения состояний!

Плагин State Switch Master - мастер переключения состояний - как это работает

4. Меняем Scope

Scope — это набор групп состояний, к которому применяется действие. Есть три набора: All Pages (все страницы), Current Page (текущая страница), Artboard (артборд). Вы можете между ними переключаться, нажав shift + control + D.

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

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

Некоторые подробности и предложения

Осторожно с названиями

Плаин работает только когда слои в группах состояний и слои состояний в обычных группах названы корректно. Если у вас получились какие-то странности, сначала проверьте именно имена слоев. Имена могут прийти в несоответствии при изменениях в иерархии.

Каждый шаг нужно связывать

Если одна из групп во вложенной группе состояний не связана, все может испортиться.

Иерархия групп

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

Смена множества состояний одновременно

И это вы тоже сможете сделать.

Замена горячих клавиш

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

  1. Sketch > Plugins > Reveal Plugin Folder…
  2. Найдите файл и кликните на него правой кнопкой мыши: State Switch Master. sketchplugin > Show Package Content.
  3. Contents > Sketch > manifest.json. (Откройте файл в редакторе.)
  4. Измените горячие клавиши и сохраните изменения. (Вам понадобится кликнуть на команду вручную в первый раз, иногда она начинает работать сразу после этого.

Не используйте плагин, чтобы разместить все на одном артборде!

Я думаю, это не нужно объяснять. Пожалуйста, не делайте этого!

Скачайте плагин и пример

Вы можете установить мастер переключения состояний через Sketch Toolbox или скачав файлы и нажав дважды State Switch Master.sketchpluginbundle.

Вы можете скачать пример отсюда — хотя, он включен в архив.

[dt_button size="big" style="default" animation="none" color_mode="default" icon="" icon_align="left" color="" link="https://github.com/einancunlu/Sketch-State-Switch-Master/archive/master.zip" target_blank="true"]Скачать плагин State Switch Master[/dt_button]

Перевод статьи medium.com автора Emin İnanç Ünlü.