What size to design a frame for a website

Hello! I am new to web design and I was wondering if I could get any guidance based on what size to design a website template that later would be loaded to the web.

I would like to design one for a mobile device, and one for pc.

Do I need to design two templates? Is there a way to design one size then scale it to size?

Will the website be automatically sized based off the device?

Any guidance would be greatly appreciated!

Josef G

Hi Josef, you could check these sources (1 , 2) for understanding better variants and modes

Thanks @Meltem_Ozgen that helped a little bit, I was wondering if I need to design two websites, one for mobile and one for pc, or if the device will automatically scale down based on the screen size.

I also was wondering if I needed to add constraints, and frames to make sure that the scaling would go properly.

Thank you for your time!
Josef G

You will have to make different frames for desktop and mobile (and any other in-between sizes you need) because Figma prototypes are not responsive. Even though you can create a responsive frame (with auto-layout, auto-layout wrap and constraints) and it will help you a lot while designing, it is pretty much ignored for the prototypes at the moment.

Thank You so much @Fernando_Lins, what is the best size to use for mobile, tablet, and pc?

Usually something like 1366x700 for desktop, 1024x600 for tablet and 400x700 for mobile, but you should do some research on what is most used by your target audience, in your country, etc. There are many websites with that information.

1 Like

Great that helps a lot!