Did they pull it off? AUTOMATIC Prototype to HTML/CSS!

could it be a truly effective solution for exporting your Adobe XD mock-up and prototypes to HTML in CSS we're gonna find out hey everybody what's up Gary Simon here so just last week or a week and a half ago or so there was a plug-in that released for Adobe XD and that is called anima and you can find it at anima app com by the way this is not a sponsored video I found out about it and I was pretty excited because I they're offering to do something that many people have requested here and that is to be able to take your design from Adobe XD by the way they're offering this for figma which is coming soon I and be able to just click a button and make it go from you know mock-up and prototype straight to HTML and CSS all coded for you automatically they offer a free sign up here where you have like access to one project so you guys can try it out if you wish and then there's pricing if you want to unlock unlimited projects and some other stuff here so what we're gonna do I'm gonna show you on how to get up and running with this with a really quick project that demonstrates most of the features and then I'm gonna give you my true opinion at the end we're gonna take a look at the HTML and CSS that is generated so make sure to not skip and also to stay to the very end to see if this thing is worth your time alright so as always of course make sure to subscribe and let's get started before we begin this video sponsored by Dylan oat now as a front-end developer or a designer you know that you need a personal portfolio and if you use a website builder like wicks or Squarespace they lack total customization and they lock you into using their platform but to be a pro you need to use the tools that the pros actually use so level up start building your own projects and your own portfolio on an enterprise level content management system like WordPress there's Drupal now real web development sometimes requires knowledge of spinning up servers managing domain names and setting up an occasional staging environment and there's no better or simpler ways to learn the ins and outs of hosting your website then with Lenovo out hosting the node cloud hosting makes it as easy as possible for you deploy a WordPress or Drupal website in seconds with a freely note one-click app marketplace so click on the very top link here in the YouTube description to get your free node account along with $20 of free hosting and all the tools that you need to build enterprise class websites alright so we're in here here in Adobe XD alright and so I already have the plug-in installed so if I come down here to the plugins section you'll see anama up here at the very top and basically we have this right here selected an existing project I think I'll choose new project for this I'm just going to call this demo select worst workspace um not exactly sure I'm just gonna create anyhow for that and and so here we go what we have here is a mobile version I of basically a prototype this is something I did in one of the previous tutorials about prototyping and it's just a real simple example just to demonstrate anima and its capabilities so we have a navigation or an app bar we have this section a call to action button and then just for cards and that's it so what we can do is we can add smart layers here so a hover effect that means we can take like this button for instance and we can have make it add and hover effect to it now you're probably wondering you know does it actually I take your prototyping like smart animate here and xD And is a cur convert that to code no it doesn't but it gives you this option like a hover effect instead so if we click Edit on the hover effect you can see it has some basic presets defined here like blur and move up and shrink but there's also a CSS transition section which you you can put your own essentially so maybe we'll make this one glue our glow Gro I on yeah on hover so you could change the duration and the easing and all that stuff so I'm just gonna leave that to save you can also add in video gif or Lottie now the one thing strange about this which we're gonna add this in a second I you don't actually you can't actually add like a lot e-file from what I've seen so we'll get to that in a bit though um it handles forms and text inputs and you can actually embed code we're gonna do that as well and you can add links here so if you select like one of your your links up here choose link it'll allow you to you know specify an external URL or an anchor link that'll point somewhere else on the page I and stuff like that so just showing you that and then of course to be responsive we want to add breakpoints but we only have one artboard at this point in time before we get to that part let's just click preview and browser and you can see it's processing the design I'm not sure if I'm yeah I'm actually completely behind it but it says you're are in front of it rather your prototype draft is ready so if you open let me get this over here here it is this is actually it in the browser all right so if we look at this we'll see that it's almost it's pretty much an exact replica pixel for pixel of our mock-up now there is an issue with it cutting off the text here I think that's because of the eye the height possibly of those text containers which will try to fix that let's see if this part works oh it does so if we hover over it it adds that CSS transition based animation these are here they're not links but you know if I chose to make those links back in the anime plug-in they would be linking to wherever I pointed now as you can see it's not fluid and it's not responsive but so let's go ahead and try to fix this issue right here first and foremost let me hit cancel and see you can see you can see it's not happening here in our demo but as you can see if we click on here that's why that's happening that these should be larger like that so what I'll do instead because these are just copies of each other will repeat grid that move these down ungroup the grid and let's preview in the browser one more time select the artboard all right so it's gonna process the design again and we're gonna open it and it should be fixed this time okay good it is I forgot to do the bottom one too oh well no big deal so let's go ahead and see if we can actually make this thing responsive so what we want to do is we'll go ahead and we'll duplicate this right and we'll come out here maybe to like an iPad size or so and we'll take this push this over go ahead and extend this out those weren't properly aligned unfortunately it's get this in the center there we go maybe make this smaller we'll get this stuff out over here and then perhaps now we have enough room to situate these right there so I'm just going to delete these ones and ctrl D oops there we go and then we'll go ahead and situate this up and then here's our that's our next one and then finally we'll do like a desktop version here so we'll make this come out I'm pretty wide it will do the same thing this time let's so I'm left line these two will move them in so we'll go in here we will left line that will take this button right here there we go we'll extend this all the way out once more and we'll put these two by two so all right so we'll take these put them right there all right that's fine for now they're not perfectly situated but I'm you know this is just for a quick demo let's also experiment with a couple the other options that they offer just to show so what we'll do is um let's put this here and then we'll put in um let's see let's demonstrate the embed feature so you can like embed stuff here so if I draw this all the way out we can come over here and choose embed code alright so you can paste a code snippet here for the actual like if you had like an embeddable code like google maps is a good example so i'm gonna paste a Google Maps embed code right here and just hit save now nothing happens it doesn't show you here in you know XD but it will render when we get to that step in the actual browser so let's take off the border now we don't see it at all and let's also put in like a video demonstration so maybe over here there will be a video of some sort so we'll go ahead and get rid of that so in this block there will be a video okay so I've already uploaded an mp4 now when you click Add it shows you enter a video or gift URL alright so you wear all formats include a YouTube Vimeo mp4 or a gif file so it doesn't look like it actually technically includes a real lotty based animation only one that perhaps has been converted into an mp4 file or a gif file alright so that's just something to understand there and for that I have I uploaded an mp4 on my own server so I'm going to copy that I'm gonna paste that in alright so we'll just do autoplay and loop well hit save alright and just to show you that we can actually change up these like hover effects we can edit based on the the different view Art boards will just make this rotate and save alright so now for the responsive part to work what we want to do is select all these and we're going to do breakpoints and there we go so now it shows you select all artboards that you want to connect by breakpoints and click done so these are the artboards that we want to connect by breakpoints and it shows you you know the width parameter of each of those breakpoints and hit done alright so we should be ready to rock now let's go ahead and preview in browser alright it's gonna work it's processing uploading creating draft that quickly that's the major benefit of this of course is the speed at which it can provide something that does indeed work in the browser so as you can see it is responsive we have our artboards here's the mobile here's the tablet based artboard and then here is this version alright so this little mp4 it's not ideal having this player although you could probably prevent this controls you know if you go into the code and tinker with it but yeah that's just something to to realize it now right here we can see that worked of course you would want to change this and get into the HTML and change this to cursor:pointer on there's a lot of adjustments you would probably want to make about this so here's our Google Maps by the way Beverly Hills California nine oh two one oh and so here's the thing it's actually working and functioning in the browser through HTML CSS and I'm sure there's JavaScript they're adding possibly in the background I'm not sure but what we can do is if I click sync to project let me see what that does real quickly we gives us the option to export the code now so if I choose that or instead of me doing that what I can do is actually have let's just open this up just to show you what it actually includes so it's a it's a zip file and we can see we have our iPhone that's the name of the artboard and here it is now let's take look at the HTML and the CSS that's generated and see exactly how it's going about generating this code so make ctrl shift I over here we come out here to elements now it looks like there's not a lot of developments but if I right click and view the page source we could see this is all the HTML that is required to create our pages here um so what's interesting about this is it looks like instead of creating separate HTML files let's look at ours if file again because I want to make sure I'm not missing anything here yeah so what it is done essentially is it looks like wow I'm really trying to figure this out it says design course here let me do a ctrl F on that okay well we find one area in here like this should really be only in the HTML four times right yeah it's in the HTML twelve times and it's doing that one for every single artboard so that's a problem I it's a problem if you're worrying about code efficiency in terms of your HTM HTML because obviously this is one page right because this is meant just to be for like a landing page of an app and what's happening is they're replicating the HTML for each of these three different artboards and of course that's really bloated you know you only want one one HTML per per page or one HTML markup for page and unfortunately the way they're doing this is they're creating HTML for every artboard that's associated for the viewport of one page so that's not quite ideal obviously um another thing if we look at the CSS so we look at the CSS for every any element like let's look at the navbar it's the first one right we're gonna see that right here what I'm going to make this big so you can see it it's a position:absolute so everything every element that you select its position:absolute position:absolute let's check this part it's position:absolute left 229 so what it's doing is and this is probably really the only way to automate the type of code I would imagine would be much more difficult to to create the the CSS rule sets in a manner that they should be automated in terms of automation because what they're doing like I said is they are positioning everything in terms of absolute values that's how they were able to get pixel perfect results now it's the amount of CSS that's in here for just this one page here I is probably very bloated as well so if I go to our CSS here it is almost a hundred kilobytes I didn't I didn't know how big it was before doing this I'm just finding this out now and so let me I'm gonna see what this looks like the actual CSS file itself I'm gonna drag this onto my desktop I'm gonna open with let's see here choose another app I don't know why my CSS is not associated with visual studio code but here it is alright here is the CSS that's generated from anima as you can see there's simply a massive amount of rules I mean it's styled nicely I give them that it would be nice if they give you the option to like minify it and also if I type in absolute you'll see they're doing position:absolute I a hundred and eighty eight times so what they should do is many of these like position:absolute for instance that should be added into its own class like a class called absolute for instance and then just add it on to the HTML elements and that way you don't have to have all this bloated markup here there's probably a lot of the same things that they could do for other things in some of these properties so yeah I definitely you're gonna end up with more bloated code if you use this but of course the trade-off being you don't have to type code here's what I personally think about anima I think that if you fall into a specific category and your project does as well then it completely makes sense to use anima so that category is is if you're building a real simple project a simple website maybe with just a couple pages maybe it's a landing page maybe you're trying to generate emails or capture emails for some sort of product launch or whatever I think this would be completely suitable for that also if for instance you don't have a lot of funds to pay a coder to do the proper HTML CSS markup of this or you you completely don't know how to do front-end development yourself which is completely possible so I do think there's definitely a use case for this but where it wouldn't be suitable is if you're using this or your intention is to use it for a medium to large size project I there's a lot of markup bloat in there especially the CSS file for what would is relatively a small I landing page as we saw it was 97 kilobytes generated in a single CSS file for just one page where if you did it properly it would be I mean just multitude smaller way smaller I would imagine no more than several kilobytes I just for the example that I showed there so I there is a use case for it I but I also think for probably for most serious projects you would want to avoid it simply because of the amount of markup load that is there and how everything is styled through position:absolute alright I think it can totally improved though with the code that it does export so hopefully they'll be able to work on that in a future but yeah I'm actually impressed with it because it does create pixel perfect replicas in HTML and CSS based on your prototypes in Adobe XD and figma coming soon as well so I think they've done a good job but there's still a long way to go and I've personally never seen one of these export from mock-up or PSD I to HTML CSS code generators I've never seen them do it very well inefficiently because that's a very difficult thing for a developer to try to pull off anyhow I think we'll get there someday but apparently it's not there right now but nonetheless they did a good job and so go ahead and support them if you wish this isn't a sponsored video I really think it's a cool I you know it's a cool plugin and they've done pretty well with what it is all right so I will talk to you guys soon make sure to subscribe and see you later good bye [Music]

Channel: DesignCourse

Views: 239,600

Keywords: anima, anima app, anim app review, anima adobe xd, prototype to html, automatic html and css, automatic html css, adobe xd to html, adobe xd to html css, adobe xd to css, figma

Id: VCwzh6qVGdE

Length: 20min 49sec (1249 seconds)

Published: Mon Apr 27 2020