Skip to main content
joaosp
joaosp
Inspiring
January 3, 2019
Answered

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

  • January 3, 2019
  • 1 reply
  • 20568 views

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.

This topic has been closed for replies.
Correct answer fahad_dexter

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


Yes joaogdesigner​,

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

Regards.

1 reply

Atul_Saini
Community Manager
Atul_SainiCommunity Manager
Community Manager
January 4, 2019

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
    joaospAuthor
    Inspiring
    January 4, 2019

    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
    fahad_dexter
    Participating Frequently
    January 4, 2019

    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.

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