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

Participant ,
Jan 03, 2019 Jan 03, 2019

Copy link to clipboard

Copied

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.

Views

13.0K

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

Explorer , Jan 06, 2019 Jan 06, 2019
Yes joaogdesigner​,Convert them to point texts and they will resize collectively with all other elements.Regards.

Likes

Translate

Translate
Adobe Employee ,
Jan 03, 2019 Jan 03, 2019

Copy link to clipboard

Copied

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

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
Participant ,
Jan 03, 2019 Jan 03, 2019

Copy link to clipboard

Copied

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.

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
Explorer ,
Jan 03, 2019 Jan 03, 2019

Copy link to clipboard

Copied

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.

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
Participant ,
Jan 04, 2019 Jan 04, 2019

Copy link to clipboard

Copied

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

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
Explorer ,
Jan 06, 2019 Jan 06, 2019

Copy link to clipboard

Copied

Yes joaogdesigner​,

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

Regards.

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
New Here ,
Apr 07, 2022 Apr 07, 2022

Copy link to clipboard

Copied

LATEST

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

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
Participant ,
Jan 15, 2019 Jan 15, 2019

Copy link to clipboard

Copied

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.

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
Participant ,
Jan 15, 2019 Jan 15, 2019

Copy link to clipboard

Copied

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?

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