Component keeps/remembers interaction in-between screens

[norsemen]

OS: 13.3.1
PR: 6.3

If you see the Moto-Favorite-Test.prd file on Dropbox- there are two interactive screens…When you click on a “Heart component” everything works as planned, (selected state) however if you advance to the next screen (to Favorites)… Example from: Select Heart then got to ‘Favorites’, then back to “Picks for You”– you will see the ‘Heart component’ is no longer in a selected/ ‘active state’.

Moto-Favorites-Test.prd

Q: Is there a way to have Components remain in active state jumping between screens? ( Components would remain in an active state…OR is there possibly a better way to accomplish this? I was thinking about how I could do this with “messaging” but didn’t get it to work. THANKS!

[shonen]

Hi!

There’s a way to accomplish what you want, but would require a few more screens, or potentially make the whole card a component.

Essentially, in screen 1, the heart is set to non-liked state, so every time you go to screen 1, that heart will be set to that state, this is the basic principle of Principle (lol) where things go to the state the destination screen has.

As I said, I’d have done the whole card a component for the sake of simplicity, but can work with how you have it now.

You should learn how to use messages, a combination of component + messages is the most powerful and workflow efficient way to work with Principle.

It is actually much easier to solve, I just noticed that one of the hearts is the one that actually reverts back to unfilled, the other 2 work perfectly, and that’s because in the animation timeline, one of them is not frozen.

You can see that next to heart 2 that frozen icon is grey, click on it and this will tell Principle, not to change the state of this heart when changing screens, and will remember the state.

This frozen feature is very useful when you work with scrolls and want to keep the scrolling position from one screen to another.

Also, for the sake of your own sanity, name all the layers accordingly! And try to use as much components as you can, if you have a folder with many things inside, 9 out of 10 times it should probably be a component.

Hope this helps!

[norsemen]

Thank you–Super helpful advice! I will apply all techniques mentioned. I’ve recently learned how to work with ‘UI messaging’ –it’s such an amazing feature.

Also, will improve my layer naming-thanks :)))

[shonen]

Another advice you’ll find useful is that you can drag and drop a .prd file into another .prd file and will be imported as a component.

I use this to have reusable components, so I create a new file for example, I call it button, with the dimensions and states of my button, then save is as .prd, so when I work on a new file, I can simply drop some already made .prd files into my working file and use them as components, pretty neat and not very clear from documentation, at least for me it took me quite a while to discover such feature.

This way I can have a folder with reusable components ready to be inserted in a working file.