From Adobe Xd to Code using Anima

anima 4.0 just released and with the new release i've partnered with anima to bring you today's video to show you how to use anima in your web projects to create workable developer friendly code transfer designs to react and html collaborate with your team on projects and just keep everybody on the same page in your design to development process that's today's video let's go ahead and dive right into it so here in adobe xd i've basically got the design finished i've got how i want it handled on each size device from the desktop all the way down to mobile everything is ready to start shifting to the development process so this is where anima is going to really come in and help smooth that out so here i've got my anima app open if you need to install this you can go to your plugins panel in the bottom left of adobe xd and there is a plus here in the top right and you can just select that plus and just search anima here in the search box and install it once you download that just sign in and if you don't have an account i have a link to anime down in the description so you guys can just go sign up for that so the first thing we need to do here is set up the project so i'm going to click new project and i'm going to give this a name and anima allows you to collaborate with your team right inside of anima so if you have a team you can go ahead and set that up and select that from the drop down today i'm just going to be doing personal since i'm working by myself and i'm going to hit create so to show you how powerful anima is i'm going to select the desktop version of this site that's where i typically start from when i'm designing and building a website and i'm going to go ahead and preview this in the browser we're going to go ahead and open that up so right here is our draft every time we click preview in the browser it's going to show us a nice draft that way we can double check and make sure everything's the way we want it before we sync it to the project for all of our team members and collaborators to view it so right now we're in the desktop view if we switch to responsive nothing's going to happen because we haven't set that up yet but you are able to check that before syncing to the project if you want so we can scroll down and see the entire design that we've created in adobe xd right here for us in this browser but for now i'm gonna go ahead and sync this to the project so now we're viewing the project itself our sushi website here we can add our team to this and we can go ahead and view all of our screens down here so i'm just gonna click on our desktop version for now so now that this is no longer a draft we have three main features we have play comment and code play is for viewing the website it's looking at your high fidelity prototype making sure everything looks perfect and the way you want it comments are a great place for collaborating with your team letting people know maybe we should change to this maybe we should fix this element and then finally code is super powerful so all we've done is taken a design that i've made in adobe xd and clicked preview and browser and we already have it developed as code for us thanks to anima so this is how this is going to speed up the design to development process if i look at my adobe xd design i want everything to be pixel perfect when it's transitioned to the browser i want it to look exactly like my design and so what anima does really well is help prevent anything from being lost in translation it converts exactly what i designed into code the exact dimensions size everything so all a developer has to do is come in grab this element download the code copy it add it to the project and we're good to go they can also add overrides so maybe you've talked in the comments and you want to change something so the developer just comes in and can override these from here they can download all the assets for the project here as well without you having to send them over it just overall makes this more seamless of a process another really cool thing they've added with anima 4.0 is the ability to not only grab html but react code you can automatically change that just by this drop down and grab that code for your project so now that we've got a good idea of how powerful this actually is let's go ahead and add some more of the features that anima has since i've already designed how i want my website to look on different screen sizes let's go ahead and add those as break points we can go over here and select the plus next to break points and holding shift i'm going to select all of the different sizes for the exact same screen in this case our home screen you'll notice here in the breakpoints list they've started generating at the width of each one of these artboards and then i can just hit done to set that up now we can update that by selecting preview in the browser and so now at the top center you'll see we have the different breakpoints so this is the large desktop the smaller desktop tablet and mobile and we can take a look at how that adjusts responsively by scaling the browser in to see all the changes that are made and so we can scroll through and double check everything gets resized perfectly for each size device once we're happy with that we'll go ahead and sync that to the project so right now our design is coded it's responsive but it's still static none of our buttons on our screen are doing anything so here at the top i have this navigation group it's on top of everything so that the z index is going to be higher so when it's scrolled it's going to appear on top of all of our content and i've done so with fixing the positioning while scrolling here in adobe xd but we need to set up our links so to do that it's super simple all we have to do is select our link go over to our plugin click a plus on the link and for this design i'm going to set these up as anchor links because each one of these links goes to a specific section and all i have to do is click on the section i want it to scroll to in this case the hero and i'm going to click done and then i can repeat that for all of these links adding an anchor link and selecting the appropriate section we can also add external links so here for download the app if we wanted to add a link here for external we could input the app store and open that in a new window if you'd like but once we're done with all of our links to make our website actually function we're going to go ahead and prove that in the browser and our website is really starting to come to life it's responsive our links are auto scrolling to the correct sections and so now our developers have a really good idea of how this site should come together how it should flow where the link should take us how the design should react responsively instead of having to painfully try to describe everything they have a very clear way of seeing exactly what we want to happen but not only that it's not just a prototype they can grab the code and start working from there one final thing i want to take a look at in this video is the smart layers and these are really going to help take your site to the next level so as designers we've designed the website we've showed the developer how we want it to be responsive how we want the links to behave but now we want to show them the extra step the entrance animations you can also add hover effects videos gifs forms and even embed code but for now we're going to use the entrance animations to show our developers how things should load in and interact while the website is actually scrolling because it's our job to design that experience as well so right here i'm just going to grab this stack on the left and add an entrance animation it's super simple i can just click the plus they have a number of different templates here in this case i'm going to have this move right and you can adjust the css transition before and after add delays duration so for this specific one i'm going to push it a little bit further to the left so we're going to go with negative 125 pixels i'm also going to add a delay to this since it's in the hero section as soon as the page gets loaded it's going to go off so i want to make sure that we have a slight delay there and i want to increase the duration to maybe 0.5 as well the thing that's going to make this really come together is by checking this it's going to begin on scroll in the screen so if we were using this text down here at the bottom as soon as that is scrolled into view then the animation would play but since we're in the hero section it's going to play by default since it's already in view so we want to make sure we have that checked and we're going to click save let's also add another one to this text that i was just talking about just to show you how that works as well on this one we'll add a move up and again i'm going to add a little bit more room for it to move by bumping it up to 125 and then we'll add a slight delay maybe point three on this one and a 0.5 duration and we want to make sure we have begin on scrolling the screen checked and then we'll save that with our artboard selected let's go ahead and preview that in the browser so now when the site loads since this is in view it's going to slide in from the left let's go ahead and take a look at that one more time there and then when we scroll down when that's scrolled into view it's going to slide up and do that animation again you can add so much more animation and motion to this page and make it really come to life for now i'm going to sync that to my project so my team can collaborate and that's going to do it for today's video so that's how to use anima 4.0 to help create a better design to development process ensuring that nothing gets lost in translation between your designers and your developers on your project anima is a super powerful tool and i'm so glad i got the beta test this feature early so i could show you this right on release of animal 4.0 so again if you don't have an anime account you've never tried it there's a link in the description so you guys can go ahead and sign up and start using anima today i hope you guys enjoyed this video and found it helpful make sure you subscribe for more design related content and as always have a great day and i'll see you guys in the next one [Music] you

Channel: Caler Edwards

Views: 81,490

Keywords: Convert Designs to Code with Anima, Anima, Anima Plugin, Anima plugin for Adobe Xd, Anima App, Easily convert Adobe Xd designs to code with Anima, Adobe Xd to Code, Design to Code, Export for Development with Anima, Caler, CalerEdwards, Caler Edwards, Adobe Xd, Adobe Xd Tutorial, No Code, UI Design, UX Design, UI/UX, Web design, Design Tutorial, Export design as code, Adobe Xd & Anima, From Adobe Xd to Code using Anima, HTML, React code

Id: YHDMR92VP9A

Length: 9min 40sec (580 seconds)

Published: Tue Oct 27 2020