Building Instagram-like Prototype using Framer

This was presented during Bukalapak Design Weekly, when interning at Bukalapak as a UI Designer, August 2017. Download the source code for the Framer prototype here.

Transcript

1. Presented on Design Weekly at Bukalapak Building Instagram-like Prototype using Framer
2. Building Instagram-Like Prototype using Framer / @afnizarnur Hi , I’m Afnizar UI Designer Intern at Bukalapak, student of Informatics Engineering at Telkom University
3. Building Instagram-Like Prototype using Framer / @afnizarnur What is exactly Prototyping means?
4. Building Instagram-Like Prototype using Framer / @afnizarnur A prototype is a quick model explaining the actual plans for the final product.
5. Building Instagram-Like Prototype using Framer / @afnizarnur Why Prototyping using Framer?
6. Helps designers create and communicate interactions Building Instagram-Like Prototype using Framer / @afnizarnur Why Prototype using Framer
7. Gives designers a canvas to learn and write code Building Instagram-Like Prototype using Framer / @afnizarnur Why Prototype using Framer
9. Building Instagram-Like Prototype using Framer / @afnizarnur 01 Open Design Mode
11. Building Instagram-Like Prototype using Framer / @afnizarnur 02 Start designing Instagram layout by creating 3 artboards
13. Building Instagram-Like Prototype using Framer / @afnizarnur 03 Design the homepage layout
15. Building Instagram-Like Prototype using Framer / @afnizarnur Arrange the layer, name it, make it easy to understand!
17. Building Instagram-Like Prototype using Framer / @afnizarnur 04 Design the feed layout
19. Building Instagram-Like Prototype using Framer / @afnizarnur 05 Design the story layout
21. Building Instagram-Like Prototype using Framer / @afnizarnur Why we separate all of the elements?
23. There are some basic component on Framer you should know, the 3rd will blow your mind!
24. FlowComponent The FlowComponent helps you transition and navigate between multiple screens PageComponent The PageComponent is based on the ScrollComponent, but designed for displaying paginated instead of continuous content. Scroll Component A ScrollComponent is used to scroll content.
25. FlowComponent The FlowComponent helps you transition and navigate between multiple screens PageComponent The PageComponent is based on the ScrollComponent, but designed for displaying paginated instead of continuous content. Scroll Component A ScrollComponent is used to scroll content.
26. FlowComponent The FlowComponent helps you transition and navigate between multiple screens PageComponent The PageComponent is based on the ScrollComponent, but designed for displaying paginated instead of continuous content. Scroll Component A ScrollComponent is used to scroll content.
27. Merasa kepo? https://framer.com/docs/
29. Building Instagram-Like Prototype using Framer / @afnizarnur First, let’s create ScrollComponent for the feed
30. Building Instagram-Like Prototype using Framer / @afnizarnur
31. Building Instagram-Like Prototype using Framer / @afnizarnur Create ScrollComponent for the story
32. Building Instagram-Like Prototype using Framer / @afnizarnur Building Instagram-Like Prototype using Framer / @afnizarnur
33. - Disky Chairiandy, Senior UI Designer at Bukalapak
34. Luckily, Framer can easily using real data for your prototype!
35. Building Instagram-Like Prototype using Framer / @afnizarnur Building Instagram-Like Prototype using Framer / @afnizarnur
36. Building Instagram-Like Prototype using Framer / @afnizarnur 06 Looping the content
38. Building Instagram-Like Prototype using Framer / @afnizarnur Building Instagram-Like Prototype using Framer / @afnizarnur
39. Building Instagram-Like Prototype using Framer / @afnizarnur 07 Micro Animation for like button
40. Building Instagram-Like Prototype using Framer / @afnizarnur Building Instagram-Like Prototype using Framer / @afnizarnur
41. Building Instagram-Like Prototype using Framer / @afnizarnur Building Instagram-Like Prototype using Framer / @afnizarnur
42. Building Instagram-Like Prototype using Framer / @afnizarnur 08 Adding event when double tap the image
43. Building Instagram-Like Prototype using Framer / @afnizarnur Building Instagram-Like Prototype using Framer / @afnizarnur
46. “The design process is about designing and prototyping and making. When you separate those, I think the final result suffers." - Jonathan Ive, Chief Design Officer of Apple
47. Thank you!
48. Feel free to ask me any question @afnizarnur afnizarnur.com
49. You can download the source code at https://github.com/afnizarnur/framer-instagram