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

What is Framer? Join the Community
Return to index
Rene D'Cree
Posted Sep 16 - Read on Facebook

hi

i am new to framer. i had to prototype a typical workflow, with some screens and buttons and some taps and screen transitions.

i began to do so with framer and thought of a couple of options and problems.

>> i thought that maybe we could have a single layer and then all the different screens could just be added as a state to this single layer and transitioned with taps. not sure if that would work, maybe because each state is supposed to have new assets, new buttons and all. and ideally, as i think, that states are supposed to be done with the same assets having different properties. (Q1) is this a good way to do multi screen flows, or is there a better way?

>> other option is exporting all the assets from sketch in the exact width (ie width_720px * height_variable) and then individually construct the page by targeting and arranging these assets with code.

>> another problem is importing assets from sketch. so in sketch, i have a screen for each state/module of my workflow, distributed into pages and several artboards within the individual pages. the problem with importing is, that it only imports the current artboard on the current page of sketch. that is fine. (Q) but what to do when we have to import all the different screens and use them separately from each other?

i initially thought that even while importing, i would be able to target which page/artboard in the code itself. i tried adding an extra slash in the end of the following line of code and referring to the artboard i wanted to target. but this threw exception, if this ->

runnrui_w720Layers = Framer.Importer.load "imported/runnrUI_w720"

was written as

runnrui_w720Layers =
Framer.Importer.load "imported/runnrUI_w720/artboardX"

given the state of importing, i am more tempted to export all the individual assets that i need to design all my screens, spend time naming them, then strap any page from these assets in code.

i basically am clueless about the best advised practice to build mockup of a complex app with several screens. maybe i need to up my knowledge of this framework but could anyone suggest me about the steps ?

3 Comments

Chris Camargo

Hi Richard! I actually spoke about this very topic at a Framer JS meetup in Seattle. You can find it here: http://framergroup.com/posts/709177452542662.html

Chris Camargo

In regards to imported vs hand-written layers, I'm in the hand-written camp, but it's really just a stylistic thing. Use whatever's comfortable to you. Find the path of least resistance and drive like hell. :) Let us know if you need more help.

Andreas Wahlström

I usually create a separate page in sketch, call it "prototype" and then move the relevant assets in there (without artboards- make them folders instead). Then use Chris plugin to construct the flow :)

Read the entire post on Facebook