0

Make conditional logic with screen states and Sketch updatable?

Hi guys,

It took me a while, but I'm starting to like Proto.io. I'm building an app that uses empty- and filled states (in design terms, not Proto.io), which thus requires conditional logic or some kind. I managed to find a semi-working/acceptable way to create this, but I'm not entirely sure if it's efficient, primarily based upon 'updateable-ness'. Let's say I edit my screens, reposition some items and such in Sketch (where everything is made), how easily can that be updated to Proto.io?

 

Sitemap app

Line-up (3 states)
- Empty (when not logged in)
- Join (event)
- Filled (when logged in via previous state)

Capture the moment (3 states)
- Empty (accessible, whilst not joined an event)
- Stage-confirmation (when logged in; Line-up Join=yes)
- Capture! (when pressed 'yes' @ Stage-confirmation state)

My moments (2 states)
- Empty (when you didn't capture anything @ Capture!)
- Filled (when you'd capture something @ Capture!)

Search (3 states)
- Searchbar
- Results
- Opened a result

There are simply 4 pages (accessible through a tab bar) which always navigate to the same page, but to a different state, depending on the previous actions. Therefor you have to join an event to actually go to the 'Capture!' page. Hence I need conditional logic.

 

Creating conditional logic

I create conditional logic by having a button containing two actions/callbacks (Instead of using variables). 

- Change state of screen X
- Go to screen X/Y

For example: a login button makes screen X go to state 2, whilst the logout button returns you to screen X, but state 1.

 

My workflow

To be able to update whole pages, instead of single elements, I've made every state in sketch as a separate artboard (as you should). In Proto.io I made, besides these, (in my case) 4 separate screens, called X_MASTER (whereas X = screen name). In this 'MASTER' I create states. I'm adding interactions to the separate screens, so those don't get lost when updating, and then copy the whole screen (select all, copy) and paste them on the corresponding MASTER. All interactions, such as 'go to screen' will point to a MASTER layer, instead of the separate layers.

 

My concern

This doesn't take ages, but adds serious time to the workflow when updating your design. But besides that, even more important: I'm not sure how easily my design can be updated in Proto.io, without manual adjustments? Therefor I'm wondering

- Is this the most efficient workflow for my use-case?
- How can I improve this workflow for more update-ability? 

Really looking for your thoughts on my, perhaps, extensive topic!

- - - 

@ Proto.io: Perhaps my use-case could be some food for thought about upgrading Proto.io? This could be simplified using Sketch artboard syntax handling. For example: underscores mean states. Therefor an art board named Home_empty means 'screen: home, state: 'empty', and 'Home_filled' would mean 'screen: home, state: filled'. This way multiple artboards end up being within the same screen at Proto.io. However, you also got containers, so that should be taking in consideration.. Anyway, think about it :) 

2 comments

Please sign in to leave a comment.