Likey? Subscribe! - My answer for today's question: Honestly, I don't use any plugins for CSS animations. I tried keyframes.app once and covered it, but I never found myself using it again much. There are a few tools online that I use (such as the one I covered today) just for some quick animation ideas. You?
Hi, would you please make a super simple horizontal menu (not multi level) with logo (brand) that can easily be customized (move the brand left, middle or right) and adaptable to any design and also responsive (slide out maybe) WITHOUT using bootstrap. May be use css grid. There are many online, but nothing so simple like your design ideas. I love your design ideas and would really like to see your approach to this. If you already have done this, please share the link. Thanks and You are awesome!
Hi I am not a developer, or know any html or css, I have good grip on ui ux design in web, If i have designed my template in XD, can I make it functional by exporting it along with its HTML & CSS ???
You're exactly the kind of web developer I am working to become like: full-stack web developer and designer. Thank you for the awesome videos. You have become a mentor for me.
I came to this video from Recommendations. Thanks for your efforts, I want to point out to an important thing that you missed. You used an to act as a toggle for the menu, it's better and more accessible to use in that case, since the is not focusable element and a lot of beginners will do their work based on that.
Gary you have helped many people feel young again with your spirit and energy to help teach this stuff. Keep up the great work. I have been a developer for nearly 30 years and you allow me to keep my skills sharp.
You are legit the best design instructor I've followed!! Also love the humor! I don't usually use plugins for CSS animations... unless someone references one to me then I usually only use it once or twice
First off, this is a good tutorial and the result looks very nice. That said, whenever you find yourself adding a delay to a design so it takes longer to display the information the user asked for, stop right there. Take a step back and rethink your life choices.
@@taigaaisaka3663 Pretty self-explanatory... The goal of web design should be usability. If the user is hindered by design choices, and those hindrances are enough to make the user leave your site/app, you've failed as a designer. Adding a delay to the users' experience almost never improves that usability and therefore should be avoided.
No Skip, just concentrate, totally, Inspired me so much ......Love 💙💙💙💙 .....From India 💙💙💙This is the video, I really want for, which shows me how Adobe XD works and it'll help me to do my career right, love from India
To anyone who wants an animation when closing, here are the steps: 1. Just duplicate the "overlay" artboard 2. Reposition it somewhere 3. Delete the trigger from the new artboard to "overlay all" (The trigger will be duplicated along with the artboard, so you have to delete it) 4. Create a "tap" trigger from the close button in "overlay all" to the new artboard 5. Change "Ease In-Out" to "Ease Out", keep the rest of the settings 6. Create a "time" trigger from the new artboard to "home" 7. Change "Ease In-Out" to "Ease Out", keep the rest of the settings
love how short & sweet and to the point you are, don't have to skip through like other tutorials, plus your tech-savvy, great videos, really appreciate them!
Gary, this is a great presentation of what a design to code workflow should be. Thank you for making it! I got to practice my css animations and emmet commands also while following the video. It's a great time to be a developer, considering people like you exist to instruct us with free, simple tools like Adobe XD and VS Code.
Even though I am a developer, I have never done CSS animations. I didn't even know there were tools out there to help me do animation! Now I will be looking for tools!
Thank you for the video! You nicely combined how to use HTML, CSS, and JS in one place. And please keep talking. It really helps newbies to understand what you are doing.
thank you for your detailed video, and We need more Tuts like this from XD prototypes to HTML/CSS , it's really confusing for people from a Dev. background .
For those that hate this video at first, like i did, and just want to get out of it what you'll need, don't be lazy and fast about this. Follow along, type exactly what he types in to your own IDE word for word, but add notes in comments (using */ to open comment and */ to close) explaining what you've come to understand the line means. This will allow you to more intentionally and comprehensively pick up on the meaning behind it all. THIS is the most efficient way to consume the video. Don't be overwhelmed. Do it step by step, quit rushing around. Slow it down.
Hello Gary, hello everybody first of all I wanna thank you for this amazing lesson you gave to us. I'm new to Adobe XD. I'm a front end developer. I have a few questions to ask if I may: - what's the purpose on sketching the interface and then redoing that again rewriting HTML? I mean, what's the reason of doing twice the same job? - I really like the design of the application, but, why one should first sketch the app and then write again the HTML/CSS for the same thing he or she did right before? - Can't you just use the Web export plugin ? I thank you in advance. I apologize if I'm obvious, but I'm new to Adobe XD, and it's an amazing tool for UX/UI and I want to make clear of everything.
I know you asked DesignCourse. But I would just quickly tell the reason I was told by my instructors at education. You want to do a mockup of your website/app for a few reasons. First it's a good way to visualize your ideas before spending time on the coding. It may seem like you spend a lot of time first doing a mockup and then coding. However in larger scale projects it could cost you many more hours if/when you realize that it doesn't fit together. That's why doing a mockup is a fantastic idea. Another thing is, if you are doing a job for a company or someone else then you can present to them the mockup, so if they didn't like something about it you can change it fast. That way you are minimizing the risk of scrapping everything because the client didn't like it. Or at least you didn't waste the time coding everything. Sometimes the clients may change their mind about certain things so it's always a good idea to present them the work you have done. It's much easier with sketches, and less time consuming. Be mindful your mockups don't have to take weeks to make, they are like advanced wireframes (wireframes with a coating). Making good mockups does take some practice as well. Essentialy you can save lots of time, by spending time preparing in the beginning.
@@fleexie u are right in what u saying .. but what I'm understand from the questions is that it could be more simple if u just export the whole prototype as a html/css documents and img files to a map. if there isn't an issue when doing that. I'm trying doing it but all links u do in adobe xd prototype dose not apply in the html/css documents. so the question now is what needs to do to fix the links problems ... or what I'm doing wrong when I'm exporting the web page
@@aztrodj82 Oh no. You do not use XD to make the actual sites. Only prototypes/mockups. Nothing more. After you made the prototype you are doing the coding, in another software. Since you already have the design and such it's actually pretty easy to code it afterwards. I know it would be nice if you could just get the website out from the XD project but it's a software for prototyping not making actual code for sites.
@@fleexie Wow Fleexie, amazing. Thanks a lot for this! It's really clearifing. Nobody taught me this simple concepts at the university. Yeah, I really agree that doing sketching and prototyping will save you money even in the client/company scenario you described. That's a really great and valuable info.
Great video. Informative. As a software engineer/tech lead, my take is that I unfortunately would keep going straight to code and not learn Adobe XD given it's nothing more than a way for non-coders to express ideas :( :( Really looking for something that can boost my design abilities. I'm neither great at CSS nor SVG nor anything of the likes..
i was trying to rebuild this as practice but i faced a problem i either can make the side page come and go without a delay between the display block and display none or make the transition works on only one side anyhelp ?
I've made mine, but it gets weird the black overlay won't animate from right to left, the border above the h1 just sticks there constantly but at least the list items: home about us, etc behaves as it should, bouncing up like yours !!! ....mama mia where did I go wrong !? I did everything as you said !!
small cry for help. When my transformation happens, the elements of my home-page are still visible until the transformation is finished. I wrote the code along with this video. For you it doesn't happen. What could be the problem? Couldn't find any solution when it comes to the transformation, the animation or the colors. Maybe you have an idea? Thanks in advance
Hi I am not a developer, or know any html or css, I have good grip on ui ux design in web, If i have designed my template in XD, can I make it functional by exporting it along with its HTML & CSS ???
There's an extension named "Web Export" and it can export html+css for you. Either in the same file or in different ones. but there's some problem with it the code can be messed up if you made slight mistake while naming objects
The way you implemented list item animation I dont think its the best way of doing it,”. If I add another item, I have to add css for that item to . Nice tutorial.
at 11:58, the overlay you mean is it the option adobe xd provides for overlaying other artboards on top of others with a little animation or is it something else? Thanks for the great video
Hey there, I'm trying to follow along in Adobe XD 2020, and the animation options seem different. I don't seem to have an option to use Time as the trigger for the menu animation. Is this something that they have removed or changed in 2020? Or am I perhaps overlooking something?
everything melts down in dreamweaver after applying the '&::before' statement in the scss. Also, floating the menu button doesn't really work. I do understand the process better, from XD to html. So there's that.
Likey? Subscribe! - My answer for today's question: Honestly, I don't use any plugins for CSS animations. I tried keyframes.app once and covered it, but I never found myself using it again much. There are a few tools online that I use (such as the one I covered today) just for some quick animation ideas. You?
Hi, would you please make a super simple horizontal menu (not multi level) with logo (brand) that can easily be customized (move the brand left, middle or right) and adaptable to any design and also responsive (slide out maybe) WITHOUT using bootstrap. May be use css grid. There are many online, but nothing so simple like your design ideas. I love your design ideas and would really like to see your approach to this. If you already have done this, please share the link. Thanks and You are awesome!
I use animate.css a lot
Hi I am not a developer, or know any html or css, I have good grip on ui ux design in web, If i have designed my template in XD, can I make it functional by exporting it along with its HTML & CSS ???
@@romanperera ⁰üüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüó999999999999⁹99999999999999999999⁹9⁹9999999⁹99999999999999999⁹999⁹999999999999999⁹⁹9⁹9999⁹999⁹99999999⁹⁹9⁹9⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹⁹9⁹⁹⁹⁹99⁹⁹⁹⁹
Are you using AI to convert your prototype to front-end
You're exactly the kind of web developer I am working to become like: full-stack web developer and designer. Thank you for the awesome videos. You have become a mentor for me.
Thank you for typing the code then immediately showing the result. Makes learning much easier.
I came to this video from Recommendations. Thanks for your efforts, I want to point out to an important thing that you missed. You used an to act as a toggle for the menu, it's better and more accessible to use in that case, since the is not focusable element and a lot of beginners will do their work based on that.
Gary you have helped many people feel young again with your spirit and energy to help teach this stuff. Keep up the great work. I have been a developer for nearly 30 years and you allow me to keep my skills sharp.
after your vid i have great insight into the whole process from prototyping to coding ... well done
You are legit the best design instructor I've followed!! Also love the humor!
I don't usually use plugins for CSS animations... unless someone references one to me then I usually only use it once or twice
First off, this is a good tutorial and the result looks very nice.
That said, whenever you find yourself adding a delay to a design so it takes longer to display the information the user asked for, stop right there. Take a step back and rethink your life choices.
can you explain why please?
@@taigaaisaka3663 Pretty self-explanatory... The goal of web design should be usability. If the user is hindered by design choices, and those hindrances are enough to make the user leave your site/app, you've failed as a designer. Adding a delay to the users' experience almost never improves that usability and therefore should be avoided.
No Skip, just concentrate, totally, Inspired me so much ......Love 💙💙💙💙 .....From India 💙💙💙This is the video, I really want for, which shows me how Adobe XD works and it'll help me to do my career right, love from India
Great video that fills in gap between Adobe XD and VS Code in the design process of websites. Thanks much!
To anyone who wants an animation when closing, here are the steps:
1. Just duplicate the "overlay" artboard
2. Reposition it somewhere
3. Delete the trigger from the new artboard to "overlay all" (The trigger will be duplicated along with the artboard, so you have to delete it)
4. Create a "tap" trigger from the close button in "overlay all" to the new artboard
5. Change "Ease In-Out" to "Ease Out", keep the rest of the settings
6. Create a "time" trigger from the new artboard to "home"
7. Change "Ease In-Out" to "Ease Out", keep the rest of the settings
so helpful thanks bro.
Hi there, is it problem to post a code if you have time for this? I don't quite understand what are you saying. Thanks in advance
love how short & sweet and to the point you are, don't have to skip through like other tutorials, plus your tech-savvy, great videos, really appreciate them!
YOU ARE THE BEST, KEEP WORKING, absolutely want some ui ux video from you
I'm getting inspired with this video and you see how chill he is keep it up bro
Instead of using calc and subtracting fixed units, use
box-sizing: border-box;
And that will make your padding go inwards instead of outwards.
A good rule of thumb is to apply it to everything by doing:
* {
box-sizing: border-box;
}
And every element will get that rule applied automagically.
OH thanq bruh
@@darkoefremovmkd How exactly to do that, for us amateurs..
Facer, I explained in a comment of my comment.
@@darkoefremovmkd Thanks on reply. You mean to apply it to every possible container?
Gary, this is a great presentation of what a design to code workflow should be. Thank you for making it! I got to practice my css animations and emmet commands also while following the video. It's a great time to be a developer, considering people like you exist to instruct us with free, simple tools like Adobe XD and VS Code.
Even though I am a developer, I have never done CSS animations. I didn't even know there were tools out there to help me do animation! Now I will be looking for tools!
everything in one video excellent explanation
I loved this video. For me, web design is the final product that I can view on my browser. Prototyping + Coding is just what I was looking for!
Thank you for the video! You nicely combined how to use HTML, CSS, and JS in one place. And please keep talking. It really helps newbies to understand what you are doing.
Wow you saved me ! I just started designing I don't know much yet but this tutorial helps especially with the js code ☺️☺️
Great tutorial. This type of things can be applied to page transitions also.
thank you for your detailed video, and We need more Tuts like this from XD prototypes to HTML/CSS , it's really confusing for people from a Dev. background .
I just played around with Anime.js yesterday. Awesome tutorial. Makes me interested in the design tools for a change.
For those that hate this video at first, like i did, and just want to get out of it what you'll need, don't be lazy and fast about this.
Follow along, type exactly what he types in to your own IDE word for word, but add notes in comments (using */ to open comment and */ to close) explaining what you've come to understand the line means.
This will allow you to more intentionally and comprehensively pick up on the meaning behind it all. THIS is the most efficient way to consume the video.
Don't be overwhelmed. Do it step by step, quit rushing around. Slow it down.
agreed! no need to rush. I never thought of commenting throughout the process- I'll add this to my learning path.
Yet another great tutorial! thank you so much, I've been struggling implement a nice slide in navbar menu. thanks a lot!
Very Insightful......Must Learn XD To The Max.....
wooow.... this is an awesome Tutorial i was wondering how to convert xd design but now have a clear understanding thanks.....
Besides a great designer, you are an awesome teacher, keep it up!
"Uuugh, I'm talking a lot" LMFAO You're the champ bro! Your talking performance reminds me my cocaine days :)
Awesome animation and gorgeous work!!
Perfect! I loved it! Simple, well explained and direct to the point. Congratz
Hello Gary, hello everybody
first of all I wanna thank you for this amazing lesson you gave to us. I'm new to Adobe XD. I'm a front end developer.
I have a few questions to ask if I may:
- what's the purpose on sketching the interface and then redoing that again rewriting HTML? I mean, what's the reason of doing twice the same job?
- I really like the design of the application, but, why one should first sketch the app and then write again the HTML/CSS for the same thing he or she did right before?
- Can't you just use the Web export plugin ?
I thank you in advance. I apologize if I'm obvious, but I'm new to Adobe XD, and it's an amazing tool for UX/UI and I want to make clear of everything.
I know you asked DesignCourse. But I would just quickly tell the reason I was told by my instructors at education.
You want to do a mockup of your website/app for a few reasons. First it's a good way to visualize your ideas before spending time on the coding. It may seem like you spend a lot of time first doing a mockup and then coding. However in larger scale projects it could cost you many more hours if/when you realize that it doesn't fit together. That's why doing a mockup is a fantastic idea.
Another thing is, if you are doing a job for a company or someone else then you can present to them the mockup, so if they didn't like something about it you can change it fast. That way you are minimizing the risk of scrapping everything because the client didn't like it. Or at least you didn't waste the time coding everything. Sometimes the clients may change their mind about certain things so it's always a good idea to present them the work you have done. It's much easier with sketches, and less time consuming. Be mindful your mockups don't have to take weeks to make, they are like advanced wireframes (wireframes with a coating). Making good mockups does take some practice as well.
Essentialy you can save lots of time, by spending time preparing in the beginning.
@@fleexie thanks for the great info
@@fleexie u are right in what u saying .. but what I'm understand from the questions is that it could be more simple if u just export the whole prototype as a html/css documents and img files to a map. if there isn't an issue when doing that. I'm trying doing it but all links u do in adobe xd prototype dose not apply in the html/css documents.
so the question now is what needs to do to fix the links problems ... or what I'm doing wrong when I'm exporting the web page
@@aztrodj82 Oh no. You do not use XD to make the actual sites. Only prototypes/mockups. Nothing more.
After you made the prototype you are doing the coding, in another software. Since you already have the design and such it's actually pretty easy to code it afterwards.
I know it would be nice if you could just get the website out from the XD project but it's a software for prototyping not making actual code for sites.
@@fleexie Wow Fleexie, amazing. Thanks a lot for this! It's really clearifing. Nobody taught me this simple concepts at the university.
Yeah, I really agree that doing sketching and prototyping will save you money even in the client/company scenario you described.
That's a really great and valuable info.
I can't believe you just made a fancy website in just 45min.
Great ! i think is just a matter of time till adobe or some other team releases a XD to HTML Plugin :) atleast i hope so, becousei just love XD.
You rocking with many technology
It is great and clear tutorial specifically for the biggers, thanks.
Woah, great video mate!
BTW coding starts at 19:15 😃
From sir Brad Traversy's channel to this. I was inspired by how you teach UI fundamentals and I want to practice it even more :) thank you good sir.
thank you so much for sharing this tutorial ...
Believe in yourself, our determination is sotNice tutorialng that never lets us down
We'd appreciate a javascript tutorial series!
you're amazing! thank you! definitely picked up a few tips & tricks :)
at 16:07 there is no time option in trigger pls anyone help me
You deserve more than 1m sub
Excellent class! I learned a lot that I did not know. Thanks.
Great Jobs!!! You got my suppose as usual
Thanks for your best xd to html tutorial
Love from Pakistan
I love your tutorials,
Hello, is there an easy way to export from adobe XD to html / css without writing code?
wix
yes us the app anima for example.
@@maamouhinda7722 is it free
(1) In "Edison" it would be possible to create and play Loops in Any Order we like. Example. Loops=(2, 6, 8, 1) or (12, 1, 3, 6.10,) and
This dude is the king of sarcasm 🤣🤣 I love him... See 9:05 to 9:15
Totally agree, bro!
Love it! Thanks for this tutorial :)
At 15:50, I don't see a time trigger on my drop-down menu?
How cool your tutorial is! Thanks for your worth experience shared. ^^
Hello, nice to see a Vietnamese here. Any product was launched after watching this video? :D
WoW I learned so much Thank you
Thanks for the video, I was just wondering how the frontend developer's work looks like after that the designer sends the adobe xd files :)
hats off to the developers who code😂
Great video. Informative. As a software engineer/tech lead, my take is that I unfortunately would keep going straight to code and not learn Adobe XD given it's nothing more than a way for non-coders to express ideas :( :( Really looking for something that can boost my design abilities. I'm neither great at CSS nor SVG nor anything of the likes..
i was trying to rebuild this as practice but i faced a problem
i either can make the side page come and go without a delay between the display block and display none
or make the transition works on only one side
anyhelp ?
really i so long search this video. thx u very much.
So all the designing in Adobe XD is just to get a feel of how you want it to look? You still had to code it again once in visual studios?
Yes, XD is for making prototypes (designing), after that you still need to code it
@@frials4757 yea is only a preview and its very important!!
Thanks for this awesome tutorial!
I've made mine, but it gets weird the black overlay won't animate from right to left, the border above the h1 just sticks there constantly but at least the list items: home about us, etc behaves as it should, bouncing up like yours !!! ....mama mia where did I go wrong !? I did everything as you said !!
Wow, how cool !!
My congratulations, I'm very happy to see this video lesson helped me more, congratulations.
great video! keep up the good work!
Animate.css is pure love 😍
thank u soo much it helped a lot
When I create a main.scss file it doesnt come up "Watch Sass" for me like it does for him at 18:04 Why is that? :/
add the ext. plugin via VSCode -- Live Sass Compiler by Ritwek Dey
tNice tutorials tutorial was very satisfying
Awesome work dude! You rock.
Thank you so much! This tutorial was a pleasure to watch! Please do more of these! ❤
26:44 display: border-box; ?
Love your vids!
Thank you Gary. You're awesome!
Nice tutorial, btw at the end you should place ‘opacity: 0’ for the ‘0%’ in your bounce animation. Thank you so much for such a great content.
small cry for help. When my transformation happens, the elements of my home-page are still visible until the transformation is finished. I wrote the code along with this video. For you it doesn't happen. What could be the problem? Couldn't find any solution when it comes to the transformation, the animation or the colors. Maybe you have an idea?
Thanks in advance
Really wonderful
Thank u so much for tutorial
Hi I am not a developer, or know any html or css, I have good grip on ui ux design in web, If i have designed my template in XD, can I make it functional by exporting it along with its HTML & CSS ???
Awesome tut! Vanilla JS is cool!
No matter what i do i cannot get the Js to work. i have copies everything without result. Any thing i am doing incorrectly?
Which plugins you using to live server and compile scss?
1. Live Server
2. Live Sass Compiler
Both are developed by Ritwick Dey.
This is doing it all by hand... shouldn't there be a way for you to export FROM Adobe XD?
There's an extension named "Web Export" and it can export html+css for you. Either in the same file or in different ones. but there's some problem with it the code can be messed up if you made slight mistake while naming objects
LOVED The Video!!! Kudos! Just wondering, what would have happened if you exported from xD to HTML?
it work on my pc thx bro vеry much
The way you implemented list item animation I dont think its the best way of doing it,”.
If I add another item, I have to add css for that item to .
Nice tutorial.
I'm enjoying every bit of vanilla CSS. No frameworks, nothing. Grid has made a ton easier.
why not just export xd to html/css/javascript project? does it not have that feature?
I wish you would have provided a link to the code or XD files.
@DesignCourse
so in this way you work 2 times ? i though that XD tool will help exporting this to html and css
It supposed to be worked by 2 person, a designer and frontend dev, if you are alone and need for rapid development you can use pingendo instead.
Good Video and Thank You
at 11:58, the overlay you mean is it the option adobe xd provides for overlaying other artboards on top of others with a little animation or is it something else? Thanks for the great video
How could I add an animation when the .show-menu is remove, when we hit the cross bar to close the nav section??
Oh man, you are a blessing! Thank you so much!
Hey there, I'm trying to follow along in Adobe XD 2020, and the animation options seem different. I don't seem to have an option to use Time as the trigger for the menu animation. Is this something that they have removed or changed in 2020? Or am I perhaps overlooking something?
It only works when you transition from one art board to another.
Well I found that if I go in prototype mode and shift-click two artboards then the time trigger appears
everything melts down in dreamweaver after applying the '&::before' statement in the scss. Also, floating the menu button doesn't really work. I do understand the process better, from XD to html. So there's that.
How do you also animate the menu closing?
I need to create a free membership website with profiles. Do you have any videos on this because I having a hard time finding any videos on this.