Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Building Instagram-Like Prototype using Framer / @afnizarnur Hi , I’m

    Afnizar UI Designer Intern at Bukalapak, student of Informatics Engineering at Telkom University
  2. Building Instagram-Like Prototype using Framer / @afnizarnur A prototype is

    a quick model explaining the actual plans for the final product.
  3. Gives designers a canvas to learn and write code Building

    Instagram-Like Prototype using Framer / @afnizarnur Why Prototype using Framer
  4. 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.
  5. 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.
  6. 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.
  7. “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