$30 off During Our Annual Pro Sale. View Details »

Building Instagram-like Prototype using Framer

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.

Afnizar Nur Ghifari

August 22, 2017
Tweet

More Decks by Afnizar Nur Ghifari

Other Decks in Design

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