The Adobe XD Visual Studio Code Plugin (Crash Course)
Вставка
- Опубліковано 18 вер 2024
- framer.com/desi... -- Sign up to Framer for free or get 20% off any paid plan!
-- Want to learn UI/UX? designcourse.com
-- Today, we're going to check out the new Adobe XD Visual Studio Code Extension, which is very awesome. It allows UI/UX designers and frontend developers to work together more seamlessly. At the heart of the extension are DSP's (Design System Packages), which take in both design tokens (colors, sizes, etc..) and design components that are created in an Adobe XD document. With these DSP's, you can create code snippets and have a living design system within Visual Studio Code. There's a lot to cover, so that's why I'm dubbing this a crash course!
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!
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
Hmmm, couldn't Xd provide some css and html...?
money?
use bootstrap studio app easy drag-drop xD bootstrapstudio.io/
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
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.
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?
When the dist folder is created, the variables.css file doesn't appear inside there. What is the reason for this?
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.
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.
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
Best educator, thanks
Actually it’s a very good extension for Developers and Designers. I am really looking forward to explore this.
Great video. 👍
Interesting.... could you showcase this for iOS or Android?
It says There was an issue trying to import your CC Library, go back and try again. :( what shoul i do?
Just wanna say Thank You. You made stuff easier to learn.👍🏻👍🏻👍🏻 Say hi to your dog 😊
You look like Edward Norton! Just throwing that out there...
Wow! Thanks a lot for creating this video. So informative! And using a real world example. 🔥🔥
Please why did you add component in the text input?
Awesome thanks
Probably waiting for this
GREAT AS ALWAYS!
Amazing stuff Gary, I have leant a lot and working on creating content too to share what I know so far.
Amazing video!!
Thanks
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?
Interesting concept! Thanks for sharing Gary. I am still a Figma FanBoi
Oh my, I've been waiting for this video. Thanks!
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)"
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...
It's just I realy need. Thanks!
I am waiting for your course. I registered this
show, vou utilizar em meus projetos imediatamente. Obrigado
super helpful thank you!
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...
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?
Yep I'm one for it, but does it deal only with color and type?
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?
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)!
Hi is this extension still available? I can not seem to find it. Thanks
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
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
mydsp library is not showing to me
It is not yet ready for serious projects. Could be useful for static microsites only.
Cant wait to add this to my tutorial (Tagalog Language)
But I couldn't find any css under dist... Help me 23:36 min point
Hello please help me
Please review my UIK-Framework on npm and let me know what more I can improve on that...
can we also export our animations with this?
Unless XD provides HTML/CSS I would prefer to use the traditional way from design mockup to code.
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.
what kind of VS Code Plugisn do you use?
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..
Awesome
they have remove the vscode extention for adobe xd :(
Thank you, Gary. Clearly explained. I love XD and VS Code. Very excited to try this out.
How did 'Existence' become 'Experience' during the process? JK, awesome stuff!
Amazing
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.
Merci :)
Wow
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!
niceee
Font is super easy to write. If you’re German. It’s “Yanone Kaffeesatz”. ^^
The Music is too loud
Naysu
If only I didn't code in Linux.. this looks awesome, but obviously no XD support here.
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).
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
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.
ah, it's shit, don't bother to install it.
I'm literally doing my first handoff to developers at my new job on monday, I'm so excited for this