What is UI designing by Adobe XD

Is it like a prototype or can we export the design into html and css?

I’m no expert here, but …

I think that is just a UI/UX tool. If you are on a large project, the devs will not be in charge of UI/UX. You will have a person or people that do that. They use tools like this to design the look and feel. They can create the various screens and model different states of those screens.

I haven’t used this product, but in my experience, they don’t give you html or CSS. In some of them you can zoom in and “inspect” the various components to figure out what the fonts are, the exact color values, sizes, etc.

But translating that into HTML, CSS, and JS - that is the job of the developer.

It also wouldn’t make sense to give you HTML or CSS (imho) because a lot of devs aren’t writing in vanilla HTML or CSS. And if these mockups were rendering coded HTML and CSS, then that would mean that the UI/UX team would have to know HTML and CSS to properly encode them.

What @kevinSmith says: I use it occasionally, and the problem it solves is that, if you’re a designer, you need to draw a design for an app.

But apps are dynamic. You press a button and it goes to another screen, or you resize it and the layout changes.

So either you draw every single variation, which isn’t feasible (so you only draw the important ones). Or you use something like XD (or Figma or Invision or whatever), which lets you basically do a dynamic drawing that you can show as a prototype: you can say “when you click on that button on the drawing of that screen, go to that other screen” or whatever.

Lots of these kind of apps have plugins that sort of let you export code. Not XD afaik, but for example there’s a plugin for Figma that produces React apps from designs. This never works very well and generally produces unusable garbage (the Figma one currently produces apps that come in around 150Mb), but nevertheless people keep trying to do it.

Wow, I didn’t know that.

This never works very well and generally produces unusable garbage …

Oh, yeah, OK, that sounds about right.

Yeah, it was a very early prototype so I’m being a bit unfair (plus it’s designed to produce working demos, not finished things), but the example web app it produced was definitely in the region of 150mb, which seems insane.

Oh, and FramerX can do it now, it’s all React

There is a Web Export plugin. I have never used it and have no idea how well it works.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.