State Machine

State Machine logo

Services & Skills

Share on

⌘R, change ID, ⌃⌘S

⌘R, change ID, ⌃⌘S

How does it work

The designer uses the component title to point to the element he wants to switch to and hits ⌃⌘S. The plugin finds the layer needed, the neighboring layer with the style that differs from it and swaps their styles.

The more elements a component contains, the more useful State Machine is. It may be excruciating to add a symbol for each state of a ten-page indicator by using Insert → Symbol for that each time. Here’s how it works with State Machine:

  1. Copy the component.
  2. ⌘R, change its ID.
  3. ⌃⌘S.

Organizing a component

For State Machine to work, you need to organize a component properly. What does a properly organized component consist of, exactly?

  1. A group of layers, with one of the layers having a distinctive style (the active one).

In the same orbit

Explore more open source projects

Let's solve your hard problems

Martians at a glance
years in business

We're experts at helping developer products grow, with a proven track record in UI design, product iterations, cost-effective scaling, and much more. We'll lay out a strategy before our engineers and designers leap into action.

If you prefer email, write to us at