XD : Unable to scale Text asset correctly

[SubZeroFlsh]

Hi,

I've downloaded Apple's Adobe XD templates, and I'm trying to expand one of the assets to the iPhone X screen size.

However, the time at the top of the asset doesn't seem to scale at all. Others text boxes do, and the box around the time scales correctly, but the time itself doesn't.

Here's an image: https://imgur.com/a/Fmi3i

Also, it is best to design the screens in Photoshop first then import them over? Or just make it all in XD.

I'm guessing it's best to make each asset in Photoshop. Then assemble them in XD, but I could be wrong.

Sorry if I've explained this poorly, and thanks a lot for your help

EDIT: detail

{Title renamed by MOD}

[Peter_Flynn · Accepted solution]

If you resize a group (or a selection of multiple items) to make it wider, XD just stretches all the artwork.  So all the icons in the header, for example, will get slightly wider -- definitely not what you want!  Since you can't stretch text in XD, the text will just move around proportionate to how far from the edge of the selection it is -- that's not quite what you want either, because spacing will become inconsistent.

What you really want is to re-layout the items, shifting the right-justified block of elements to the right (without changing the spacing between those elements!), keeping the time centered, and leaving the left-justified block of elements untouched.  XD can't do that kind of layout change for you automatically at the moment, so you'll have to do it manually: select all the right-justified elements and drag them to the right, then select the text element showing the time and move it to the center (the pink snapping guide will help you with that).

As far as Photoshop...  XD is optimized for screen design work, so you should be able to design most of your UI elements from scratch in XD.  If you need to create complex logos or icons, you may want to do those in Illustrator, which has the most powerful tools for vector (curve/path) editing.  If you need to work with raster images (such as photographs) for use in your UI design, Photoshop is by far the best tool for that part of the job.

Hope that helps!