Image for post
Image for post

State Machine

Переключатель состояний

Roman Shamin
Aug 6, 2015 · 3 min read

По-русски | In English

State Machine — плагин для Скетча. По ⌃⌘S переключает активную вкладку на таб-баре, пункт в меню навигации или номер страницы в пагинаторе.

Image for post
Image for post
Нажал⌘R, вбил нужный номер, нажал ⌃⌘S

Дизайнер пишет в названии компонента на какой элемент переключить выделение и нажимает ⌃⌘S. Плагин находит указанный слой, слой с отличающимся стилем и меняет их стили местами.

Чем больше элементов внутри компонента, тем полезнее State Machine. Утомительно создавать по символу на каждое состояние индикатора из десятка страниц и добавлять на макет через Insert → Symbol. Процесс со State Machine:

  1. Скопировать компонент.
  2. ⌘R, заменить айди.
  3. ⌃⌘S.
Image for post
Image for post

Скачайте Examples.sketch,
поиграйте с примерами —
станет понятнее

Чтобы State Machine сработал, нужно правильно организовать компонент. Правильно подготовленный компонент это:

  1. Группа слоев, стиль одного отличается.
  2. В именах слоев — ключ и айди.
  3. В имени группы — ключ и айди одного из слоев.
Image for post
Image for post
Пример организации компонента: ключ и ID активного слоя в названии группы, слои включают в себя ключи и ID

Учитывайте в работе:

  • State Machine игнорирует другие группы внутри компонента и слои без ключа.
  • Ничего не делает, если слоев с ключем в компоненте меньше трех.
  • Считает идентификатором слоя все, что находит после ключа.
Image for post
Image for post
Ключ и айди слоя

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

Попробуйте плагин RenameIt в связке со State Machine

Плагин работает с интерфейсными компонентами, состоящими из нескольких однородных элементов, среди которых один активен.

Image for post
Image for post
Больше не нужно ничего переключать вручную

Если State Machine глючит, проверьте слои компонента на выключенные стили. Если взять одинаковые слои, одному добавить новую заливку, а потом отключить, то Скетч запишет параметры выключенной заливки в стиль. Получится, слой с формально отличающимся стилем, будет выглядеть как соседи. State Machine посчитает такой слой образцом активного и назначит его стиль указанному.


State Machine позволяет дизайнеру обращаться с компонентом, как с единым целым. Спроектировать однажды и дальше работать как с черным ящиком. Подавать управляющий сигнал (айди слоя в названии компонента), вместо того, чтобы залезать каждый раз «под капот».

Скачать и установить State Machine


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store