Building Instagram-like Prototype using Framer

Transcript

1. Presented on Design Weekly at Bukalapak
   Building Instagram-like
   Prototype using Framer
   

   View Slide

2. Building Instagram-Like Prototype using Framer / @afnizarnur
   Hi , I’m Afnizar
   UI Designer Intern at Bukalapak, student of
   Informatics Engineering at Telkom University
   

   View Slide

3. Building Instagram-Like Prototype using Framer / @afnizarnur
   What is exactly
   Prototyping means?
   

   View Slide

4. Building Instagram-Like Prototype using Framer / @afnizarnur
   A prototype is a quick model explaining
   the actual plans for the final product.
   

   View Slide

5. Building Instagram-Like Prototype using Framer / @afnizarnur
   Why Prototyping using Framer?
   

   View Slide

6. Helps designers create
   and communicate interactions
   Building Instagram-Like Prototype using Framer / @afnizarnur
   Why Prototype using Framer
   

   View Slide

7. Gives designers a canvas
   to learn and write code
   Building Instagram-Like Prototype using Framer / @afnizarnur
   Why Prototype using Framer
   

   View Slide

8. View Slide

9. Building Instagram-Like Prototype using Framer / @afnizarnur
   01
   Open Design Mode
   

   View Slide

10. View Slide

11. Building Instagram-Like Prototype using Framer / @afnizarnur
    02
    Start designing Instagram layout by
    creating 3 artboards
    

    View Slide

12. View Slide

13. Building Instagram-Like Prototype using Framer / @afnizarnur
    03
    Design the homepage layout
    

    View Slide

14. View Slide

15. Building Instagram-Like Prototype using Framer / @afnizarnur
    Arrange the layer, name it,
    make it easy to understand!
    

    View Slide

16. View Slide

17. Building Instagram-Like Prototype using Framer / @afnizarnur
    04
    Design the feed layout
    

    View Slide

18. View Slide

19. Building Instagram-Like Prototype using Framer / @afnizarnur
    05
    Design the story layout
    

    View Slide

20. View Slide

21. Building Instagram-Like Prototype using Framer / @afnizarnur
    Why we separate all of the elements?
    

    View Slide

22. View Slide

23. There are some basic component on Framer
    you should know, the 3rd will blow your mind!
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

27. Merasa kepo?
    https://framer.com/docs/
    

    View Slide

28. View Slide

29. Building Instagram-Like Prototype using Framer / @afnizarnur
    First, let’s create ScrollComponent for the feed
    

    View Slide

30. Building Instagram-Like Prototype using Framer / @afnizarnur
    

    View Slide

31. Building Instagram-Like Prototype using Framer / @afnizarnur
    Create ScrollComponent for the story
    

    View Slide

32. Building Instagram-Like Prototype using Framer / @afnizarnur
    Building Instagram-Like Prototype using Framer / @afnizarnur
    

    View Slide

33. - Disky Chairiandy, Senior UI Designer at Bukalapak
    

    View Slide

34. Luckily, Framer can easily using
    real data for your prototype!
    

    View Slide

35. Building Instagram-Like Prototype using Framer / @afnizarnur
    Building Instagram-Like Prototype using Framer / @afnizarnur
    

    View Slide

36. Building Instagram-Like Prototype using Framer / @afnizarnur
    06
    Looping the content
    

    View Slide

37. View Slide

38. Building Instagram-Like Prototype using Framer / @afnizarnur
    Building Instagram-Like Prototype using Framer / @afnizarnur
    

    View Slide

39. Building Instagram-Like Prototype using Framer / @afnizarnur
    07
    Micro Animation for like button
    

    View Slide

40. Building Instagram-Like Prototype using Framer / @afnizarnur
    Building Instagram-Like Prototype using Framer / @afnizarnur
    

    View Slide

41. Building Instagram-Like Prototype using Framer / @afnizarnur
    Building Instagram-Like Prototype using Framer / @afnizarnur
    

    View Slide

42. Building Instagram-Like Prototype using Framer / @afnizarnur
    08
    Adding event when double tap the image
    

    View Slide

43. Building Instagram-Like Prototype using Framer / @afnizarnur
    Building Instagram-Like Prototype using Framer / @afnizarnur
    

    View Slide

44. View Slide

45. View Slide

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
    

    View Slide

47. Thank you!
    

    View Slide

48. Feel free to ask me any question
    @afnizarnur afnizarnur.com
    

    View Slide

49. You can download the source code at
    https://github.com/afnizarnur/framer-instagram
    

    View Slide