Way to check for hi-res display

Adobe XD UXP Plugin API
1

Is there a way to check if the display is high resolution (hi dpi) or not?

Use case:
I’m loading in icons for the UI dialog and if the user has a hi res display and I load in the normal resolution icons the icons some of them do not look as sharp.

2

While I can’t say this with 100% certainty, I’d say I have gotten a pretty good idea of what the API allows by creating the typescript definitions (I basically have seen all the docs that got written at least once :wink:) and I’m pretty sure that – unfortunately – such an API doesn’t exist (yet)…

3

Aren’t @2x icons loaded automatically? I thought they were.

Documentation says:

5.10 Images

Images should be as crisp as possible for the user’s display. The runtime environment will typically try to select the best option if there are “@1x”, “@2x”, “@3x” options available locally, however this does not necessarily apply to remote images.

  • (5.10.1) Ensure icons are provided in 1x and 2x resolutions (at least)
  • (5.10.2) Icons for use in action buttons should be 14x14 points.
  • (5.10.3) Avoid rescaling large images (this can cause poor performance)
  • (5.10.4) Avoid using images in lieu of other more suitable elements
4

There’s no explicit API for this yet. We should probably have one, though, since it could be useful for a number of reasons.

However, if you use @2x and @3x in your filename (like icon.png, icon@2x.png, icon@3x.png), the correct one should be picked automatically. If it doesn’t, let us know, because that’s a bug.

(Note that this won’t work for remote assets, only for local assets.)

2 Likes
5

OK It is picking up the hi-fi icons using that @n filenames.

1 Like