Preview in Mobile.

Report · Apr 21, 2023

Hi all, I have a problem when I prview my XD deisgn in my iPhone.

As you see if I have a page that exactly fits on the screen it looks great. But if I have a screen that is long (that I need to screoll down to see more info) it looks so thin. How can I fix this?

Report · Apr 21, 2023

Hey there. You don't seem to have scrolling enabled on the artboard(s). Usually when you resize an artboard vertically, you get a dotted line which marks the viewport height (visible part of the screen). Anything below it will be scrollable. Select the artboard, set the scrolling to "Vertical", and set the viewport height to match the screen height, like this:

Report · Apr 21, 2023

Great, many thanks my friend.

One more thing if you know that too.
When I start and preview in the mobile I get One Font is missing in the mobile (see screenshot). How do I get that font to the mobile or shall I change it? If so can I change that font on all boards at ones?

Report · Apr 21, 2023

On the fonts - Adobe won't allow a lot of fonts to transfer to the Mobile app, since there's some licencing issues with that. There's a few options:

1. Change the font to one which is already available on the mobile device. You'll have to do some research on that.

Depending on how your text elements are set up, you can change multiple at a time. Technically, you can change them all, you just need to select all of them at the same time, which can be tricky, as you can't just filter out the text elements in layers and select all of them. Once you filter to text layers in the layers panel, you can only select one at a time. You will have to click them manually on the artboards, holding Shift.

If you create a Character Style in the assets panel, and a lot of elements match it (same font, size, weight, color), you can edit the style and the changes will propagate to all text elements that match it.

2. You can preview on the phone using the web prototype in full screen - not ideal and can by clunky, but text is rendered differently in the web view and you will be able to see any font there with no issues.

3. Create outlines from the fonts (Object > Path > Convert to path, or Ctrl/Cmd + 8) - will work for previewing the text, but text turns into outlines and isn't editable anymore - it's okay for previewing one screen, but not a good workflow with many changes and lots of text.

Report · Apr 21, 2023

Hi @Niklas295204754lde ,

Thank you for reaching out. As Spas suggested, when possible, fonts are sent to your device when you preview on mobile. However, certain font vendors do not allow for the transfer, display, and distribution of their fonts. For more details, you can also check this article.

Thanks

Rishabh