Am I doing something wrong? Trying to figure out the best approach to responsive prototyping.

[Michael22905524gkq2]

I just received some .xd file which was supposed to be a whole responsive website template, but apparently the designer did a terrible work, which means - he didn't name any of the elements, he didn't define those elements as 'responsive', he did make no use components..and basically he just ripped some paid XD components from around the web and put them all together.

And now, here i am, a PHP backend dev, for the first time, learning prototyping in Adobe XD and basically refactoring all of his work into a brand new project. Since it's my first introduction with such type of a project, I was wondering what is usually your workflow when it comes to responsive designs?

1. Do you first build the desktop version and then simply duplicate it to both mobile and table resolutions and re-align the items? (after toggling on the 'responsive size' option of course).

2. Should I make all my elements (menu, footer, container, sidebar etc. etc.) a components and keep them in a separate artboard for a reuse on my rest of the screens?

3. How do you handle tables in Adobe XD? Is there a way to actually create one within the prototype? And I'm not talking about drawing some rectangles and calling it a table. These tables are a very crucial part of my website, since they handle complex backend data which updates on realtime.

4. And finally, the issues which seems to be XD's achilles heel - the export itself.. I already tried 'Anima' app and the 'Web Export' plugin but both of them are doing quite a terrible job actually.. No real responsive export there - it just simply duplicates all your artboards into different <div>s and with the help of javascript - it just "display:none" the irrelevant ones (for example - if im on desktop - then "app-mobile" and "app-tablet" divs will be still on page, in terms of DOM, but will be 'display:none'd, which is quite a bad practice in terms of SEO and resources in general).

Thanks a lot in advance.

[Rishabh_Tiwari]

Hi @Michael22905524gkq2 ,

Thanks for reaching out. I found an article that explains how to Make a Responsive Design in Adobe XD, please refer to this article. I am keeping this discussion open for expert suggestions.

Regards

Rishabh

[geoffreyn49540042]

1. How do you handle tables in Adobe XD? Is there a way to actually create one within the prototype? And I'm not talking about drawing some rectangles and calling it a table. These tables are a very crucial part of my website, since they handle complex backend data which updates on realtime.

By @Michael22905524gkq2

Hi Michael, Since there is no default way to create tables in XD just like you have it in Indesign, the only way around the issue is to use a plugin like "Tables for XD".

Furthermore the XD API puts a limit on what plugins can actually do thats why the plugin resorts to drawing rectangles to form the table. I know that Adobe is working to expand the capabilities of the API and when that happens "Tables for XD will be updated to work in a more intuitive way. 

There is also a recently released Pro version of the plugin where you can import data from a CSV file and populate your tables. Maybe you will find it helpful:

https://youtu.be/esrxkW6ixpo