A Visual Designer’s 100 Framer Challenge [001]
Low complexity prototypes leaves time to focus on interactions.
Draggable Layers
For my first Framer Prototype, I decided to play with the Draggable Method. I started my layers and interaction in simple shapes at first. This helps me to stay with the basic elements and avoid going too crazy and complicating things. (Basically, it serves as a wireframe.)
You can see my wireframe below.
I played around with all the Draggable Method Features, and tried to find the relation between the three attributes of “Spring”.
After I got familiar with the basics of Framer, such as Layer, Animate and Event, I moved into Sketch to start the visual design.
I want to do SOMETHING about travel. because…
- This is a topic I am interested in.
- This theme gives me the freedom to explore different features. Such as using the API of Map, navigating between cards, and user input, etc.
The final result is a screen of a Travel Consultant App, with which you can move around the map (which is locked for now), and the pin at the center indicates the city you are navigating. The relevant information (the city’s brief overview) will show on the top container.
Once you decide the destination, you can drag the paper plane and shoot it to your next trip. This gesture of confirmation will then transition to a series of information cards popped with information that is related to the city you just submitted.
While I applied the Draggable.constraints to create the shooting gesture, I also learned the technique of Utils.modulate that helps me to calculate the percentage of scaling and fade-out corresponding to the offset-y the paper plane has been dragged. See example below.
sketch.Plane_Pin.onDrag ->
sketch.img_Map.opacity = Utils.modulate sketch.Plane_Pin.draggable.offset.y, [0,400], [1,0], true And this is the end of my first Framer Prototype. 99 to go!
For the challenges, I tried to keep the complexity of the prototypes low. So I can focus on making the interaction happen instead of being trapped by the user flow. The idea is at some point I will be able to collect all the little challenges together as bricks, and eventually, stack them to build a more solid and finished project.
