UI Design in Sketch App and Flinto Animation | Angga Risky | Skillshare

UI Design in Sketch App and Flinto Animation

Angga Risky, Learn. Implement. Share.

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (38m)
    • 1. Trailer

    • 2. Design Splash Screen

    • 3. Design Home Screen

    • 4. Design Single Screen

    • 5. Export Artboard to Flinto

    • 6. Animation Screen I

    • 7. Animation Screen II

    • 8. Export Flinto to Video Animation

    • 9. Closing


About This Class

In this class, you will be able to learn about Sketch app to create screens for UI design which it's called READ App. After that, you will make them into animation and prototyping by Flinto.


1. Trailer: Hi, everyone. This is Congress key and welcome to the place. So in this place you will be able to learn about how to decide the specially in home school and their single scream in the skits for all May After you designed the many screen you will be able tow about how to make it into animation without flintoff for my So the first thing you need is an out of state and the second step you want to make into animation with easy and simple step. And then in the last section, you want to learn about how toe record your animation and separate it into video animation . Okay, so I hope you can install interesting about my class, so joining me on the disgrace 2. Design Splash Screen: how you everyone This is anger, risky and welcome to my physio. So in this video, we will designed this plastering for block abusing sketch up for make. Okay. So I will create a new human here and choose and in we need to create the new art board we goto insert and then art more. And I will just the taipan a c here. So before we start to desire will it toe change the limbs off that boat wreck here you can change it. Forced blood screen. All right? And did I will create the illustration for our application. We can still hair. Okay, I will create insert Sepp and run that on. We can create here. Next I will remove the border color here and click here and then we can end it The syrup and I will click here toe, create a new poll you and click here toe create a new poll You and we need to zoom again and click here and removed the corner here and dead. We can create like this. Okay, and I still dead. We need to create the lines here. Soemadi fee the sir. So we go toe insert Sepp and line. And there we can put great like this. Okay. And setting the thickness toe to pixel. We're gonna check first. No, I saw increased the thickness. It's far. Yes. And then I will duplicate this lions and this ice, and you can move the line off copy like this and we can duplicate again. Okay, Its enough And I will grow this layer group and sell it all off them and make it to center . I think it's been we can Manuel like this, k. After that, select very tingle and goto filled. And then I will change the color with the red color E seven for C three c. Okay. And select group and sell it all off them in set the group and changed the color to white like this. And still there. Will it create the tax here for our application? We go toe inside and thanks and click here. Our applications called. What was it? Okay. The name off application is today. And then I will change the white toe regular and thanks. The phone size toe 36 like this. Maybe I will changed this way. Toe light? Yeah, it's it's good Okay, So next weekend group all off them group selection and change the man to logo and then make it to center with the stools like this, and then make it toe middle. No, we go toe top. Okay, Its enough. And after death, I will create the button here for getting started. So we go toe, insert sap, and then we go toe or under and we create the button there, here, and make it to center and goto bottom and setting the radios five and removed the border color and select the street single and move to the top. 1234 All right. And then I will create the text here. Forget started. So we go toe insert and Tex, and we click here to get started. Okay? And we're gonna to change the font size toe 20. Okay. And I will change the pattern color to right, and I will change the phone color about get started to white color, and I will select the reaching out to give the same color on Khalid color and just the shadow color to red. And then we go notto increase the floor, Doten. And why is for Okay, so we need toe create the, uh, May grown here first. Select off them layer and create the group selection. And you can change the group name to get started. Okay, you can organize. I love them off layer. Okay, so we go toe insert Sepp and letting go, And then we can create the big room here and first removed the border color. And we can move here like this and I will change the big green color too. Maybe, uh black. Okay. No, it's not good. Yeah, I will change the butter color toe for a for A for a and I will changed the heck off. Big run like this, OK? And select the logo and selectorial to change the world color like this. Okay? And we need to zoom and select the butter and open the group and create Sorry and select Very tingle toe. Great click here. Intense the opacity here toe 50. Okay, it's 50. So this is the splash asking for our mobile application. Okay, so thank you very much for watching this video. So in the next video, we will descend the login screen. See you 3. Design Home Screen: in the profuse video I told you about. We will decide the login screen, but we're not. We will descend the home screen, so I'm sorry. Okay? We just need toe duplicate this layer duplicate and then you can taste the name, toe, home screen, home screen. Okay, It's pretty cool. So I select the home screen. When did I will select the group and cream off? We can deal it. Okay, So I will select the re tingle three and changed the name to be G. And we can precise. But this I will recess toe uh, 250 pixel. You can see here 250 pigs are And then you need to know that I have prepared the photo stock for our article. So we next door Pato we need toe create the article. So I will copy this porter of a copy and then I will select the BG and best here. Okay, Ben, After dead, I will select the BJ layer and click right and mess. So the photo will you get the masking here? So we need to zoom out Oregon breast, look common to and precise the butter and coming to and resist again like this. And just make sure the water to center. But he's and you will get like this. Okay. And after death, I will create the little here. So I would I will select the group. Sorry. I will say, like I love them and click right and group selection. Okay. And you can give the name is big article. And then I will goto insert Tex and create new text here. And you can change the font size toe. 36 story is too big. So 24 and the phone color is white and the work is regular. So you can have something here by example. I will talk the simple article. It's good for you. Okay, It's on the sample, and I will change the hate line to 28. Okay. And get the Seder here. So you know, like this and setting the opacity. You can sit in the opacity here. 50. Okay. And then I really changed the way toe like again. I think it's good. Okay. And then I will duplicate this layer duplicate and Eddie for the death is general 12. There you get. Come on. You on 2017 and I will change the Francaise toe 18. Sorry. It's toe big 14. Okay. Anything that you love like this and you can move like this. Maybe I will select again and go back again to regular Because we need the different here and I will decrease again. The line hike toe 24. Okay, it's, you know, at this. Okay. And the next one when it toe, create the article here. So I will create new set and run and like this and get the margin left. This one when you press lt on your keyboard, piston and tune okay. And then our dream off the border color and setting the radios to 50 so we can set. We can see the button. What can produce its five pieces. So it's so be five pixels. Well, we can sell like the digital here, and we can duplicate the ghetto. And then we can move inside off three single for on like this. And I will select the move on and changed the color to the black. Okay. And then I will remove Macedo, and I will change the front size toe 18. No, Does 14. Okay, you know what do you and I will change the phone line toe I to Okay. And then we can take the checks. Another fix like, uh a beautiful Uh huh. But a fresh Okay. And then we can remove this one. You move because we don't know and I will change the color to the black lettuce. And I will change the way to like like this and just the heckler and again toe 16 and selling and make the Vatican learned its middle. And then just to make sure it's done like these, okay, And then I need the immature. So another image. So I get this one copy we can copy and Cilic And we can best here just waiting for the image. And I will sell it all off the mayor and group selection and then get dinner. Is optical and Senate the greeting for to change the name to be G and I will click like and miss and selling the image. So we need to re zeiss the picture. Okay, Recesses doing it, you know? Okay. And click right and ignore Underling, Miss. So you will get like this. Okay. And you can keep it again. Uh, step you can click it and duplicate on Repeat again. Just make sure the margin top is 10 p. So And you can repeat again. Duplicate again. Okay. Like this. So in the next video, we will descend Single for the tell about our article. 4. Design Single Screen: Okay, So in the British video, we have the sign like this. But actually, I fix my article toe, create a different article so you can do it by yourself, okay? And no, I want toe make this home scale scroll animation in the Flint O letter. So we just need toe, select this layer, select this group solitary, select this group, and then I will duplicate and move to the bottom. Look, but this So, um, the article, the article it's will be like this because we will scrub and scroll again. Okay, So I will duplicate again the pick up here and wolf again like this. Okay. And sell it This group and love toe at about how scream. Good. So it's hate them. It's not a problem, because we were like it in tow animation in flint O and then select the big optical. So, like, the big have to go select this layer and go toe insert study the two layer emits Sorry. Go to layer on flattened toe selection to beat. So it will be like this. Okay. And senate, big obstacle and click right. And I dont goto boom. Okay, So I will select this area. Sorry. I will select this layer. Do you like and group. Okay, so we will pick up the home screen duplicate and thinks the name off screen to the single screen because it's single. Okay, So you can They left the group one day one. The layer just left this. Okay. And then I select the BG and a study Collins e and then click here toe unlock the size perspective so we can recess like this, but he says again and then discuss again and a process like this so you can move the You mean it is to the top. Okay. And then we can precise the image. This is Thunder says on like this. Okay, it's pretty cool. So the next one I want to create the text here. So you select the sticks and, um, I will make this text still be. Yes, it's enoughto and sell it. Sell it The line on ended 26 and we can give the margin like this. Okay. And you can complete the text. Okay? It's only dumbing, so don't be seriously. And then I will create the photograph here, but I need a lot of tips So I'm going toe lipson dot art because you need the sample content. Good. I will copy this. Thanks. A copy. And then I will duplicate this layer. Maybe I will about this. Good. And get majene for this and then I will change the font says toe 14 and get best here and change the line toe acting Andi yesterday escape escape. Okay, Dan, I will end it the paragraph and you can and, uh and, uh and and oops, you can enter again Toe that and again. And okay, so we have like this I will decrease. Sorry. I will increase the height. Okay, the latter. It's a B 24 like this and I reject the color but this. Okay, so we have this place Green house, grain and single screen. And then in the next video, we will make it into animation with a flint o for my 5. Export Artboard to Flinto: Okay, so before we go toe Flint O, I want to make sure we have the primary key for the animation in the flitter letter. So you can goto home screen and select this layer and go to layer and frightened Selection bit map and keep. And we can give the name off key one on goto single screen. And then you can silicon off them toe good to layer and flattened solution to beat me. And you need to change the name to K one because it's a real light in the Flint O do you let Okay, so let's do it. I will export first the board, though, friend Oh, black hair and sending the window. If you don't have the blood in, you can install it. Oregon by the flint o So you will get the skips black in. Okay, So sending Oefelein toe setting the scale 100 sending to Flint Tal and this is our Flintoff . So in the next video we will get instructed with the Flint O in emission 6. Animation Screen I: So in this video we will create the animation step by step with a flint O for make. Okay. So you can click here, get stuff better and create Lee. And you can't get here to the home screen. And then new transition on this is a star star bets on when we click this get started. So be like this. Okay, It's good, but I want to make beautiful. So I select this one. So like, and then I will select alof dumb at this, and then I will get the timing. It's classic and setting the duration Tau 900 on the delay. It's be I found it. Okay. And then I want to make to the Reich likeness, setting the opacity to zero so we can start here. You can see it's good, right? Okay. We can brief you here, so I click here. Whoa, It's nice. Is he easy, dude, So we can sit and exit, okay? And then I want to select this layer aloft. It is, and then I want to make a group here. You can see group here a little, okay? And then you can scroll toe 30 car, and you can setting this to the top. Klytus. Okay. And then I went toe brief. You first. He gets that American likeness, but it's still not good. So we need to modify e the scroll and mission. Very well. Who have group here? Which scroll? Scroll item. And I want to go up again. This one I want to. I went to a group this layer January Move on and bit map. I want toe group it toe. Big optical. So we have toe a two group here. So I want to sell ical off them and then be healthier. So it will be like this. And we need to create in your statement hair, your Stutman, your step and then I want to sell it. The big article and the bit map we can like this. And the move on on January we can move to the top and gone so you can see like this. And then I will sell. I want to sell it the beaten up and gone. Okay. And then I want to sell it this cruel item. Andi, create lean two in your state here and select the guest. Er it's grow so I can brief you riff you and God, it's easier, right? Okay, good. We can save and exit. So in the next video, we will make a home screen toe the single screen. 7. Animation Screen II: Okay, So in the crayfish video, we have the signed animation for From Those Plus Going to the home screen. And no, we're getting start from home screen to the single screen. All right, so I will double click here, the Brooklyn DoubleClick and I get the layer who it's the boys will realize. And then we can create Lee and select the top, get to the single screen and new transition and only can see here the checkbooks with our airline screens. So I will click, Okay, And then we can select the group and it's cool, right? And OK, one. You can see the key one here, the key one Here you can connect the layer and then I want to sell it this layer and moved to the bottom. Move to the bottom and setting the opacity to zero so you can see the result like this. It's good, right? You can select the dealing toe 300 really shaken. It's good. So we can prefer for the beginning gets that. And then this is the scroll in the mission on like this. And then I want to make this is a girl, so we'll win it so safe and exit. And then you can see this layer you can see and I want to select this layer and go to group and scroll group. And silly though Fredricka and setting the height like this, You consenting And then I want to sell it The Slayer and behalf here on you can create a new step man like we did in the last video and select the key one and recess and removed the opacity to zero like this. Okay, so in the initial pads, we should let the screw group and currently to the noose that and done. And then you can riff you brief you on go begin and sell it on like this. Okay, It's cool, right? And safe and exits. So, comrade coalition, you have to learn about Flintoff in this video. And you have to learn about skits up in this course 8. Export Flinto to Video Animation: Okay, So before I close this class, I want to show you about how to record and Hajto surf your animation in and before our m o fee. So we go toe pre few and you can see the button here with ah, circle this button for star and stopping according the preview window. So we're gonna tow Click it and it's really for record so you can click Get start and scroll to the bottom and back to the top And stop here and scroll to the bottom and make the top and go back to home and stop recording. You can see if your brief you in tow your animation. Okay, so this is Look at any mission. You can surf it and then you can apply You can play. This is the dot M o fee you can buy with your media player are you can confirm it to the judge if you can find the tutorial in the Google how to comfort toe the diffraction? This is the final result and correct relation. You have to learn so much in my class. Okay, so to you 9. Closing: Hi, everyone. Thank you for doing my class. And then you have finished this place with good yourself. Okay, Well, I hope you can give me the bag. All the few. And then if you have any question placement me know, and I will help you, and it's free. Okay. Well, thank you very much for joining Necklace and seal the next Klis.