Skip to main content
Question

4k Game UI Design Best Practices

  • September 19, 2022
  • 5 replies
  • 1504 views

Pigma

Hey guys! New to Figma and just wanted to make sure I’m on the right track with my approach to high-res UI design, since I haven’t found anything super definitive from my searches.

I want to use Figma to lay out a UI for a max resolution of 3840x2160 (above that and it will just upscale). I’m planning on doing this with a combination of vector assets created in
Figma, and external assets created in Photoshop that are then brought into Figma.

My questions are:

  • Am I fine to work in a 1920x1080 canvas, and simply export everything x2 (which equals 3840x2160)? Is this what I should be doing?
  • Assuming I can and should work on a 1920x1080 canvas, should I just create my Photoshop assets at the full resolution, and manually scale them down 50% when placing them in a frame in Figma? There’s no “reference resolution” of any sort that I can/should set that will automatically recognize and perform the conversion?

These questions feel pretty “Yeah duh, what else are you gonna do?”, but just want to make sure I’m not missing anything obvious with my approach before I dig in.

Thanks!

This topic has been closed for replies.

5 replies

Dennis_N
  • Power Member
  • 191 replies
  • September 19, 2022

I’m no expert when it comes to game UI but I would exactly do it like you described.


Hi, I’m going through the same situation and I haven’t found much information.

My question regarding working at half resolution and then exporting X2 is what happens
with the 1px lines?
I imagine interpolation will mess things up… It will probably be trial and error otherwise…

Have you been able to figure it out?
Thanks!


Gleb
  • Power Member
  • 4710 replies
  • May 16, 2024

1px × 2 = 2px

You are not compressing but enlarging the image. Vectors would scale and stay pixel perfect.


Is this why the device list in Figma shows half the resolution of the device?

IPAD PRO 11”
FIGMA
1194 x 834
Dispositivo
2388 x 1668


Gleb
  • Power Member
  • 4710 replies
  • May 16, 2024

Kinda. Figma has presets in density-independent pixels while the physical screen resolution (number of pixels) can be arbitrary.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings