Protopie date scroller - date selector - Creating a date scroller with figma and protopie

hey today i'm going to show you how to make a time scholar using figma and protopi let's see the sample of my scroller so these are my data's we can scroll up and down until it reaches the very very bottom and scroll up again okay let's see my page was made properly in figma which is everything you can make already because i believe you make it better than me yeah and the first step for us is to type all the data out and make them as frames so i typed my mouse and date and ears the only thing you need to pay attention is make sure your padding is correct like you use consistent padding for often after you finish doing that after finish typing make sure you export as three times three times png because we are going to use it for proto pi okay let's open the proto pi i have already uploaded i mean i have already imported this for you the first thing we are going to do is going to group our figma elements okay i have already grouped the top one because we are not going to touch them in this protopod we are going to group them together and then we are going to import the image import the image from our computer and make them scrollable okay let's import the image together so now i have imported the mounts one thing we need to pay attention is to maybe write down the position of the initial we have x left and x we have a x value of 57 and a y value of 397 and then we are going to import the date and years make sure your layout and padding is correct okay and just remember your initial value because because we are going to change them later this picture is pretty big yeah making sure everything is correct okay so now here's the crucial step we are going to make layers for we are going to make layers to cover our data okay this is the layers for top let me call it a top cover and make sure the background color matches our background and we are going to send our top information on the top of our card okay and we'll need a bottom cover oops sorry here's the information let's copy the top color and make it a bottom color okay here we go and now we can delete all the unnecessary information such as our mouse oops not deleting the picture though make sure the only thing left here is three pictures and two lines okay this is our button group and let's make it in the top of the bottom color the next step is to make opacity layers the first opacity layer we are going to put them put it right under the top layer i mean the top cover layer and let's give let's give it a background color of white and opacity maybe i'll give it a 70 opacity okay we'll see that later and copy this opacity layer make it here put it right here and you can try to adjust the size to make it fit fit your content and cop it for the third time make sure they don't have anything left we don't have any space left in the middle and let's call it opacity three for opacity 3 we are going to give it uh probably i'm going to give a 85 of opacity okay oops let's see so now we get something look similar to our page in prototype let me adjust this okay that looks better right okay then we are going to see if the opacity layer is attachable layer if it's not we are going to make the lower layer touchable okay so now is the crucial thing we are going to create a drag a drag trigger and create a move the first thing we are going to move is mouse we are moving up and down it's not movable make sure everything is consistent yeah that's movable okay let's let's remember the original position is 57 and 397 and we are going to set we are going to set a custom limit for them so the max y will be 3 397 because we are moving it up if we are moving it pretty pretty pretty up we are going to make the max of 3 97 and the minimum value we are going to see right now okay the minimum value will be negative 88 so we are able to move it up and down within the correct range actually the mouse is pretty much done and we are going to move move it back to the initial value i recommended you to write down the initial value so you don't get messed up an x value since we are not creating a new x value and basically you are just doing the same thing doing the same thing for the dates and year here is a successful successful sample and everything is draggable i did the exactly same thing for days setting up a value for them and ears basically just art is all about setting values okay to sum up the first step is convert the data to frames make sure you're typing it with christ's typography i mean paddings okay the second step is important import your first page to protopy and make sure your group the thing we are not needed to use together and make cover layers for them the third thing is import the three picture to this frame and write down the initial value because we are going to change it later the third thing is creating opacity layers after creating opacity layer you will need to check if the layer is touchable in the lower layer okay the fifth thing is creating the dragon effect the max y would be your initial line and the minimum y would be the y value you are going to drag it to the very end okay

Channel: Hannah Akira Jiang

Views: 1,832

Keywords: protopie, protopie tutorial, protopie time scroll, protopie date, figma date, time scroller protopie, date selector protopie

Id: _MHXWcWlno0

Length: 12min 4sec (724 seconds)

Published: Fri Oct 30 2020