This seems quite useful. I have an app prototype in XD and the fact that in some part you can export components to code instead of just png or pdf is a sign of progress and something the developers have been requesting.
oh god you are really helpful and you really made us unique from other developers, many of them don't even know that how we do stuffs, what you taught us... THank you SIr.
XD is underrated ...also, the more i can get out of adobe's (expensive) ecosystem the better! Awesome 👌 now I can add this to my workflow as a solo designer & developer! Figma seems ideal for cross-functional teams (my future).
How do you manage client expectations? Do you present designs from XD? I'm new to XD. It just seemed like without the plugins illustrator was a faster tool for laying out flats and establishing visual brain identity and then bridging that to prototypes in code. Maybe the export tools are stronger now? Kicking the tires in the app typography styles and everything just seemed so difficult to manage. I'm coming back to design and code after a few years hiatus just wondering how you work I'm learning vue/nuxt/CMS/ecommerce and eventually will shop around for freelance work likely like yourself handling multidisciplinary stuff. Cheers
Excellent video. I copied the url of my public library as same as 14:52 but I got this message: Sorry! There was an issue trying to import your CC Library, go back and try again. and the library doesnt down loaded... Can you or somebody help me, please...
Can this also do html? I'm imagining sourcing the x-y location of each element, button, text in XD so it knows where everything is and generates header, body, and div and syntax automatically.
Thanks Gary for this! I will be waiting for Flutter one from you using this plugin later ( By the way, this plugin is so you Designer Visual Code Guru)!
13:34 can someone explain this step. It seems without a specific folder (the one he's saving it into) I will be unable to edit in Visual Studio Code among other things. Where can I find this folder?
I don't get the idea why do have to use this even though we have to mention everything and type everything from css to html and javascript.if possible can you make the same tutorial for android projects I really want to know how it would work with this Adobe xd plugin.
How do I implement Bootstrap as base? For example: . Designer sends XD link . Dev imports via VSC extension . only project specific elements/components are in dsp and preview but Dev needs BS as "background" (snippets, css, js, blabla...) how do I do that?
The WP theming platform I use has an all elements view, then you change the global variables. If I can re-create that layout with XD to act as the DSP we can recycle for every project! I'm trying this monday...
I'm a little confused! why bother using this plugin while you are writing even the css yourself and also a lot of work to import those stuff! Adobe XD can export the components and other things really easy and you can use them directly. can you answer this? what is the advantage of this plugin?
Seems like a beta version, with all the clutter. Great idea, subpar implementation. Hopefully they will chisel it down in the future. Maybe it's useful in its current state for big companies.
Gary, thanks for this! Having an issue unfortunately when finish editing: Error generating tokens: internal/modules/cjs/loader.js:96. Any idea how to remedy? I can't seem to find any answers on this that resolve it.
Hi Brian, sorry to hear you're having issues. Do you have NodeJS installed in your computer? If not, you can do it on nodejs.org/en/download/ If you do have it installed already, what version of Node are you using? Thanks.
For large projects, it would be helpful. For a simple project? Not so much, but it's not really time consuming.. It's just a matter of learning a new workflow
Cool and all, but I still don't see a huge advantage when we still cannot create components in programs like XD then translate them to, at least, bare minimum code. I hope they update the plugin to be able to get at least the html structure of components you create, now that would be significantly helpful to both UI/UX designers and front end developers.
It's really difficult for them to get the HTML structure right via automated code, so it's not worth it. Manually writing the HTML isn't that big of a deal though, assuming you know HTML already; there's usually not a ton of code associated with components. CSS can be a different story, as that can get quite lengthy -- but again, automating that stuff just turns out notoriously bad.
I don't think it's a necessity to create the code snippets. There's still value in just having a quick reference to at least the color variables, and also being able to update the DSP whenever the UI/UX designer makes an update (thus translating to automatic color scheme updates on the frontend).
Adobe seems to fear open source. And ... no, I won’t ever pay some monthly subscription when I need a design twice a year. My company paid too much to them. And I wouldn’t ever recommend to reopen some kind of a back door into development again. Just my thoughts.
Not every company has to go the route of open source. There are amazing non-open source companies that do things better than open source alternatives. And why would you pay a monthly subscription if you wanted design twice a year? I agree, that would be silly.
Did you heard about Anima 4.0? It will change the game of front end development, it can can convert design to React code or if you want HTML, CSS and JavaScript. I know you created video on Anima that was old version but Anima 4.0 will change the game
Its going to be a while before something 'changes the game' between design tools and React/web components. Despite Anima working hard on it. The code these things pump out is more than often bloated to hell, not optimised for accessibility or responsive design. Im sure in 2 years Anima will be an 'option' but atm no respected dev team would consider it in a Production environment
Most useless thing what i've ever seen... Just learn sass and JavaScript and start to type your code. It's easy. Or you can learn some JS frameworks like VueJS.
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
The Adobe XD VSC Plugin ROCKS! Who's also going to start using it on serious projects?
Me too😎🔥🎉
How much they paying u to say that
@@Ryan-xq3kl $0
It is not yet ready for serious projects.
If I was more efficient at coding I totally would, but I’ll be sticking to Anima or something similar for now. 😬
AMAZING VIDEO!
I'm literally doing my first handoff to developers at my new job on monday, I'm so excited for this
This seems quite useful. I have an app prototype in XD and the fact that in some part you can export components to code instead of just png or pdf is a sign of progress and something the developers have been requesting.
just use figma
oh god you are really helpful and you really made us unique from other developers, many of them don't even know that how we do stuffs, what you taught us...
THank you SIr.
XD is underrated ...also, the more i can get out of adobe's (expensive) ecosystem the better! Awesome 👌 now I can add this to my workflow as a solo designer & developer! Figma seems ideal for cross-functional teams (my future).
How do you manage client expectations? Do you present designs from XD? I'm new to XD. It just seemed like without the plugins illustrator was a faster tool for laying out flats and establishing visual brain identity and then bridging that to prototypes in code.
Maybe the export tools are stronger now? Kicking the tires in the app typography styles and everything just seemed so difficult to manage. I'm coming back to design and code after a few years hiatus just wondering how you work I'm learning vue/nuxt/CMS/ecommerce and eventually will shop around for freelance work likely like yourself handling multidisciplinary stuff. Cheers
Actually it’s a very good extension for Developers and Designers. I am really looking forward to explore this.
Great video. 👍
Best educator, thanks
Excellent video. I copied the url of my public library as same as 14:52 but I got this message:
Sorry! There was an issue trying to import your CC Library, go back and try again.
and the library doesnt down loaded...
Can you or somebody help me, please...
Probably waiting for this
Just wanna say Thank You. You made stuff easier to learn.👍🏻👍🏻👍🏻 Say hi to your dog 😊
Can this also do html? I'm imagining sourcing the x-y location of each element, button, text in XD so it knows where everything is and generates header, body, and div and syntax automatically.
Interesting.... could you showcase this for iOS or Android?
Joke aside waiting for Figma to support this, it looks cool!
Figma made their component variant system update today, which is amazing
@@R_Samnan Link?
Amazing stuff Gary, I have leant a lot and working on creating content too to share what I know so far.
When the dist folder is created, the variables.css file doesn't appear inside there. What is the reason for this?
I am waiting for your course. I registered this
It's just I realy need. Thanks!
Wow! Thanks a lot for creating this video. So informative! And using a real world example. 🔥🔥
Hmmm, couldn't Xd provide some css and html...?
money?
use bootstrap studio app easy drag-drop xD bootstrapstudio.io/
Please why did you add component in the text input?
Hi is this extension still available? I can not seem to find it. Thanks
super helpful thank you!
It says There was an issue trying to import your CC Library, go back and try again. :( what shoul i do?
Oh my, I've been waiting for this video. Thanks!
Amazing video!!
Thanks
Awesome thanks
Thanks Gary for this! I will be waiting for Flutter one from you using this plugin later ( By the way, this plugin is so you Designer Visual Code Guru)!
Interesting concept! Thanks for sharing Gary. I am still a Figma FanBoi
Thank you, Gary. Clearly explained. I love XD and VS Code. Very excited to try this out.
13:34 can someone explain this step. It seems without a specific folder (the one he's saving it into) I will be unable to edit in Visual Studio Code among other things. Where can I find this folder?
can we also export our animations with this?
GREAT AS ALWAYS!
Yep I'm one for it, but does it deal only with color and type?
what kind of VS Code Plugisn do you use?
Cant wait to add this to my tutorial (Tagalog Language)
You look like Edward Norton! Just throwing that out there...
I don't get the idea why do have to use this even though we have to mention everything and type everything from css to html and javascript.if possible can you make the same tutorial for android projects I really want to know how it would work with this Adobe xd plugin.
How do I implement Bootstrap as base?
For example:
. Designer sends XD link
. Dev imports via VSC extension
. only project specific elements/components are in dsp and preview
but Dev needs BS as "background" (snippets, css, js, blabla...) how do I do that?
show, vou utilizar em meus projetos imediatamente. Obrigado
But I couldn't find any css under dist... Help me 23:36 min point
Hello please help me
hi there I have an error. "Unable to install 'adobe.xd' extension because it is not compatible with the current version of VS Code (version 1.42.1)"
The WP theming platform I use has an all elements view, then you change the global variables. If I can re-create that layout with XD to act as the DSP we can recycle for every project! I'm trying this monday...
Why is it when I try this it never works lol, might be a windows issue, but I learned something here thanks for the Video
How can we work with this plugin and Tailwind framework?
i need help here, i can't find edit option on any token and i can't even rename any color and token.
Try switching the view option from grid to list
@@TheNeutralPretzel thank, I found it..
Please review my UIK-Framework on npm and let me know what more I can improve on that...
Merci :)
mydsp library is not showing to me
It is not yet ready for serious projects. Could be useful for static microsites only.
I'm a little confused! why bother using this plugin while you are writing even the css yourself and also a lot of work to import those stuff!
Adobe XD can export the components and other things really easy and you can use them directly.
can you answer this? what is the advantage of this plugin?
How do you export components and other things really easily?
Could this be integrated with a grunt build process, I’m working in scss and plan to use xd for the design which will be shared with others
How did 'Existence' become 'Experience' during the process? JK, awesome stuff!
Seems like a beta version, with all the clutter. Great idea, subpar implementation. Hopefully they will chisel it down in the future. Maybe it's useful in its current state for big companies.
Amazing
Gary, thanks for this! Having an issue unfortunately when finish editing: Error generating tokens: internal/modules/cjs/loader.js:96. Any idea how to remedy? I can't seem to find any answers on this that resolve it.
Hi Brian, sorry to hear you're having issues. Do you have NodeJS installed in your computer? If not, you can do it on nodejs.org/en/download/ If you do have it installed already, what version of Node are you using? Thanks.
@@demianborba yes, I do. I was able to resolve the issue I posted, but thank you very much for your reply!
@@brianhsimko that's great to hear! Let's us know if you have feedback on the extension.
@@demianborba thanks so much and will do!
All these gimmicks might even slow down the overall process.
For large projects, it would be helpful. For a simple project? Not so much, but it's not really time consuming.. It's just a matter of learning a new workflow
they have remove the vscode extention for adobe xd :(
Awesome
Unless XD provides HTML/CSS I would prefer to use the traditional way from design mockup to code.
An Android Studio code plugin would be useful .
Cool and all, but I still don't see a huge advantage when we still cannot create components in programs like XD then translate them to, at least, bare minimum code.
I hope they update the plugin to be able to get at least the html structure of components you create, now that would be significantly helpful to both UI/UX designers and front end developers.
It's really difficult for them to get the HTML structure right via automated code, so it's not worth it. Manually writing the HTML isn't that big of a deal though, assuming you know HTML already; there's usually not a ton of code associated with components. CSS can be a different story, as that can get quite lengthy -- but again, automating that stuff just turns out notoriously bad.
Yeah, agree 100%, it's really much ado about nothing.
Wow
niceee
The Music is too loud
For me it seems like doubling the coding time
I don't think it's a necessity to create the code snippets. There's still value in just having a quick reference to at least the color variables, and also being able to update the DSP whenever the UI/UX designer makes an update (thus translating to automatic color scheme updates on the frontend).
Naysu
If only I didn't code in Linux.. this looks awesome, but obviously no XD support here.
Adobe seems to fear open source. And ... no, I won’t ever pay some monthly subscription when I need a design twice a year. My company paid too much to them. And I wouldn’t ever recommend to reopen some kind of a back door into development again. Just my thoughts.
Not every company has to go the route of open source. There are amazing non-open source companies that do things better than open source alternatives. And why would you pay a monthly subscription if you wanted design twice a year? I agree, that would be silly.
KEEP IT SUPER SIMPLE
LOW CODE NO CODE!
Did you heard about Anima 4.0? It will change the game of front end development, it can can convert design to React code or if you want HTML, CSS and JavaScript. I know you created video on Anima that was old version but Anima 4.0 will change the game
Its going to be a while before something 'changes the game' between design tools and React/web components. Despite Anima working hard on it. The code these things pump out is more than often bloated to hell, not optimised for accessibility or responsive design. Im sure in 2 years Anima will be an 'option' but atm no respected dev team would consider it in a Production environment
It's not as great as i expected.. so big NO for me
First
ah, it's shit, don't bother to install it.
Most useless thing what i've ever seen... Just learn sass and JavaScript and start to type your code. It's easy. Or you can learn some JS frameworks like VueJS.
I'm literally doing my first handoff to developers at my new job on monday, I'm so excited for this