I'd love to see you also analyze the accessibility of the generated code. Most people with no disabilities or challenges when using the internet don't spend a single thought on the accessibility. Please stress the importance of accessibility, and why and how it's not just about the screen readers, but so much more…
So, isn't the problem here the separation of the HTML and CSS from the design when you design? I imagine, that instead you would set it up with named DIVs and actual tags and then use generators (of which there are many on the net, which could just be integrated) to control the design. A generator could for example be the corner generator, one you can find on the net is *CSS Triangle Generator.* When you can work directly on your HTML and CSS, I think it will become more efficient. Anyways, I have found that making the actual code via small examples, by using something like *CodePen* is better, exactly because you can easily edit all part of the code and watch how it looks directly.
Will adding an animal or additional components to this species affect the front end in the future? Will you someday come and wipe out an advanced career?
@@SourceHades Same, but the intended use for the tool isn't to get optimized code ready to be put on a live project, so what it does it does pretty well.
@@codecampbase1525 Webflow is different from this thing. Anima is trying to generate code from design, determining element's position and all that stuff. In weblow, you do all that yourself.
avazbek juraev So the only difference between the workflow in Adobe XD and Webflow is, is that instead of just placing elements where you want them freely in Adobe XD, in Webflow you need to create a div and simply adjust the element with margin/padding. Sure, there's definitely more to learn and to to understand when it comes to Webflow, since you basically do html and css visually, but its in my opinion worth it, since you end up with a full working website once you are finished, clean code that can be exported and used in any environment, easily use protoypes and share them as a full functional website and so much more stuff. When it comes to productivity, possibilities and costs, Webflow is the better choice in my opinion. And it teaches you good HTML/CSS patterns and concepts as well. Another plus is their great youtube channel and all the tutorials they share. Pricing is also more then fair, almost free if you compare it to Adobes official prices.
I root for them. They pivoted to converting Designs (in Sketch, Figma, XD) to React components. And that's just what I need. That's a difficult task and I hope they can pull it off.
14:12 - It's actually 12 times in the HTML instead of 4 times because the containers are not recognized as one and the same container in each and every view. Container 1 in mobile view is not the same as contianer 1 in desktop view. The creation of the conainers in XD needed to done differently to achieve only 4 Container entries in the HTML.
Position: absolute; = for moving around the element on which the absolute positioning is applied within a container very precisely. Position: relative; is for moving around an element within a container as well, but you can't position is very precisely. You can for example position items on the left, center or right very easily but somewhere between the left and center is a bit harder. For example if you had a red square (10px) and in that square you have a blue square (5px). By default the position is: position:static; the blue square will be in the top left of the red square If you apply position: relative; on the blue square it will not move. If you apply position absolute and add left:20px; it will move 20 pixels from the top left corner to the left. Warning: this will not work if you don't also apply position: relative; to the parent. In this case that's the red square.
No bro. You won't learn it properly in that app. It's a total waste of time. Absolute positioning is a nightmare for developers. You should never ever use it in the real world except for presentation purposes. Better learn hierarchal structuring of html elements with frameworks like bootstrap and foundation. That will be cleaner and DRY'er.
Thank you for sharing the information about this new tool. Maybe it's easy for a designer who couldn't change the design to the HTML by themselves. But it's really horrible to modify HTML after once finished it. In fact, I just don't want to see both HTML code and CSS code again which birthed from this tool... Anyway, it's still progress and hopes the tool can be better in nearly future.
Thanks for sharing, it is always to know there are tools for this or that. I agree with you, for serious projects this is not the best tool, I think that for SEO purposes, you may get penalized for text duplication. Greetings from México.
I don't understand the rage about this, the website clearly says it's for prototyping a website - basically to see how it would look and interact in a browser. Nowhere they say the exported result should be used in production.
It's problematic when the company used the tool for their own website: animaapp.com/ They think it's good enough for production, and it clearly isn't. They also publicize they use it for their website, which encourages others to do the same.
So I take a prototype, convert it into some very janky-looking HTML+CSS and package it back as a prototype? It's like driving to a restaurant, ordering a take-out only and then paying for delivery lmao. Also, AdobeXD already has a free-extension that does this
That HTML/ CSS...Oh! My! God! And for such a simple page! Does it really take that much (for the plug-in developer) to create a few good rules regarding objects, classes, external file generation...etc. I mean seriously!
It would be interesting to see handwritten code side-by-side to compare length and tidiness. Seems like this would be a pain to edit/maintain especially with Js.
This plugin is freaking awesome, it pushes developers to use adobexd/figma to develop user interface !!! As for massive html, css codes, that is a problem if page loading speed is what you care; but for small project this is perfectly ok. I am gonna start using adobexd seriously, Thank you Mr. Gary Simon for introducing this amazing tool to us !!!
@@codecampbase1525 I've just learned webflow and built a simple website within one hour. What impress me most is that we can export clean code just like what frontend developers write; no repetivie code like this adobexd plugin produces which is the best part. I think I will go with webflow, and I don't even bothter to learn and use tailwindcss anymore. Thank you for recommeding this tool, from now on I can focus on design and save time coding the design, you are the man !!!
Stephen Lai Hey awesome to hear! Webflow been out there for a while, so im always surprised when somebody never heard of it before. On my channel, i made a tutorial where i clone the instagram page with webflow, you might wanna check it out. Also, webflow has tons of tutorials on their channel here on youtube, you can even do animations with it. As for your tailwindcss, don't skip it. As amazing Webflow is, you shouldn't rely just on it. The more you know the better. So always do create designs in html and css as well and learn css frameworks like tailwind css. Also, a great way to learn html and css fast is to google your favourite website together with codepen and then recreate it with the source code. If you search for "instagram clone codepen" you will find a lot of examples with the html and css code. Try to learn from it and recreate it step by step. Happy coding / designing! You can always reach out to me if you have further questions!
Looks like a good starting point. They can build it up, fix those problems one by one. I really hope they do so because why we still build a design twice to make it working on web?
Great video! That's crazy that that one screen's CSS file was that big. I have a full three-sided marketplace app that has I don't know how many screens will full responsiveness and it's 130kb in all. To see this one screen with no real content filled out be 97kb is ... unacceptable in my opinion. One thing I was hoping you'd mention is that if you were to take this and launch a company with it, it's gonna be hell to pass it on to a developer later cuz they'll have to deal with a lot of non-DRY code
I guess it can work if you're really just prototyping designs to demo for a client. I think something like this should be build into XD in the future. I work on tons of UI design projects and always have to hide faux buttons that switch between art boards to show mobile vs. desktop. XD does have the 'share for development' feature which I use quite a bit with my designs when I have to code them. It just makes it helpful to copy code snippets. Nice video btw. Nice to know whats out there in terms of XD plugins
Great vid. That intro bass line.. wow :) :) I'm a student in graphic design. We have this part of the course where we learn xd to some extend but the teachers who are more knowledgeable in the traditional printing part of the graphic design work don't know how to port XD designs to the web. A lot of click bait arounds on the web on how to port an xd prototype to a fully functional site but no real answers found yet. Can you help me. How would someone go about putting an XD created prototype to a functional web site. Thank you
If you really want to learn all about web development, hosting and being able to set up your own enterprise system, why not build your own Raspberry Pi web server and host your very own webs server instead of using online platforms which you have to pay for (usually on a recurring basis). Its a great way to learn the in's and out's of what's required to build one as well as the various platforms and applications you need to help you develop professional websites. Not only that but it will save you a TON of money whilst learning at the same time. Especially when most of the applications are now free to use. You also get to learn about how to secure your system which is something I find extremely valuable. Obviously this is only for those who are willing and want to spend the time to learn.
Hi. I'm using this.. Adobe XD to Anima but I have a problem with the button element. In Adobe XD the button is fine but when I preview it in the anima app, all the text inside the button is misaligned. I tried everything to tweak the setting and still won't solve it. Please help.
Screen designs should stay visual only and should always be implemented by hand. There is so much context - especially in responsive designs, that just simply cannot be concluded out of a mockup.
14:30 I may not know anything about HTML yet, but it doesn't look like the duplicate/separate code is a problem with Anima, so much as it's a missing aspect of XD. Because while you used some of the dynamic resizing features to make artboard copies for different screen sizes, you did nothing that would actually tell the program, "this element is also this element over here, and this one over here." You just kept copy/pasting and shifting the position of 12 completely unrelated duplicates of the same box button. If XD has no idea how all 12 of those are related to each other, Anima shouldn't either. Essentially (and this is a flaw in XD from what I can tell), all you've done is tell the HTML code to swap between 3 completely unrelated, self-contained websites, which look the same, but fit different screen sizes. Dynamic adjustment of the exact same elements I'd expect to be tricky to code for because it would involve a lot of designations and if this/then that's.
nah, it would only take basically coding the original and then adding a couple media quieries. so the code and css would be probably a 4th of what this outputs.
Hi all, Avishay from Anima here 👋 Thanks everyone for all the feedback! We're improving the code all the time and your feedback is super valuable. You can already get flexbox-based layout. Here's all about it: medium.com/sketch-app-sources/introducing-auto-flexbox-aaa4fc553cc0 If you have more thoughts on Anima, we're all ear :) fb.com/groups/animaapp Thank you Gary for taking the time to review Anima ❤️
@DesignCourse -- @14:23 might this be because you duplicated rather than repositioned those div elements? - It's just a thought, I haven't even tried this app yet. I think I'll give it a bash…
I have a question. Do I have to pay Anima all the time while the site exists? Or is it enough if I pay it one month, then copy the code and then delete my plan?
There's a lot of cleanup that needs to be done after...first test for me also gave huge file and 3x the necessary code at least but to export monthly cost is $40... difficult to justify
its like anything new. it takes time to improve. if done correctly it could do the bulk of work for you. i just started messing with html and css. its it fear of automation.
It also doesn't make sense for prototypes I think. Doesn't XD have prototype capabilities? And you can get a public URL of that prototype so you can use it to show how it could look live. I don't think having a live HTML/CSS site would give you benefits over the usual XD prototype, if we are talking just about having it for presentation.
I knew the answer before even watching. Automatic design to code will never work. Some designers switched to using XD or Sketch because they though exporting css/html was something that was helpful to me (developer) ... Nothing wrong with xd or sketch or whatever design tool ... just that the code they generate is 100% useless.
I agree I would NOT use this even to showcase something because you can always showcase the design . This is a cool ideea but we are not at that point where we can replace dev's, there is no much that a dev brings to a project .
I'm trying to make a cross platform app using Adobe XD for prototyping. QUESTION: If I want both an Android and iOS version of the app, do I need to create separate Adobe XD files using two separate sets of UI elements (Android and iOS respectively)? Or can I just use iOS UI elements and have them work on Android as well (and vice versa)?
Had a much greater experience when working with Anima in Sketch, oh well.. Guess we have to wait till the XD team finally gets to meet the DW team before it turns into Fireworks.
exactly, i was about to put my money in. but glad i research youtube for review. i was traumatic back then with dreamweaver generating mark ups and styling. this is a programmer nightmare to manage. especially component/container based use and reuse.
Hi guys, I'm a student who's familiar with Adobe XD and would like to use Anima App to make a live website for our University Rocketry Blog. I don't know anything about front end development so I'm considering using Anima. Our team is thinking of hosting the site on GitLab for free. I was wondering if I design the entire blog website in Adobe XD and then export the HTML/CSS using Anima, how will I update my content on the Blog Website ? I mean in WordPress you get that feature but how should I incorporate this if I use Anima ? Any suggestions please.
I am curious if because your mockup wasn't really responsive, and you deleted and created new versions of the cards, if that is the reason the code was so off.
What is best then to get the HTML and CSS from the prototypes? Xd uses a plug in. Any other similar wireframing and prototyping tool provide better HTML and CSS codes? Without that do not see much use of these tools for projects. Developers ask for HTML and CSS codes
If you would just create this in the desktop browser size, and export for the html/css would it reflow the content or do you need to create the varying artboards? That may mitigate the 12 elements being created for the media size.
I appreciate your tutos and this one particularly as you give pros and cons. Could you do the same for these to sketch plugins : puzzle publisher and Flow Exporter they both export Artboards to HTML. What is your views on that topics.
NOTE: If you're looking for the #7Days7Designs final challenge reviews. I uploaded that here: ruclips.net/video/hq4IX8h97Ec/видео.html
I'd love to see you also analyze the accessibility of the generated code. Most people with no disabilities or challenges when using the internet don't spend a single thought on the accessibility. Please stress the importance of accessibility, and why and how it's not just about the screen readers, but so much more…
Why don’t you use fireblade plugin ?
So, isn't the problem here the separation of the HTML and CSS from the design when you design? I imagine, that instead you would set it up with named DIVs and actual tags and then use generators (of which there are many on the net, which could just be integrated) to control the design. A generator could for example be the corner generator, one you can find on the net is *CSS Triangle Generator.* When you can work directly on your HTML and CSS, I think it will become more efficient.
Anyways, I have found that making the actual code via small examples, by using something like *CodePen* is better, exactly because you can easily edit all part of the code and watch how it looks directly.
Hi Gary, do you prefer Figma or XD? And if both, any quick insight where and when we should use figma or xd? Thank u so much! P.S your fan.
Will adding an animal or additional components to this species affect the front end in the future? Will you someday come and wipe out an advanced career?
It's good to know my dev job is safe for now 😂
So, It takes in a xd project and shits out HTML and CSS. Should have called it 'Enema'.
😂😂
That's what I heard every time he said Anima
on top of that you have to pay for it monthly to do that. The plan to try it out does not have that exact functionality which sucks a little.
Gary, this thumbnail was hilarious!
i only clicked because of it 😁
Am I the only one that thinks this is pretty amazing, down the road it's probably going to be tons better.
Agree
Agreed
Agree
@@SourceHades Same, but the intended use for the tool isn't to get optimized code ready to be put on a live project, so what it does it does pretty well.
It is a fantastic starting point for designers who is new to code...thumbs up!!
So no, guys. They didn't pull it off
They did, its called Webflow, check it out.
@@codecampbase1525 Webflow is different from this thing. Anima is trying to generate code from design, determining element's position and all that stuff. In weblow, you do all that yourself.
avazbek juraev So the only difference between the workflow in Adobe XD and Webflow is, is that instead of just placing elements where you want them freely in Adobe XD, in Webflow you need to create a div and simply adjust the element with margin/padding. Sure, there's definitely more to learn and to to understand when it comes to Webflow, since you basically do html and css visually, but its in my opinion worth it, since you end up with a full working website once you are finished, clean code that can be exported and used in any environment, easily use protoypes and share them as a full functional website and so much more stuff.
When it comes to productivity, possibilities and costs, Webflow is the better choice in my opinion. And it teaches you good HTML/CSS patterns and concepts as well. Another plus is their great youtube channel and all the tutorials they share. Pricing is also more then fair, almost free if you compare it to Adobes official prices.
@@codecampbase1525 You're getting paid by Webflow to say this stuff aren't you?
TinyCats has to be, he’s describing coding, there’s no real gain
A fantastic starting point for designers who are new to code
I root for them. They pivoted to converting Designs (in Sketch, Figma, XD) to React components. And that's just what I need. That's a difficult task and I hope they can pull it off.
Fun fact, Anima did not use their own plugin to build out their website.
😂
haha.
i think you are wrong, they have a lot of absolute tag in their site
Wrong.. they actually did use their plugin to build their website.. you can see it easily in the view source..
Could you drop this HTML/CSS into Elementor’s builder (WordPress) for example?
oh sh***t my Microsoft Frontpage Nighmare is alive :-)
Luigi S. 😂
the nostalgia is real in this one
hahahahah
Isn't this still in its infancy, I think after some years it will be near perfect. I cant wait.
14:12 - It's actually 12 times in the HTML instead of 4 times because the containers are not recognized as one and the same container in each and every view. Container 1 in mobile view is not the same as contianer 1 in desktop view. The creation of the conainers in XD needed to done differently to achieve only 4 Container entries in the HTML.
I'll give it a try. It seems perfect for a designer launch the own website.
i watched your video because im also a designer and a big metallica fan 😂 love your shirt 😎
someone says this in all his videos
I’ll probably use it just to see how they are positioning everything so I can learn the css properties 😂
Hum that’s a good way of learning too
AdobeXD has a built-in CSS export too lol
I thought the same thing hahah right! But anima is a beggining of a new plug-in..i like it for small projects
Position: absolute; = for moving around the element on which the absolute positioning is applied within a container very precisely.
Position: relative; is for moving around an element within a container as well, but you can't position is very precisely. You can for example position items on the left, center or right very easily but somewhere between the left and center is a bit harder.
For example if you had a red square (10px) and in that square you have a blue square (5px).
By default the position is: position:static; the blue square will be in the top left of the red square
If you apply position: relative; on the blue square it will not move. If you apply position absolute and add left:20px; it will move 20 pixels from the top left corner to the left. Warning: this will not work if you don't also apply position: relative; to the parent. In this case that's the red square.
No bro. You won't learn it properly in that app. It's a total waste of time. Absolute positioning is a nightmare for developers. You should never ever use it in the real world except for presentation purposes. Better learn hierarchal structuring of html elements with frameworks like bootstrap and foundation. That will be cleaner and DRY'er.
Not semantic at all. This is "div soup". Just like when Adobe Muse tried this.
Well fuckin putted. A fucked up div soup. PS: The rage is due to a first hand experience in this type of plugin on a real money project.
I was just thinking that, like what’s the difference? Clunky code that makes it impossible for anyone to edit.
Thank you for sharing the information about this new tool. Maybe it's easy for a designer who couldn't change the design to the HTML by themselves. But it's really horrible to modify HTML after once finished it. In fact, I just don't want to see both HTML code and CSS code again which birthed from this tool... Anyway, it's still progress and hopes the tool can be better in nearly future.
A guitar player? Nice model of the prestige Ibasnez! Nice taste!
Thanks for sharing, it is always to know there are tools for this or that. I agree with you, for serious projects this is not the best tool, I think that for SEO purposes, you may get penalized for text duplication. Greetings from México.
Nice video Gary!👍
I think, it is good for designers who want their website and can't code.😉
I don't understand the rage about this, the website clearly says it's for prototyping a website - basically to see how it would look and interact in a browser.
Nowhere they say the exported result should be used in production.
Alkshendra Maurya a decades long problem with a lot of expectations anytime some new web design tool comes out
Indeed. Prototype, not production.
It's problematic when the company used the tool for their own website: animaapp.com/
They think it's good enough for production, and it clearly isn't. They also publicize they use it for their website, which encourages others to do the same.
So I take a prototype, convert it into some very janky-looking HTML+CSS and package it back as a prototype?
It's like driving to a restaurant, ordering a take-out only and then paying for delivery lmao.
Also, AdobeXD already has a free-extension that does this
@@RexGalilae if you have a prototype then it’s redundant to use anima. Use it to convert mock-ups into prototypes (for presentations)
That HTML/ CSS...Oh! My! God! And for such a simple page! Does it really take that much (for the plug-in developer) to create a few good rules regarding objects, classes, external file generation...etc. I mean seriously!
It would be interesting to see handwritten code side-by-side to compare length and tidiness. Seems like this would be a pain to edit/maintain especially with Js.
This plugin is freaking awesome, it pushes developers to use adobexd/figma to develop user interface !!! As for massive html, css codes, that is a problem if page loading speed is what you care; but for small project this is perfectly ok. I am gonna start using adobexd seriously, Thank you Mr. Gary Simon for introducing this amazing tool to us !!!
Check out Webflow, its exactly what you are looking for and all code is super clean and can be exported.
@@codecampbase1525 I've just learned webflow and built a simple website within one hour. What impress me most is that we can export clean code just like what frontend developers write; no repetivie code like this adobexd plugin produces which is the best part. I think I will go with webflow, and I don't even bothter to learn and use tailwindcss anymore. Thank you for recommeding this tool, from now on I can focus on design and save time coding the design, you are the man !!!
Stephen Lai Hey awesome to hear! Webflow been out there for a while, so im always surprised when somebody never heard of it before. On my channel, i made a tutorial where i clone the instagram page with webflow, you might wanna check it out. Also, webflow has tons of tutorials on their channel here on youtube, you can even do animations with it.
As for your tailwindcss, don't skip it. As amazing Webflow is, you shouldn't rely just on it. The more you know the better. So always do create designs in html and css as well and learn css frameworks like tailwind css.
Also, a great way to learn html and css fast is to google your favourite website together with codepen and then recreate it with the source code. If you search for "instagram clone codepen" you will find a lot of examples with the html and css code. Try to learn from it and recreate it step by step.
Happy coding / designing! You can always reach out to me if you have further questions!
I think its good for newsletters
Looks like a good starting point. They can build it up, fix those problems one by one. I really hope they do so because why we still build a design twice to make it working on web?
Great video! That's crazy that that one screen's CSS file was that big. I have a full three-sided marketplace app that has I don't know how many screens will full responsiveness and it's 130kb in all. To see this one screen with no real content filled out be 97kb is ... unacceptable in my opinion. One thing I was hoping you'd mention is that if you were to take this and launch a company with it, it's gonna be hell to pass it on to a developer later cuz they'll have to deal with a lot of non-DRY code
I guess it can work if you're really just prototyping designs to demo for a client. I think something like this should be build into XD in the future. I work on tons of UI design projects and always have to hide faux buttons that switch between art boards to show mobile vs. desktop. XD does have the 'share for development' feature which I use quite a bit with my designs when I have to code them. It just makes it helpful to copy code snippets. Nice video btw. Nice to know whats out there in terms of XD plugins
Nice. Not loosing my job anytime soon!
Great vid. That intro bass line.. wow :) :) I'm a student in graphic design. We have this part of the course where we learn xd to some extend but the teachers who are more knowledgeable in the traditional printing part of the graphic design work don't know how to port XD designs to the web. A lot of click bait arounds on the web on how to port an xd prototype to a fully functional site but no real answers found yet. Can you help me. How would someone go about putting an XD created prototype to a functional web site. Thank you
If you really want to learn all about web development, hosting and being able to set up your own enterprise system, why not build your own Raspberry Pi web server and host your very own webs server instead of using online platforms which you have to pay for (usually on a recurring basis). Its a great way to learn the in's and out's of what's required to build one as well as the various platforms and applications you need to help you develop professional websites. Not only that but it will save you a TON of money whilst learning at the same time. Especially when most of the applications are now free to use. You also get to learn about how to secure your system which is something I find extremely valuable. Obviously this is only for those who are willing and want to spend the time to learn.
like your Metalica shirt
Your hilarious thumbnail image forced me to watch this video. 😁
Off topic, but JAM Stack taking over 2020 !
Hi. I'm using this.. Adobe XD to Anima but I have a problem with the button element. In Adobe XD the button is fine but when I preview it in the anima app, all the text inside the button is misaligned. I tried everything to tweak the setting and still won't solve it. Please help.
I belive Zepelin does this. Also there should be others for XD. It is very awesome
It normally to reject change its just hard for traditional coders to accept the new wave of anyone ability to create websites
Screen designs should stay visual only and should always be implemented by hand. There is so much context - especially in responsive designs, that just simply cannot be concluded out of a mockup.
Can you make a video about it again after almost 2 years to see the work is it great or not ??!
What’s the difference between small size file and a big size file? Does it influence to anything? How? Thank you for explanation.
I can see guitars at the back, would love if you played one in your videos :)
14:30 I may not know anything about HTML yet, but it doesn't look like the duplicate/separate code is a problem with Anima, so much as it's a missing aspect of XD. Because while you used some of the dynamic resizing features to make artboard copies for different screen sizes, you did nothing that would actually tell the program, "this element is also this element over here, and this one over here." You just kept copy/pasting and shifting the position of 12 completely unrelated duplicates of the same box button. If XD has no idea how all 12 of those are related to each other, Anima shouldn't either. Essentially (and this is a flaw in XD from what I can tell), all you've done is tell the HTML code to swap between 3 completely unrelated, self-contained websites, which look the same, but fit different screen sizes. Dynamic adjustment of the exact same elements I'd expect to be tricky to code for because it would involve a lot of designations and if this/then that's.
nah, it would only take basically coding the original and then adding a couple media quieries. so the code and css would be probably a 4th of what this outputs.
Hi all, Avishay from Anima here 👋
Thanks everyone for all the feedback!
We're improving the code all the time and your feedback is super valuable.
You can already get flexbox-based layout. Here's all about it:
medium.com/sketch-app-sources/introducing-auto-flexbox-aaa4fc553cc0
If you have more thoughts on Anima, we're all ear :)
fb.com/groups/animaapp
Thank you Gary for taking the time to review Anima ❤️
Hi Avishay, amazing work. Did you make the code more efficient and less bloated using the ways recommend in the video?
Try NicePage instead! its so good and used specific to html/css/js properties
I almost didnt see it but, love the tshirt
@DesignCourse -- @14:23 might this be because you duplicated rather than repositioned those div elements? - It's just a thought, I haven't even tried this app yet. I think I'll give it a bash…
Anyone else who is watching this video not for tutorials, but for love for coding?
thank you so much for this great content. Incredibly helpful.
Would be interested in what you think about Quest AI
That’s a nice shirt you got there
Another great video from gary
Excellent content, love the t-shirt :)
WOW! This will be very helpful for making design mockups.
I have a question. Do I have to pay Anima all the time while the site exists? Or is it enough if I pay it one month, then copy the code and then delete my plan?
Nice shirt dude lml !
when ı create a website usıng anıma,should ı pay every month to contınue ?
Love your shirt.
I think there is a freeware doing the same, also it's been around much longer. I think it's called Mobirise
There's a lot of cleanup that needs to be done after...first test for me also gave huge file and 3x the necessary code at least but to export monthly cost is $40... difficult to justify
its like anything new. it takes time to improve. if done correctly it could do the bulk of work for you. i just started messing with html and css. its it fear of automation.
Hi. Can you a similar review of WebFlow? How does there exported code stack up?
Subcribed! Because of METALLICA🤟!
That's awful man, ok to show a live prototype for a presentation, but is almost an insult to use in a real project.
True, Every element is absolute position, reminded me very old days of Photoshop - Slice to HTML
It also doesn't make sense for prototypes I think. Doesn't XD have prototype capabilities? And you can get a public URL of that prototype so you can use it to show how it could look live. I don't think having a live HTML/CSS site would give you benefits over the usual XD prototype, if we are talking just about having it for presentation.
I knew the answer before even watching. Automatic design to code will never work. Some designers switched to using XD or Sketch because they though exporting css/html was something that was helpful to me (developer) ... Nothing wrong with xd or sketch or whatever design tool ... just that the code they generate is 100% useless.
I agree I would NOT use this even to showcase something because you can always showcase the design . This is a cool ideea but we are not at that point where we can replace dev's, there is no much that a dev brings to a project .
@@AdrianCBlack it wont ever be perfect but i think it could come damn close in the future
I'm trying to make a cross platform app using Adobe XD for prototyping. QUESTION: If I want both an Android and iOS version of the app, do I need to create separate Adobe XD files using two separate sets of UI elements (Android and iOS respectively)? Or can I just use iOS UI elements and have them work on Android as well (and vice versa)?
Do you know of any automated process to convert Adobe XD to Rails?
Had a much greater experience when working with Anima in Sketch, oh well.. Guess we have to wait till the XD team finally gets to meet the DW team before it turns into Fireworks.
epirkanen289@gmail.com
Could you do a review for Anima 4?
Dang that t shirt is sick. ♥️😍
ANIMA... It sounded like ENEMA 😂 🤣😂 🤣😂 🤣😂 🤣
I immediately have deleted Anima after you said it is duplicating code blocks. That is nonsense and thank you for that highlight.
exactly, i was about to put my money in. but glad i research youtube for review. i was traumatic back then with dreamweaver generating mark ups and styling. this is a programmer nightmare to manage. especially component/container based use and reuse.
Hi guys,
I'm a student who's familiar with Adobe XD and would like to use Anima App to make a live website for our University Rocketry Blog. I don't know anything about front end development so I'm considering using Anima. Our team is thinking of hosting the site on GitLab for free. I was wondering if I design the entire blog website in Adobe XD and then export the HTML/CSS using Anima, how will I update my content on the Blog Website ? I mean in WordPress you get that feature but how should I incorporate this if I use Anima ? Any suggestions please.
Good T-Shirt man :D
Nice Shirt 🤘
feels like adobe golife from past days.. there was also everything position absolute ;)
can you provide any info, if are there real alternatives which do the markup the right way or a lot better?
Liked, as soon as I see the Metallica shirt.
Those this actually work? or do we still have to waste time?
That's cool and all but -- what about UXpin?? 🤔
Let's know if it becomes possible in figma
I am curious if because your mockup wasn't really responsive, and you deleted and created new versions of the cards, if that is the reason the code was so off.
Also, what if the cards had unique names? Or you used symbols?
What is best then to get the HTML and CSS from the prototypes? Xd uses a plug in. Any other similar wireframing and prototyping tool provide better HTML and CSS codes? Without that do not see much use of these tools for projects. Developers ask for HTML and CSS codes
If you would just create this in the desktop browser size, and export for the html/css would it reflow the content or do you need to create the varying artboards? That may mitigate the 12 elements being created for the media size.
do u play bass too?
What happened for your t-shirt? And Metallica???
I appreciate your tutos and this one particularly as you give pros and cons. Could you do the same for these to sketch plugins : puzzle publisher and Flow Exporter they both export Artboards to HTML.
What is your views on that topics.
Love your videos! Could you please do more on how to design data heavy pages?
I need this for Affinity Publisher
The brief ..is using it for showing some effects and responsive but no need to export html.css because its dirty code !
Seeing that HTML and CSS made me feel unwell.
thanks ^^for the video it helps me
Thanks, still prefer my own code. Anyway i think its a nice trick for small projects
Have u used bootstrap studio?
hey!!
what is the best way to build a prototype and bring it into production without having knowledge in html or css.
Hover effects on mobile apps?
Is there a Website Design/Coding course online that you would recommend?
Awesome video!
I think you get a better result with Bootstrap Studio
it has potential. they "just" need to clean up the generated code
12:21 so are you sure or are you not sure?
Great video man, nice
when they say it's not sponsored, it's actually sponsored