Hey! I am new in adobe xd and I want to design views in adobe xd and then covert it into ionic ?

[ibni23102852442q]

I just installed the adobe xd and made it ready for designing. I am ionic developer. I got an idea to design the UI/UX in adobe xd and the convert or export, don't know how to work ahead to create that views in ionic. You will be highly appreciated. please guide from the basics ideas which I getting started and appropriate for ionic developer. Thanks in advance.

[Ansubedi03]

Hello ,

Its better to create Flow prototype in XD canvas and create Development link (in share tab) with Export for web selection out of it. 

That link you can check in browser , you will get commenting, design specs and variables option from where you can download your desire assets or variables and copy other elements as well and download CSS of each elements.

For further help, please elaborate what exactly you need from design. So that I can tell other workaround too.

Thanks,

Anita Subedi

[Chris W. Griffith · Accepted solution]

There isn't a great path from XD to Ionic. But knowing both worlds, here are my recommendations.

1) Use XD to create and validate the flow and the look of your app. But make sure you leverage using XD components. While these component don't really translate to Ionic's components directly, it does help keep things tidy.

2) Next, work through each XD component, use the design review to 'unpack' the CSS that defines that component, then apply that to the CSS vars that Ionic uses. I would have a stand alone Ionic app just to do this in a sandboxed fashion. One screen with my button I need to style, then continue working through the components, working from the simpler (like button) to more complex components.  Once you have all the component's styling working in the sandbox Ionic app, transfer that into the real app.

Hope this helps.