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

New Here ,
Feb 12, 2022 Feb 12, 2022

Copy link to clipboard

Copied

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.

TOPICS
Design , How to , Import and export , Plug-ins , Prototyping

Views

133

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Feb 14, 2022 Feb 14, 2022
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 sta...

Likes

Translate

Translate
Adobe Employee ,
Feb 13, 2022 Feb 13, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 14, 2022 Feb 14, 2022

Copy link to clipboard

Copied

LATEST

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.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines