How to create banner image with two different dimensions ( one compatible with mobile and another compatible with laptop) in Figma

Question

I want to create banner image which is compatible in both mobile and laptop view. I want to store banner image with two different dimensions in database and use appropriately for mobile and laptop view. The two images should be same ( ie any of the image should not be cropped, stretched or any part of the image should not be lost) How to create such a banner image using Figma. The image should be exactly same when viewed in laptop and mobile.

The image created with different dimensions should be exactly same

Answer 1

Figma files are viewed as static artboards. So you illustrate designs for different platforms. You cannot make 2-in-1 designs that morphs depending on whether you're viewing the Figma file on a Desktop Computer, or a Mobile phone. That can only happen in an actual implemented webpage with Responsive Design best practices, and then viewed in real web browsers.

In Figma, you simply create the design of the Desktop version of that page, containing that banner, and a separate design of the Mobile version of that page, with a copy of the banner image, but resized according to your specifications.

You then present this to the devs during the handover, telling them that those two designs are for the same page, but have to be implemented using Responsive Design.