Skip to main content
I
ibni23102852442q
Participant
February 13, 2022
Answered

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

  • February 13, 2022
  • 2 replies
  • 429 views

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.

This topic has been closed for replies.
Correct answer Chris W. Griffith

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.

 

2 replies

Chris W. Griffith
Community Expert
Chris W. GriffithCommunity ExpertCorrect answer
Community Expert
February 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 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.

 

A
Community Manager
Ansubedi03Community Manager
Community Manager
February 13, 2022

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices