State Machine
Переключатель состояний
По-русски | In English
State Machine — плагин для Скетча. По ⌃⌘S переключает активную вкладку на таб-баре, пункт в меню навигации или номер страницы в пагинаторе.
Как работает
Дизайнер пишет в названии компонента на какой элемент переключить выделение и нажимает ⌃⌘S. Плагин находит указанный слой, слой с отличающимся стилем и меняет их стили местами.
Чем больше элементов внутри компонента, тем полезнее State Machine. Утомительно создавать по символу на каждое состояние индикатора из десятка страниц и добавлять на макет через Insert → Symbol. Процесс со State Machine:
- Скопировать компонент.
- ⌘R, заменить айди.
- ⌃⌘S.
Скачайте Examples.sketch,
поиграйте с примерами —
станет понятнее
Организация компонента
Чтобы State Machine сработал, нужно правильно организовать компонент. Правильно подготовленный компонент это:
- Группа слоев, стиль одного отличается.
- В именах слоев — ключ и айди.
- В имени группы — ключ и айди одного из слоев.
Учитывайте в работе:
- State Machine игнорирует другие группы внутри компонента и слои без ключа.
- Ничего не делает, если слоев с ключем в компоненте меньше трех.
- Считает идентификатором слоя все, что находит после ключа.
Затраты на создание структуры и правильные имена окупаются автоматизацией дальнейшей работы с компонентами и аккуратностью исходника.
Попробуйте плагин RenameIt в связке со State Machine
Подходящие компоненты
Плагин работает с интерфейсными компонентами, состоящими из нескольких однородных элементов, среди которых один активен.
Осторожно с выключенными стилями
Если State Machine глючит, проверьте слои компонента на выключенные стили. Если взять одинаковые слои, одному добавить новую заливку, а потом отключить, то Скетч запишет параметры выключенной заливки в стиль. Получится, слой с формально отличающимся стилем, будет выглядеть как соседи. State Machine посчитает такой слой образцом активного и назначит его стиль указанному.
State Machine позволяет дизайнеру обращаться с компонентом, как с единым целым. Спроектировать однажды и дальше работать как с черным ящиком. Подавать управляющий сигнал (айди слоя в названии компонента), вместо того, чтобы залезать каждый раз «под капот».
