Optimising Sketch assets for ProtoPie

In this article, I’m going to talk about how I structure my Sketch files for use with the interaction design tool called ProtoPie.

For some years ProtoPie has been my go-to tool for interaction design and prototyping. You can check it out here https://www.protopie.io/. ProtoPie is very powerful with a very advanced set of features.

When you are building prototypes in ProtoPie you need to reference specific layers and there can be a lot of them. One of the best ways of finding the layer you want is to search for it by name and this is why how you name your layers and groups can be a crucial workflow optimisation. You will often have a UI graphic such as a button many times throughout your document and it’s easy to get confused as to what button you might be targeting so it’s a good habit of getting into naming layers and groups uniquely.

Naming layers

To optimise the ability to find objects in ProtoPie I find it best to follow a naming convention. The general principle as is true with all classification is to start with the least specific identifier and end with the most specific. This allows you to group common instances of elements together under a common identifier for example ‘Button’.

Here is an example of how I might name a UI element in my Sketch file. First I might have a component name, for example a button. Then I think about what type of button it is. Within a design you will probably have multiple button styles such as primary, secondary and tertiary. After that could come the style name. In this example I have a style name called Dark. Finally as this is a button it will have multiple states, here I have used a state called unselected. Putting all of this together I will have a button graphic in Sketch with the following name:

ButtonPrimaryDarkUnselected

You can see for the above example that I use Camel Case to separate each keyword. You can use any format that makes sense to you as long as you are consistent.

When you are looking for objects to add a trigger or action to within ProtoPie you can now easily search for your object by following your naming convention. As you start typing, the list will filter and show you all the objects that match what you are typing. This allows you to easily filter on all the buttons you have in your scene.

Naming Group structures

You will often find that you will have groups of objects nested inside of each other. So when you are looking for ‘btnPrimaryUnselected’ you may find you have multiple duplicate results because you have used the same button name in many places. To deal with this kind of scenario the naming convention can be extended to further classify your objects. Consider this group structure:

You may have many panel components in your scene so you could make this unique by adding a custom name to your panel group. Unfortunately, though this isn’t very helpful in ProtoPie as it doesn’t return the actual structure in the search results once you start filtering. To fix this you might consider this naming convention:

Now you can filter by the keyword ‘RedPanel’ and find all of ‘RedPanel’s’ descendants. You’ll notice I’m using something called dot notation here. This is a notation used a lot in programming languages. Of course it doesn’t have any programming significance here, I just like it as a way of structuring things.

Organising groups for functionality

ProtoPie uses groups a lot to do certain things such as masking or scrolling and applying a single animation to multiple elements. Organising and naming your Sketch layers should reflect this as it will make your life a lot easier when you import it to ProtoPie to start applying interaction. Do try to remove all the extra groups you make when drawing in Sketch as well to reduce even more clutter.

The reasons you use a group in Sketch is different typically to why you might group in ProtoPie. It’s fair to say that you may end up doing a bit of cleanup in ProtoPie but the more you can do in Sketch the more you can keep your two files in sync. In ProtoPie you will group objects based on the interaction you want to apply such as grouping a list of items so that you can convert them into a scrollable container or grouping them together to apply an animation.

Sketch symbols and masked groups

Currently ProtoPie doesn’t support Sketch symbols. This is kind of annoying because it means you will probably need to have a duplicate set of artboards in Sketch that are expressly optimised for ProtoPie and this is how I handle it as part of my workflow. When you import a symbol into ProtoPie you will lose all the Sketch symbol functionality and the the whole element will be flattened into a single bitmap image. Moreover you will also lose the ability to use some key ProtoPie functionality that you will need to use. Because of this you will need to split your Sketch symbols apart before import.

Another Sketch feature which causes groups to be flattened is when you have a mask within a group. This effectively will have the same effect as a symbol and you will need to remove them. Don’t worry though as you will be able to remake your elements inside ProtoPie, you just have to do it a different way as ProtoPie handles masking in a different way to Sketch.

In some cases you will want to use the two above methods to your advantage to reduce the complexity of your imported UI. This will help performance and will reduce the visual complexity of your layer hierarchy. Just think about what you want to flatten and what you want to have access to for applying interaction such as text layers for example.

Consider the following example of a panel where some of the contents are essentially visual furniture which I don’t want to add any interaction to:

Let’s dissect the above group structure. I want to control the whole panel so all of my panel objects are nested inside of a RedPanel group. I then have a subgroup for all of the text content; I don’t want to do anything with any of the content specifically so I have applied a mask in Sketch so that when imported the text will be flattened as a single bitmap image with the title ‘RedPanel.Content’. I do however want access to the two buttons so I have preserved them within the group of the panel but outside of the masked text group so they get imported as individual items. The structure below shows how the group will be interpreted by ProtoPie:

Elements to avoid flattening

Text layers can be turned into real text so should be preserved unless you are absolutely sure you won’t ever want to edit them. I mostly make sure they are editable in ProtoPie as by default ProtoPie doesn’t turn them into real text but keeps them as images and this will give you flexibility to convert them to text later if you wish. Photos or any other content imagery should also not be masked as you can replace them at any time from a new image from your computer’s file system, this becomes incredibly handy in certain situations.

This all may seem a lot of extra work but it will save you lots of time and confusion in the long run. Of course the more you can do these things as you design in Sketch the better as it will save you having to do them later as a separate task later in the process.