Adobe XD to Webflow: Turning your prototypes into live websites

designing a website without writing a single line of code sounds like a dream for most creatives including myself however most tools have their limitations WordPress for instance needs a lot of plugins and maintenance to work properly my most drag-and-drop online site builders are forcing you to use templates and restricting your creativity there is one tool that stands out that seems to fulfill the dream called web flow I was approached by their team to try it out on an actual web design project and I was pleasantly surprised by how quickly I found my way around it it almost feels like using a tool like InDesign in a browser in this video I will show you how I turn an Adobe XD prototype into a fully functional responsive site with some cool parallax effects and animations [Music] this video is going to be very hands-on I'm going to show you exactly how I take my Adobe XD prototype and turn it into a working website using web flow if you want to find out what's the difference between the two tools and also compare it to other similar builders for that I created this milla note board for which the link is in the description below so you can read more into it if you are interested before we get started I just want to show you two sites that were built in red flow and they show and highlight some of the cool features that you can use like these parallax effects that you will see further down here the interactions on hover page scroll and we can see that also this is a fully responsive site so when I change the size of my browser it adapts to it now the best thing again is in workflow you can do this without writing a single line of code you will see exactly how it's done but here's another really nice site I'm just going to refresh it so you can see how it loads up we have some really neat animations and effects here and you can see a lot of things going on here cool effects really nice transition and then once again this is all responsive and we have some nice menus here even cursor effects and so on and so forth now if you go on web flow site you can find these examples in their showcase but I'm going to start with a new project as I promised so without any further delay let's get started I'm going to pick the blank side and I'm just going to call this nature photo I'm going to create the project now here we are in the web flow builder and if you're familiar with Adobe products you will find the layout and the user interface quite similar so on the left side we have the toolbar then we have panels and we have also selectors here on the top to change the view between different platforms or screen resolutions but I'm going to tell you more about this as we go along first of all I will show you in XD what I created so this is the visual for the site the main page of this website by the way in XD you can use the command scroll or control scroll to zoom in and out quickly and komando control 0 just like in Photoshop and illustrator to fit the page over our board to the screen so you can see it's a fairly simple site we have a header we have a main slider on the top and a couple of things below now I'm going to make it slightly longer in the actual web flow project but for now this is all that we need to know in XD when you start creating your mock-ups you can also create prototypes so create multiple pages and even trying out how it's going to work when you switch between the pages but for now I'm just going to show you that when you are ready you can go into the file menu and choose export all artboards or batch or you can even have a selection and then export only the selected items but Before we jump into web flow let me just show you one thing here in XD which also is an amazing feature especially when you're working on these visuals or mock-ups I'm first of all going to double click on the art and drag it further down so we have a little bit more space here and let's just say this layout that I have with the camera and the text next to it is something I would like to have more of so I would like to have a couple of features listed below this for this you can use the repeat grid feature in XD you can press command or control R or click on this icon here on the right and that creates a grid from it which means you can then drag it down and you can duplicate things as easily as that in both directions not just work tickley but also horizontally now the best thing about this is that we can make amends to each of these items without messing up the grid so let me show you why I mean I'm going to zoom a little bit closer and for example if I want to change the text on this second item which would be wildlife at your fingertips you will see that it's not changing anything on top and the bottom and to replace the image it's best to drag and drop all three images that you want it to use so if I drag and drop them in here it's going to update all three images at the same time and then the cool thing about this is that since this is still a repeat grid I can select it adjust the spacing between them all at the same time I can also continue adding more images at the bottom and notice that it's going to repeat with the first one in that column but of course I can make additional amounts like selecting the text double click on it and start moving it around notice how it's updating all of them at the same time or just simply increase the size of the text and without messing up the copy they are all moving at the same time and this is just one of many things that I love about ever working in Adobe XD especially for web design it is really a rapid prototyping tool from which you can get started and turning it into a working functioning website in web flow but I have already everything prepared so we can just reach back into the browser now the first thing that we need to do is to add the for this I am going to click on the plus sign here and you can see that we have a couple of pre-built layouts here but what we need to start with is the navigation bar so I'm just going to drag and drop that in here now if you start off without having any sections in your design that might be a problem later on so I recommend to do that first and obviously you can do this later as well because you can drag and drop every element easily from one place to another so I'm just going to drag this section and you can see I can use the navigator as well to decide where this is going to be or here in the actual viewer or layout area so I'm just going to drop it here on the top and then drag the nav bar into the section just like in the layers panel you can see exactly now nav bar is inside this section so now that's ready we can put our first image inside this box there's a very handy shortcut in webflow if you press command or control E that's going to give you the quick fine and if I just type in image and then press Enter is going to place it in already inside that selected item so we can see it now inside the brand section we have the image now I can choose image and we can just simply drag and drop images in here I'm going to use finder and select the image that we need the logo and I just drag and drop it here and you can also drag and drop multiple elements or images at the same time and add them into the SS library in webflow by the way you can also switch to that view by pressing J on the keyboard so you can always see all your assets or just click on this icon here on the left there's also a shortcut for the Navigator which is Zab or click on again this icon here on the left so now that we have the image in place I can start refining the spacing and padding so what I'm going to do is to add a margin above it and notice I'm just simply dragging up and down these numbers but what's even cooler is if you hold down the shift key you can increase and decrease this value all at once so in all directions or if you use the alt or option key dragging up and down it's going to change the opposite sides simultaneously again holding down alt or option key clicking on a number you can reset it so I can very quickly reset these and then still holding down alt or option I'm just going to increase the top and bottom margins and then I am going to also reduce the size by holding down the Alt key or option key you can also click and drag left and right on any values and you can very quickly update them or change them so now I can just set it up to probably around 70% I think that's a good size for the logo and for the actual navigation links I can select the whole menu and I can continue doing the same thing so I can move them further down something like that and then of course we can start changing these so here I'm just going to type in magazines and then I'm going to select this one and I think in the original design if we go back to XD the next one is school so once again just simply double click and start typing them in now if we need more navigation options on the top we can just simply hold down the author of shanky and drag one of these place it where it needs to go once again let's check the next one is authors so I'm just going to double click type that in and then we can also do the same thing by using command C or ctrl C to copy and then command or ctrl V to paste so you can see how quickly we added another one again and I can just type in one more portfolios for now now I'm not going to spend more time on the navigation bar for now let's move on to a more exciting element the slider so for this I'm going to again create a new section so you can see our first section is here I'm going to just select it and create a class for it which is useful because then later on we can reuse this class if we need to I'm just going to call it navigation or main you maybe something like that now let's create a new section we go into the add options and then drag the section right here on the the nav bar for this section I'm going to use another element quick find is probably the easiest command or ctrl e type in slider and then enter so that's already placed in now the height for this should be different so I'm just going to find the size it's up here so instead of automatic height I'm going to define this to be 400 pixels maybe even bigger 500 pixels for now we can change this always later but that's a good size and I am going to show you that here in the navigator if we open this up you can already see that we have two slides and also here at the bottom we can see that now in slide one I am going to place in the first image and the best way to place it in is instead of drag and dropping an image inside it I am going to use this background option so click on the plus sign and you see by default it's going to add the background image then we can choose the image and once again from the finder I'm just going to drag and drop one of these images in let's just drop in a few more so I'm going to select this one and then maybe the pelicans let's just drag and drop all three of them in here now out of these I'm going to select the first one of course you want to minimize the size of your images so if they are really high-resolution it might take long for the site to load but that's actually one of the biggest advantages of workflow that if you are hosting your site with them the speed is incredible so the size load really fast so it's really well optimized both the code and the hosting as well now I'm going to go back to the images so once again choose image and I start with the image one but it's important that instead of using it as a pattern we want to set it to cover we can also pin the position to the center point or any points of the image so I want to see a little bit more of the bottom part then we can pin it at the bottom now I'm going to set it to the center so we can see the night sky with the Northern Lights and I'm going to switch to slide two and repeat the same thing so once again we go to backgrounds choose the image for this I'm going to choose the second one Canyon and I'm going to set it to cover and then pin it to whichever part makes sense I think this time is probably good to have it here on the top now if you want to add their third slide the easiest way to do that is to go to the settings tab and then there we can choose add slide it's better to do it than copy pasting because if you are copying a slide they might get connected so that one of them will be the parent and the other one is a child and then you just have to fiddle around a bit more to divide them or separate them this way I think it's faster so now that we have slide three we can go back into the style options and then here further down we go into the image and then choose a different image and we choose this one once again it's already set to cover it seems we just need to change the position probably Center will work for this one yeah I like it now the only thing I'm going to change is to go back to the main size of the slider so I'm going to select the slider and then maybe increase this to 550 pixels yes something like that now at any point if you want to test out how your site works you can use command or control shift P the shortcut in which you can test it out and by default the slider is not going to move around so we can only manually switch between the three images that we added and of course depending on the screen size we will see different parts of it so in the preview we can already switch to let's say the tablet size in which I can see a slightly different proportion in the image and notice that already the menu switched into a mobile-friendly menu which is quite nice you can also see how it's going to look like on the mobile so we can go back to the design mode with the same shortcut command or ctrl shift P or click on the I icon here on the top so that we are we are back and I am going to select the slider and go into the settings and I would like it to automatically play the sides so I'm going to just add that option and then we can set up all kinds of other things like instead of the animation type that we had we can choose fade over which is quite nice so let me just show you this once more I'm going to preview and I just wait a little bit longer and then we will get the fade or all we can also see it when we are switching between them alright so that's all we needed to do for the slider now I'm going to show you a really cool feature how to add an animation on the side that flow has an integration with a site called Lahti and you can find this element here on the left side first of all let's just add another section at the bottom and I'm going to go back to adding elements scroll all the way down and then you will see it here in the media section lotty animation I'm going to drag and drop that element into this new section and if I scroll a bit further down you can already see it here and to find some sample animations we can go to this link lotty files and it opens up the website where you will need to create an account for yourself and then you can download these pre-made animations now some of them are paid but there's also free ones so for example if I just type in camera we can find a lot of cool animations and here's one which is completely free so all you have to do is to download this JSON file once you download that you can import this straight into web flow and this is the file format that you need to use even when you are creating something yourself in After Effects and that's a really cool aspect of this again an integration between the Adobe Creative Cloud and web flow that is really nicely connecting these tools together if this is something you would like to learn more about and you would like to see me creating something in After Effects preparing it for web flow let me know in the comment sections below and I will be glad to record a separate tutorial on this topic but coming back to the designer I have this file already downloaded so we can just add it to our assets here is the file JSON and I'm just going to drag and drop it in now it's added I can just replace it with this one and it's already on the site but you won't see it unless you go into the preview mode and you can see at the moment it's huge now to fix this we need to have a separate element within the section so what I normally do if I want to constrain an element is either use a container or a div block I'm going to use command or control e and then type in div and if block comes up so now that we have this we can just set it up so that the animation is inside the div block then we select the div block and from the Settings here on the right we can set up its size so I'm going to use for the width maybe 200 and then for the height maybe 150 yes something like that and then with this icon here we can Center it so the div block is now in the center so let's see the preview how this looks like and I think that looks perfect so that's how quick and easy it was to set up this animation and we can go back into the settings and make sure that the animation keeps playing so when the animation itself is selected we can go to the settings and just simply choose loop now just to make sure you understand how quick and easy this was I'm going to replace this animation with another one so I just go back to Lottie files and here's another one which just shows the aperture and how it's changing which is quite cool so if I click on this once again this is a free animation from Lottie files I'm going to download the JSON file so now that the file is downloaded we can go back to web flow and we can go into our assets and just simply drag and drop the file in so there's the aperture file JSON and then all we have to do is from the media assets we can just drag and drop this into the div block can click on preview animation here on the right side and we can already see it working so once again that's how quick and easy it is to add animations to your web designs now let me switch back to XD to show you the next part of the page I'm going to actually skip this bit here in the middle because I would like to focus on this bottom part where I'm going more into the features of these magazines and the first one is about the cameras and gear tested in the field so for this I would like to start introducing some parallax animations now just to have something to be able to scroll up and down and be able to see the parallax effect I'm going to add another element here in this time a container I'm going to use command E and type in container there it is just make sure it's not inside the div block so I'm just going to drag it out yep there it is and I'm going to place an image inside this and choose the image let's just choose the magazine and there it is now we can create a new section at the bottom so let's go to the plus sign section and then drag and drop it all the way here at the bottom so notice that we can't add the section inside another section that's completely normal now that we have a section here I'm going to use another element called columns which will give us the settings whether we want two three four or any types of columns I'm going to pick two and also notice that we can already set up the size of division between these columns I actually would like slightly more space on the right for this first feature then here in this left column so column 1 I would like to place an image so I'm going to again type in image place it in and then choose the image and just drag and drop the camera into our library and once it's uploaded we can select it and it's already there now on the right side I would like have text so I'm going to add a heading first of all and then I'm going to add another element paragraph using this shortcut really feels like I'm in InDesign where we have quick apply with command or control return or enter even the shortcut is almost the same so I really like this it feels really natural now I'm going to just make some adjustments for the paragraph I would like to have some padding work from the right so I'm just going to squeeze it in a little bit like that and then I am going to just type in here camera tests it doesn't really matter what we write there for now and I am going to have some more margin from the top then I select the image and we will also have a margin from the left and I'm going to make this smaller so both left drag the maximum width something like that then from the position I'm going to open float and clear and choose the right options to position the element to the right within that column and maybe I'm just going to increase the margin a bit more on the text something like that and now we can start adding our parallax effect what you need to use is an interaction so I select the image I go to interactions here on the right choose the plus sign on the element trigger then choose vial scrolling in view then choose select action and create a new scroll animation now this is a really powerful editor where you can create all kinds of cool animations and you can combine multiple movements as well in this case I'm going to start with a simple move transformation so select move and by default and you see under scroll actions when you select something is going to create a start and an end point now for this to work you need to define something for the start point I am actually going to define the end point first because this is where I want it to be so I'm going to just type in 0 and 0 pixels in the x and y values then I go back to the start point and I'm going to move it to the left so I want it to come from the left side and for the y-value I'm just going to type in zero pixel once the little exclamation mark disappears and it means that the animation can work now and we can even test it out by turning this live preview feature on so if I scroll up and down we can see that the camera is coming from the left into the side which is great but to be able to see it properly I'm going to add another section to the page so let's just drop a section here at the bottom in the Navigator it's easier and I'm going to go into the options for this and type in 800 so we have more space to scroll down select the image you can and then I'm going to go back to interactions and by the way it's good to rename your interactions like this one by scrolling in view I am going to select it and change the scroll animations name because this is something that we can reuse if we wanted to so I'm just going to rename it and call it fade in from left I like to write the directions in capitals usually so fading from left that's nice but if I want to make changes to it we can just click on the COG icon and I am going to add an additional scroll action because I would like it also to fade in so I want opacity also to be animated and I would like to add an additional opacity keyframe we can also call this so there's our opacity at 100 percent I'm just going to select it and we can see opacity is 100% but it should start with zero percent so if we turn the live preview on this should already work I'm not sure why this didn't register let's just set it up again okay it's zero that's it now turn the preview on and then as we scroll up and down we can see how that looks like now I actually would like the opacity to start already on let's say 20 percent so if I go up and scroll down you can see how that changed it and also I would like the opacity and also the movement to arrive to its final destination or end point before it leaves our viewport or screen so I'm going to set it up a little bit further up so the end point is going to be around 60 70 % so if we check this out you will see that now it reaches the center a bit faster I would say even earlier is better maybe 50 and 60% the movement should be actually before the opacity or the fade or very close to each other something like that so now let's test it out yeah that feels nice so it arrives to its final destination around when it's at the center of the screen which I think works really well and of course you can add all kinds of different things like rotation again which is going to scroll actions rotate and then we can set it up so the Z rotation is 0 at this point so that again the end point and then we add the starting point for rotate we just add that here and then drag it to the top and then change the Z rotation maybe slightly to the left now once again if we test this out let's scroll down and we will see there's a subtle rotation as well added in there which is really nice now on the next object let's take the parallax effect even further I'm going to create a cool out-of-bounds effect with this image which we've seen already next II now what I've done here in Photoshop is that I prepared already the background and the bird in two separate images so originally this is one photograph but what I've done is to remove the ego and I just have the background for this I use content aware fill and on a separate layer I separated the bird from the background by using simply masking I use the pen tool drue the path around the Eagle it took some time but now I have it completely isolated so what I am going to do is to save these two images separately I will have the background saved as a JPEG and the bird layer as a PNG because I need the transparency for this to work now you can do this in Photoshop very easily by selecting both layers and you can right click and choose export else once you are in there you can select the layer that you want to save as a JPEG set up the quality probably to 60% usually is a good idea to do and also make sure you reduce the size so in this case the scale can be much lower probably the widths can be around 600 for this website I think that's enough and you can see already it's 60 kilobytes so file size is always important to reduce as much as we can but then we can select the bird layer and then we can set it to PNG so we have transparency there but once again the width should be lower again 600 pixel in this case should be fine now this is slightly bigger but we can always try to use the smaller file size with 8 bit then it becomes much smaller and I think it still looks good so I already have these saved out so let me show you how I put it together in webflow so here we already have a section prepared at the bottom and I am going to just drop a column in here so I select the section use the shortcut command or ctrl e and then type columns then I am going to use the same settings probably 5 on the left side 7 on the right we can already add a bit of margins just so we separate it from the top and then on the left side I am going to actually add a div block so once again we start typing it in and pasting it in I use the same shortcut again for the quick edit so we have our deep block in here the reason I use a deep block because first we need to create a background and then place the image on top of that so the deep block it's self is going to use the background by adding it from here backgrounds click on the plus sign and then choose image and we will need to drag and drop these images that I saved so the PNG and the background so the birth back so let's just drag and drop them in here and I'm going to select for this diff lock I'm going to select that birth back which is already selected it's great we can just set it to be a cover set the position to center and then we can go to the actual size of this I'm going to set up the height to maybe 600 let's just see how that looks okay so that's a little bit too big let's make it 300 and then the width also 300 okay that works quite well I can now align this to the center of the frame and then maybe add a little bit more margin here on the left side I'm just going to do something like that okay that works well now we can add an image inside this div block so even though we have an image already inside it that is just the background of the block but we can still place an image inside it so this is really the trick so what I'm going to do is to use the shortcut command II and then start typing image and notice this will already show up here in the Navigator inside the deep block so now we can choose our image and that is the bird PNG so that's already there and we can again just adjust the margin drag it down once again it feels like working in Photoshop moving things around so easily I love this about web flow so I'm just going to set it up somewhere around there I think that's good and now that we have it in place we can go to interactions click on the plus sign on the element trigger and choose the same option as on the camera while scrolling in view then select the play scroll animation option and this time we will create a new scroll animation we could use the same one as we had on the camera but instead I'm going to create a new one because this will be slightly different I will start with the movement so I add the movement and the start point I want it to be where it is I'm just going to type in zero zero for x and y and then the end point I'm going to move it further to the right something like that that's enough out of bounds I think I don't want it to go over the text which will be on the right side so that's already good but we can just move this a little bit higher up something like that and don't forget to add 0 for y so the Y value doesn't change but you still have to add the number there for the animation to work so now this is all a set up we can turn on the preview and once again scroll up and down we can see how it works okay that's great and we can add a bit of rotation as well so let's choose rotate I'm going to put this here so it can arrive to how it is so I'm just going to add Z rotation 0 degrees and then I'm going to add an odd not of rotation here in the beginning where I'm going to set the rotation to actually yes somewhere maybe there okay and then the other one can be slightly rotated higher up yes something like this so let's check the preview again if I scroll up and down we can see the nice movement there so the Eagle is going outside of the frame and also slightly rotating now of course this is again just scratching the surface of what's possible with interactions in web flow so if you are creative you can utilize this and really create some amazing effects on your web design and of course the site already without me doing anything is already responsive of course you can refine the responsive settings if you go into the tablet size and then the landscape and portray mobile sizes and because web flow is handling all the CSS in the background if you're making changes in one break point it's not going to affect the other breakpoints so just as an example if I wanted to move these elements around I can go in and adjust the margin move it a little bit up and our logo we can move it further to the center in this case something like that and now if I switch back to the desktop size or the tablet you see it's not affected at all but in the mobile size we can see how nicely it's positioned and that is all I wanted to show you in this video if you are ready to get started with that flow just click on the link in the description below thanks a lot for watching like and share this video if you enjoyed it don't forget to subscribe and hit the bell icon to get notified whenever we release new videos click on the link on my right and start your membership today to get access to over 200 hours of training courses and personal mentoring by me and my team of creative professionals have fun learning guys and I will see you in the next one [Music] you

Channel: Yes I'm a Designer

Views: 246,300

Keywords: Adobe XD to Webflow: Turning your prototypes into live websites, Adobe XD to Webflow, Adobe, adobe xd, web design tutorial, graphic design, webflow tutorial, webflow, webflow tutorial 2020, web design, webflow review

Id: OYffWBYzuVI

Length: 36min 23sec (2183 seconds)

Published: Mon Jan 20 2020