How to adapt text and/or elements size while designing to smaller screens?

[joaosp]

I have a layout I made some time ago on Adobe XD (that was just a personal project) and now I wanna put it on Behance. To do so, I need to duplicate/adapt that layout (designed for desktop) to smaller screens, iPad and mobile.

Since I'm not used to design for smaller screens, after I started I've got a doubt: how do I know for example how much I need to decrease both text and UI elements' sizes? To explain better: I have a text with 40px. How should I calculate to properly decrease that size? Is there like a default percentage to reduce from those values? Maybe some visual "default" rules that every design follows?

I always design for Bootstrap, however I'm not sure if I'm thinking the right way.

Thanks for all your thoughts and advices you could tell me. I worked most of time only for desktops, a traditional web designer, and now I'm trying to migrate to UI/UX.

[Atul_Saini]

Hi Joaogdesigner,

Thanks for using Adobe XD and sharing your feedback about switching to a smaller device. Please take a look a the responsive properties which might help in this situation: - Responsive resize and constraints

Please update this discussion in case you need further assistance.

Thanks,

Atul_Saini

[joaosp]

I took a look at that page about the responsive resize resource, but actually you didn't understand what I need. I need to create other 2 artboards (ipad 768x1024 and mobile 375x667) and "transpose" my desktop layout to those new artboards, but I don't know how to resize texts and elements properly.

[fahad_dexter]

Hi joaogdesigner,

Just collectively copy the desktop art-board elements and paste on the other 2 art-boards. Resize and adjust collectively. Size of elements will increase and decrease accordingly. ONLY text layers and symbol elements wont increase accordingly.

To increase symbol size accordingly Ungroup all symbols. As far as text layers are considered, do select this option for all text layers to increase font size in collective increment or decrement.

Regards.

[joaosp]

So, to increase text, I need to convert them to point texts instead of area texts? Are you sure?

[fahad_dexter · Accepted solution]

Yes joaogdesigner​,

Convert them to point texts and they will resize collectively with all other elements.

Regards.

[Mark Keele]

Thanks, I looked all over and found it here from you.

[joaosp]

Now I've got what exactly is the responsive resizing feature and how to use it properly. I didn't realize that I had to keep it enabled for the all elements on my artboard and then, AFTER COPYING the desktop artboard content to a table-sized artboard, THEN I RESIZE those elements and Adobe XD will resize, actually, not the font size necessarily but the SPACE/GAPS between text or assets.

I didn't find that explanation, the exact one, in any place of this internet.

[joaosp]

Just a fix: TABLET-sized artboard. I wrote "table-sized", it was wrong.

Am I missing it or we really can't EDIT a comment here?