*This is a post originally published on my Medium Account. You can go to HERE to see the original post.
In 2017, I started a series of Prototyping Challenges by using Framer. I was convinced by its seamless integration and infinite interaction possibilities. "Real-time Data by API integration" is a big sales for me. It's not easy to learn a new skill/tool, especially when there's coding involved. Therefore, I set up some challenges and use Medium to track my process and takeaways.
I always wanted to learn Framer as I had been hearing all the reviews and praise about it, and how it became a popular/standard tool in the Digital Design/Product Design Industry.
So I installed the app, opened up the documentation, and I panicked.
As a Visual Designer, dealing with CoffeeScript (or Javascript) seems very intimidating, even with the Auto-Code feature Framer lately released. However, thanks to the selfless community, there are hundreds of useful tutorials, stories, and examples out there in the wood for me to pick up little by little, just like Hansel and Gretel picked up the crumbs to find their way home.
Therefore, I decided to start the challenge and keep the journal of my Framer Journey. I believe by writing it down not only keeps myself motivated and helps myself organize and to track the progress.
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.)
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.
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