Skip to main content
Known Participant
August 23, 2020
Question

Screen appearing differently in XD (the software) and in the XD iOS app preview

  • August 23, 2020
  • 2 replies
  • 2267 views

A screen that I have created appears differently on XD (the software to create the screen) and on its preview in the XD iOS app.

 

Specifically, a line gets truncated in the app, as compared to the same text line on the screen designed in the XD software (using a Windows 10 desktop).

 

My phone is an iPhone 6S Plus, and the screen size I have chosen to design the screen in XD is the same.

 

It appears like a bug, prima facie. I will be grateful for any inputs on what might be going on. Thank you!

    This topic has been closed for replies.

    2 replies

    Spas K.
    Community Expert
    Community Expert
    August 23, 2020

    I remember having this problem as well. I don't remember very well, but it had something to do with whether the text layer is a "Point Text" or "Area Text". Not sure how long your text is, but try changing between them and see if that fixes it. 

     

    knkkAuthor
    Known Participant
    August 24, 2020

    Thank you for the suggestion, Spas. I tried it, but I'm afraid that did not do it, either...

    knkkAuthor
    Known Participant
    August 30, 2020

    Not sure if you can upload it here, I normally use Dropbox or Google Drive, so that works as well.

     

    I can see there is some missing fonts warning in your Xd screenshot. Are you also getting a warning about missing fonts when you open it up on the iOS app? If a font is missing it will try to find a close substitute, and that might look bigger / different than the file. Some fonts just don't play well with Xd on the mobile app, but should look fine in a mobile web prototype.

     

    For multi-line texts, you should use the Area Text option. Even if it's not the cause for this issue, I remember it caused some problems for me in the past.

     

    Anyways, try to upload the file somewhere if you can so I can test it on my own device and see if we can find a solution 🙂


    Apologies for the delay, Spas, and thank you very much for the elaborate response.

     

    I have uploaded the file here:

     

    https://bit.ly/2QFUoeU

     

    I am getting a different text layout on the iOS app with both area text and point text (though different kinds of layout errors each time). And no, I am not getting any font missing notifications on the iOS app...

    Ares Hovhannesyan
    Community Expert
    Community Expert
    August 23, 2020

    There is difference of color profiles for MAC and Windows and others mobile devices. The solution will be to use the same color profile.

    knkkAuthor
    Known Participant
    August 23, 2020
    Thank you, Ares. This was text that was having an issue, and not colour,
    however...
    Rishabh_Tiwari
    Community Manager
    Community Manager
    August 24, 2020

    Hi there,

     

    Thanks for reaching out. If the issue is with the text, I'd recommend installing the used fonts on the phone as in some cases where fonts are not transferred, they are replaced by the system fonts. So please try installing the fonts and let us know if you need any further assistance.

     

    Regards

    Rishabh