Skip to main content
M
Michael22905524gkq2
Participant
March 7, 2022
Question

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

  • March 7, 2022
  • 2 replies
  • 420 views

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.

This topic has been closed for replies.

2 replies

geoffreyn49540042
Community Expert
geoffreyn49540042Community Expert
Community Expert
May 10, 2022
quote

  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

 



Rishabh_Tiwari
Community Manager
Rishabh_TiwariCommunity Manager
Community Manager
March 7, 2022

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

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