1 XdM5od47sfJ X6 WNIXxIg1 1160x620 - Плагин State Switch Master - мастер переключения состояний

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

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

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

Хочу представить вам новый плагин 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ü.

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5