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

What is Framer? Join the Community
Return to index
Nicolas Hémidy
Posted Feb 15 - Read on Facebook

Hi everyone! I'm looking for advise on sketch + framer workflow when you design a complex multi screen app. Would you have any good resources on the subject? I'm especially interested in those questions: should I regroup all my screen in one artboard? If not, how do you manage elements which are common to several screens? When one element of one screen is nested into a layer and need to expand (and get bigger) when transitioning to another screen, do you use the same element and change the layers throughout the animation or do you fake it by having 2 different elements which looks to be only one moving (if it makes sense..)? Thanks a lot for your help!

9 Comments

Jonas Treub

Hi Nicolas! If you have one element that's always visible, like a tab or navigation bar. Its easiest to extract that element from the flow component. Reposition the flow component so that it does not overlap with the fixed element and use it to switch content views.

Jonas Treub

When you want to present a fullscreen layer which should hide the fixed element you won't be able to use the same flow component. Just create another flow component or present a simple layer.

Nicolas Hémidy

Hey Jonas Treub, Thanks for your feedback. Regarding my last question, I created an example here https://framer.cloud/KmhUW/. My issue is that I want to make a Layer becomes bigger than it's superLayer when transitioning from one screen (product list screen) to another (product screen). The green layer is supposed to be a picture and this picture is supposed to expand (full width and top of screen) when tapping on it to open a product screen. As you'll notice, the animation is not fluid so I guess there might be a better way to do that. Thanks again!

Jonas Treub

When designing such custom transitions I would not recommend using the Flow component. Just set up everything with states and switch states when clicking the layer.

Nicolas Hémidy

Isn't it what I did in my example?

Jonas Treub

My bad. You'll want hardware acceleration to get a smooth animation. Changing width and height of layers isn't hardware accelerated while changing scale is. Make sure to never scale layers to values above 1.

Jonas Treub

To solve the hierarchy issue I would recommend not making it a child in the first place. Just position it on top of the other layer.

Nicolas Hémidy

Thanks! I'll try this asap

Nicolas Hémidy

hey Jonas Treub, Sorry to interrupt you again. Please look my proto https://framer.cloud/KmhUW/ I'm trying to position a mask so that it follows exactly an existing layer that is part of a scroll element. The challenge is that I'm trying to scale a picture from a scrollable layer (Carousel_size layer) to a fixed layer (Detail_size layer). Does it make sense?

Read the entire post on Facebook