Pro Yearly is on sale from $80 to $50! »

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.

0c6fd6a08d0f898159cda7cafcacf07f?s=128

Afnizar Nur Ghifari

August 22, 2017
Tweet

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
  8. None
  9. Building Instagram-Like Prototype using Framer / @afnizarnur 01 Open Design

    Mode
  10. None
  11. Building Instagram-Like Prototype using Framer / @afnizarnur 02 Start designing

    Instagram layout by creating 3 artboards
  12. None
  13. Building Instagram-Like Prototype using Framer / @afnizarnur 03 Design the

    homepage layout
  14. None
  15. Building Instagram-Like Prototype using Framer / @afnizarnur Arrange the layer,

    name it, make it easy to understand!
  16. None
  17. Building Instagram-Like Prototype using Framer / @afnizarnur 04 Design the

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

    story layout
  20. None
  21. Building Instagram-Like Prototype using Framer / @afnizarnur Why we separate

    all of the elements?
  22. None
  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/

  28. None
  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
  37. None
  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
  44. None
  45. None
  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