Hey guys, building my first multi-page app. Im sure this is a common comment but I am still struggling. As far as I can tell, there is no type of storyboard, thus, all layers exist on an infinite canvas with most being obscured. This seems really annoying but im sure that just my design head butting up against coding. However, what I cannot get over is how on earth you easily add elements to these invisible pages. For instance, say I want to add a button. Do I simply create the button, attempt to find the correct X and Y ... navigate to that page in the previewer and repeat? This seems so odd that I must be wrong? Can I not create files for each page instead and transition to them or something similar?

Michael Van Havill

Posted Nov 01 - Read on Facebook

6 Comments

Dami Dina

https://github.com/chriscamargo/framer-viewNavigationController

https://github.com/awt2542/ViewController-for-Framer

Michael Van Havill

Thanks Dami Dina, I have checked that out. However that's aimed at making the page transitions easy right? What I am stuck on is the ability to design separate pages, each with their own interactions, without having those pages "invisible". Or am I missing something really obvious here.

Angie Marie

I had this same question/struggle - this is super helpful

Kim Does

If you want to build up several screens with code I personally find it useful to start with all of the screens (layers) being on top of each other on x:0 and y:0 and showing / hiding them when you set them up.

Each screen is a top level layer and everything on the screen is a child of that screen. Children are positioned relative to their parent. So if you finish setting up all the pages, you then move them over to where they need to be for animating them in / navigating. Everything inside the screen will still be in the right place.

Hope this provides some help. Good luck!

Ee Venn Soh

I feel you Michael. There are many ways around this problem. In the past I will use what Kim Does mentioned. But this might not be the most efficient as you need to create a separate design files and stack all on top of each other. It is like creating a Frankenstein Sketch file just for Framer. So what we want is keep the design in their own artboard. You can create a parent layer with your device screen size. This will house all the layers across all artboards. The first artboard will always have x,y as 0. The second will be x:100 and same y if the gutter between artboards is 100. Then when you need to bring artboard 2 onto the screen. Just add the artboard name or loop through all layers and add a parent to them with parent being the parent layer you have created. It will then shown as x, y: 0. Do the same for all other artboards.

Michael Van Havill

Thanks guys, I see how that would work. Seems super awkward to maintain. I find it really odd this isn't an optimized workflow. Do people no create multipage prototypes? Framer is surely for more than fancy micro interaction prototypes right?

Read the entire post on Facebook