This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Phil Salesses
Posted Oct 21 - Read on Facebook

A few best practices questions. I'm trying to prototype an app that's a few screens in Sketch and Framer.

1) Should each screen be a separate artboard or a separate folder/group within one artboard?
2) For ease of animation, what's the best approach for moving common elements around and how would you structure your framer file?

Any other best practices would be great. I'm using Framer but I'm trying to explain to an interaction designer how the file needs to be structured for it to work, and I can't find any resources online that explains this in detail. Any help would be awesome. Thanks.


Benjamin Den Boer

There isn't really a "one true way" to set-up or structure your documents: everyone has their own way to go about things. Having that said, I'll try to help you out by sharing some thoughts:

1. Right now, it's easier to set-up different screens using separate layer groups rather than separate artboards. This allows you to target the entire screens directly within Framer, to slide in a different view, for instance. You can place them all next to each other and clip them within Framer, or you can create a group containing all separate views that masks other views in Sketch, so you need not clip/hide them in Framer. It also depends on how you'd like to transition between screens: slide-in, modal-fade-in etc. All of these effects can be defined in Framer after import, but you could also set-up your Sketch document in such a way that prevents you from having to change the hierarchy/visibility in Framer after import.

2. This really depends on what type of interactions you're designing. Personally, I use layerA.animate... when looking to create a simple animation for a single layer. (Think a fade-in, fade-out animation, or a 1-2 animation chaining).
If you'd like include a variety of animations, defining a set of states is recommended. States are really powerful when creating more complex interactions: you can cycle between states, remove, add and override them based on different events. Animations defined within states and using layer.animate both trigger AnimationEnd events, so both allow for animation chaining. States also have StateWillSwitch and StateDidSwitch events.

Phil Salesses

I'll try states for common elements and see how it goes. Thanks

Read the entire post on Facebook