Определите разные состояния и умело переключайтесь между ними.
Мы все создаем различные группы для состояний, переключаем их видимость по одному, чтобы переключаться между состояниями или создаем копию артборда и помещаем в эту копию другое состояние, чтобы сэкономить время и не повторять весь процесс с нуля.
Выбирая второй способ, вы нагружаете страницу дубликатами. Такой метод можно выбрать, если нужно видеть все состояния сразу рядом, чтобы оценить общую картину. А в остальных случаях нужен инструмент или функция для создания состояний и легко между ними переключаться.
Хочу представить вам новый плагин Sketch, который решит эту проблему.
Давайте рассмотрим пример
Скажем, мы создаем приложение с двумя скинами: день и ночь, а также есть кнопка с тремя состояниями: нормальное, подсвеченное и отключенное состояние. Также есть два других состояния отключенного положения: нормальное и в обработке.
1. Создание групп состояний
Давайте начнем с двух определений:
- Группа состояний (State reference group): Специально названная группа, чьи дети и потомки используются для переключения состояний. Так что эти группы будут нашими переключателями.
- Слой состояния (State layer): Специально названный слой или группа. Он соединяет группы состояний с настоящими состояниями.
Вот группы состояний из нашего примера:
Как и мы, вы можете создать вложенные состояния. Плагин поддерживает неограниченное количество вложенных состояний.
2. Связь групп состояний с реальными группами
Связывание – это вроде пометки на группе, которая говорит «Эта группа связана с состоянием, ок?». После связывания, плагин будет знать, какие группы прятать, а какие показывать при переключении состояний. Есть две команды для связки:
Организовать связку очень легко – просто выберите слой внутри группы состояния и нажмите shift + control + C. Затем выберите группу, которую хотите привязать, и нажмите shift + control + V. Вуаля! Плагин создает слой состояния в этой группе. Вы можете создать слой состояния и назвать его самостоятельно, но быстрее будет поручить это дело плагину.
Примечание: GIF не отражает весь процесс. Также вы можете улучшить эффективность, настроив одну ссылку и используя ее в нескольких группах.
Секрет : Shift + Control + C = Shift + Control + V. Я даю две команды, потому что это более естественно смотрится, как копирование и вставка. Если вам так больше нравится, используйте одну и ту же команду для обеих операций.
3. Давайте попробуем мастер переключения состояний!
4. Меняем Scope
Scope – это набор групп состояний, к которому применяется действие. Есть три набора: All Pages (все страницы), Current Page (текущая страница), Artboard (артборд). Вы можете между ними переключаться, нажав shift + control + D.
Например, при выборе опции артборд, меняются только состояния элементов, которые размешены на одном артборде с выделенными группами состояний.
Совет для разработчиков плагинов Sketch: Избегайте использования диалоговых блоков, насколько это возможно. Например, для этой команды, сначала я реализовал ее с помощью диалогового и комбинированного окна. Но потом, тестируя, я понял, что лучше и приятнее будет использовать эту опцию без уточнения, что нужно выделить, а просто переходя на следующий.
Некоторые подробности и предложения
Осторожно с названиями
Плаин работает только когда слои в группах состояний и слои состояний в обычных группах названы корректно. Если у вас получились какие-то странности, сначала проверьте именно имена слоев. Имена могут прийти в несоответствии при изменениях в иерархии.
Каждый шаг нужно связывать
Если одна из групп во вложенной группе состояний не связана, все может испортиться.
Иерархия групп
Вы можете создавать состояния самыми разными способами, плагин поддерживает вложенные группы и множество состояний в одной группе.
Смена множества состояний одновременно
И это вы тоже сможете сделать.
Замена горячих клавиш
Есть множество плагинов, так что иногда одна и та же горячая клавиша может быть задействована в нескольких функциях. Если так случится, или если вы просто хотите изменить горячие клавиши, вы можете сделать это так:
- Sketch - Plugins - Reveal Plugin Folder…
- Найдите файл и кликните на него правой кнопкой мыши: State Switch Master.sketchplugin - Show Package Content.
- Contents - Sketch - manifest.json. (Откройте файл в редакторе.)
- Измените горячие клавиши и сохраните изменения. (Вам понадобится кликнуть на команду вручную в первый раз, иногда она начинает работать сразу после этого.
Не используйте плагин, чтобы разместить все на одном артборде!
Я думаю, это не нужно объяснять. Пожалуйста, не делайте этого!
Скачайте плагин и пример
Вы можете установить мастер переключения состояний через Sketch Toolbox или скачав файлы и нажав дважды State Switch Master.sketchpluginbundle.
Вы можете скачать пример отсюда – хотя, он включен в архив.
Перевод статьи medium.com автора Emin İnanç Ünlü.
Топ коментарі (0)