It is possible to build a counter in principle that mimics logic. I created 5 buttons with a small readout that calls out how many buttons are turned on at any given time. Before I figured out how messaging works, I would have built it for one specific happy path (I would have to select the buttons IN ORDER for the counter to not be scrambled. Here’s how I did it.
First, I created a component for the counter itself. I made 6 artboards - 0, 1, 2, 3, 4, 5. Then I created messages to and from each artboard. This ended up making a ton of extra messages (for example, sending a message from 5 to 1). I deleted all extra messages that are not going to an adjacent artboard. I then renamed the messages to “advance” and “back”. This enabled me to create new components that could send messages into my counter component - in this case, the buttons will be sending “advance” and "back.
I then created my button component. As usual for a simple toggle, I used two dartboards inside the button component for the two states. I used tap events to trigger the state change (pretty straight forward). I took it one step further to get my counter. I selected each artboard, and chose to send a message to parent. The off state automatically sends (to the parent) “off” and the on state automatically sends (to the parent) “on” (note: I used “on” and “off” instead of the same “advance” and “back” to help keep track of which messages are going to what).
I now have my counter set up with “advance” and “back” inside it, and the button component sending “on” and “off” to the parent (the main artboard in this case). It’s time to link the two components together.
To breathe some life into my prototype, I select the button component, and select the event trigger. I choose “on” and route it to the “advance” message in the counter. I do it again, but select “off” to route to “back”. Now, whenever a button switches state from “off” to “on”, the “on” state will automatically fire off a command to the counter to “advance”. when a button changes state from “on” to “off”, the off state will fire off a message that says “back”. Since we started the counter component at 0 with all buttons off, any button changing states to “on” will cascade through to the counter component and tell it to go forward to 1. If I change a different button component from “off” to “on”, it will again tell the counter to “advance”, and bump up one more. Any arthoard changing back to “off” will fire off a message to the counter “back” which will subtract the number (go back one artboard in the counter). It’s a little convoluted, but this approach works well for having multiple components command a single component to change states.
Happy to help get people using principle for more things! It’s a good tool to have in your workflow.
it definitely opens a lot of doors for what principle can do.