Principle prototype: Component and sending/receiving message function
Note: This is revised 2022 edition of my original 2020 Medium article
Principle is my long-time favorite prototyping tool because of its simplicity and compatibility with other design tools that utilize macOS frameworks (e.g. Sketch). It's easy to quickly create a 'quick and dirty' prototype using Principle, rather than using a more powerful tool like Framer X. However, documentation and tutorials have never been Principle's strengths, and the author, Daniel Hooper, hasn't updated it in a while. I also get the feeling that the user base is shrinking.
Note: Principle 5.12 was used when writing this article.
Since Principle 2, it has introduced the 'component' feature, which is very useful for situations like toggle, button, and navigation bar when you don't want to recreate artboards for different states of those elements. The component can also communicate with the parent artboard and other components in later versions through a feature called 'message.' Essentially, you can ask components to trigger actions in the artboard (and vice versa), or in other components as well.
Unfortunately, neither the app's UI nor its official documents provide sufficient explanation for this feature. Internet searches yield no better results. After hours of tinkering and playing around, I have summarized the use of components into three scenarios:
Component -> Parent art board
Parent art board -> Component
Component -> Component
Coffee / tea segment control (switch)
In this example, I have a segment control that controls an indicator at the top to show a coffee or tea icon. You could create two separate artboards with each state of the segment control and the indicator area, but that's not why you're reading this article. In the following three scenarios, I will achieve the same result using three different ways of utilizing components and messages.
Scenario 1: Components -> Art board
Components can send message to parent art boards
The segment control is nested in a component, and switching between coffee and tea does not require a separate artboard. However, the coffee and tea indicators are in two separate artboards. Toggling between coffee and tea will call out the corresponding artboard of the indicator. As you can see, I had to figure out a workaround. Instead of using the 'tap' action to toggle between segments, I had to use 'touch begin.' This is because the tap action was used to trigger a state change of the segment control itself, and Principle does not allow more than one tap action for each element.
Scenario 2: Parent art board -> component
Elements in artboards can also send message down to components
This is basically the opposite situation of the first scenario, where the indicator is nested as a component, while the segment control's states are in two artboards. The tap action that switches between the two art boards also sends a message to the indicator to change between coffee and tea accordingly.
Scenario 3: Component -> component
Component can aslo send message directly to other component
This third scenario is the most useful for real-life applications. For example, a segment control component can ask the indicator component to change its state, all within one artboard. Since everything is in components, they are highly reusable as well.
In conclusion, the lack of proper documentation and the somewhat convoluted way of using the message feature can be confusing for beginners and discourage people from using one of the most useful features of Principle. Lastly, this is not a complaint against the message feature itself, but the fact that you are not allowed to use more than one tap action per element also hinders the intuitive nature of the workflow.
Download my Principle example files here
Feel free to reach out to me via social media.