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!
AdChoices