Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Building Instagram-Like Prototype using Framer / @afnizarnur

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

- Disky Chairiandy, Senior UI Designer at Bukalapak

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

“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

Slide 47

Slide 47 text

Thank you!

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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