Project 2 ( Prototyping )

Universal application prototyping

What is prototyping? Prototyping is an early model that briefly implements an overall information system to test the usability and feasibility of products and services to users before launching the product. I went directly from Lo-fi wireframe to Prototype and connected each functions interaction and service flow.

Get Amy Kim’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Through prototyping, I struggled with making vertical and horizontal scrolling. And here is my note-taking I learned from project meeting ‘how to design vertical and horizontal scrolling in Figma’:

Vertical Scrolling

Vertical scrolling

1. ‘Frame selection’ the frame that I want to put the vertical scrolling effect.
2. Shrink the screen frame back to the device size you wanted to create.
3. Also, shrink the frame size that you will put the scrolling effect. And put the scrolling effect: ‘prototype’ > ‘overflow scrolling’ > ‘vertical scrolling’
4. Lock the component/ group you don’t want to move.

Horizontal Scrolling

Horizontal scrolling

1. ‘Frame selection’ the frame that I want to put the Horizontal scrolling effect.
2. ‘Ctrl + X’ > Click the page frame > ‘Ctrl + V’ to put the scrolling frame into page frame.
3. Shrink the scrolling frame size to page frame, and add ‘Horizontal scrolling’ effect through prototype.

Create Component ‘ ⌥ + ⌘ + K ’ on Mac

Moreover, create ‘component’(four daimonds) to the buttons/group repeats like the bottom app bars to look your prototyping clean and organized. After you create the component, put interaction to the button to other frame page. And copy and paste the button you create the component on the other frame page you will use. Buttons bound with components helps your prototype looks clean because not all interaction lines appear.