Principle prototype: Component and sending/receiving messages
Principle is my long time favourite prototyping tool. I love its simplicity and similarity with other design tools that utilize macOS frameworks (i.e Sketch). Rather than bring out the big gun Framer X with tremendous capability, it’s super easy to fire up Principle and do quick ‘n dirty prototype. However, documentation and tutorial are never Principle’s strengths. Yet Daniel Hooper — author of the app, hasn’t updated it for quite a while, and I have the feeling that the user base is shrinking too.
FYI: Principle 5.12 was used when writing this article.
Since Principle 2, it introduced ‘component’ — a very handy and well-received feature for situations like: toggle, button, navigation bar when you don’t want to recreate artboards for different states of those elements. The component can also communicate with parent artboards, other components in the subsequent version. It is called ‘message’. Basically, you can ask components to trigger action in the artboard (and vice versa), or any other components as well.
Unfortunately, neither the app’s UI nor its official documents do provide sufficient explanation. Internet search yields no better results. After hours of tinkering and playing around, I’ve summarised things into three scenarios:
Component → Parent artboard
Parent artboard → Component
Component → Component
In this example, I have a segment control that controls an indicator on top to show a coffee or tea icon.
Indeed, you can just create two separate artboards with each state of the segment control and the indicator area. However, that’s not why you are here reading this article. In the following three scenarios, I will achieve the same result in three different ways of using components and messages.
Scenario 1: Component → Parent artboard
Segment control is nested in a component, and switching coffee and tea doesn’t require a separated artboard. Meanwhile, coffee and tea indicator are in two separated artboards. Toggling between coffee and tea will call out the corresponding artboard of the indicator.
As you can see here, I had to figure out a workaround. Instead of using ‘tap’ action for toggling between segments, I had to use ‘touch begin’. Because tap action was used to trigger state change of the segment control itself. Principle doesn’t allow more than one tap action for each element.
Scenario 2: Parent artboard → Component
This is bascically a reserve situtation of scenario when the indicator is nested as component, while the segment control’s states are in two artboards. Tap action that switching between two artboards also send message to the indicator to change coffee or tea accordingly.
Scenario 3: Component -> Component
This third scenario is the most useful for real-life applications. For instance,a segment control component can ask indicator component to change state, everything happens in one artboard. Since all things are in components, they’re highly reusable as well.
In conclusion, the missing of proper documentation and a rather convoluted way of using message feature, those will confuse beginners and shoo people away from using one of the most useful feature of Principle. Last but not least, this is not a rant against message, but not allowing more than tap action per one element also severely hinder the intuitiveness of the workflow.
Download my Principle example files here
Feel free to reach me via my Twitter
