The one that saves me the most time and prevents me from going back and forth figuring stuff out in a non-productive way later on. Design in 1x and it’ll make your life easier when creating the spec for engineers later on. Side note: Framer now supports importing from 1x resolution. Once you feel you’ve got a good grasp of the spectrum of possibilities you will be ready to move forward. Think through the states the experience can take and map them out in Sketch. The static design process should be the really familiar part. Any card can be opened to a list view of content. Step 1: Static DesignĪs an example we are going to make a swipe-able stack of cards that you’ve seen in apps like Moments and Tinder. I claim, over the course of time, it makes the process really fast. I have developed a pretty rapid system for converting a design into a robust prototype by anticipating issues that usually occur later in the process. I decided to write my process down as a way of how you can handle a prototype workflow with Framer. I make a lot of prototypes and they tend to be long flows with many different states.

If it’s difficult to figure out the interactions in Framer, there is probably some sort of fundamental flaw or ambiguity in the desig n.

I find working with Framer rewarding because it forces me to think through the logic and flow of a design in a very tangible way.īuilding a prototype also helps me gain empathy for some of what engineers will go through when building the product. Making Framer prototypes can communicate what a final product will feel like early in the design process.