Basic Pins – Create a Responsive Design in Sketch Using Anima (1/3)


hi welcome to another video tutorial in this video we’re going to show you how to create a responsive design and sketch using animal in this example we are going to use animals pins fixed position and break points what it is going to do is going to allow a design to fit multiple strains for example mobile tablet or desktop okay so here we have the screens that we’re going to work with we have a login screen here and we have the home page of a music player let’s start by making this login screen responsive as you can see this artwork looks like a mobile screen but after applying pins and breakpoints this same design is going to fit a tablet screen and a desktop let me show you how to do that and this artboard we have a background image with a purple overlay we have a text at the bottom and we have a login form right in the center so the first thing we’re going to do is spread this background image so it fits the tablet and the desktop screen to do that we are going to select the background and the overlay and pin it top bottom left and right what this is going to do let’s pretend that the artboard is a browser and as a screencast larger the image stretches with it we are also using sketch fill to avoid distorting the image when we stretch it now let’s take a look at the text at the bottom we want this text to always remain what is it 25 pixels from the bottom and always centered in the screen that we’re going to go to pins and pin it to the bottom and to a center horizontally so if I move the screen it is always in the center and 25 pixels from the bottom so now let’s do the same with a login form in this case we want the login form to always be in the center so we are going to pin it Center horizontally and Center vertically but now I think it moves too close to a text at the bottom so I want to move this form up a little bit just to give a little bit space in between the text and the form well that we’re going to expand the advanced painting options and here at the bottom we’re going to offset it by negative 15 pixels and it moved up 15 pixels we can go you can go more or less if you want but I think 16 pixels looks good again this pretender the our board is you’re off browser when we stretch it everything stays in the center in this stays at the bottom and centered and the image stretches without the story

Leave a Reply

Your email address will not be published. Required fields are marked *