How to change the dimension of a frame to a different preset in Figma

A step by step guide on updating an artboard to a different preset dimension that matches a phone, desktop or tablet in Figma with the content staying the same.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 07/12/2023 at 15:55
Last Updated on 07/18/2023 at 11:12
A flower that represents Figma with the text “Change Frame Preset” beneath it.

A step by step guide on updating an artboard to a different preset dimension that matches a phone, desktop or tablet in Figma with the content staying the same.

SubscribeCheck out our free mobile e-commerce Figma design file

Step One: Select a Frame

A screenshot of Figma that shows that a frame has been selected.

In Figma, select a Frame (artboard).

How to create a Frame in Figma

Step Two: Open the Frame Dropdown

A screenshot of Figma that shows you how to open the Frame preset menu. It is found on the top right of the right side bar in the design inspector.

Select Frame to open the preset dropdown.

Step Three: Select the Preset

A screenshot of Figma showing the frames menu. It holds preset dimensions for Phones, Tablets, Desktop, Presentation, Watch, Paper, Social Media, Figma Community or Archive.

Select the device that you wish to update the frame's dimensions to.

Please note that the content of the frame will stay the same and this allows you to test layouts in different sizes.

We strongly recommend that you use auto layout with constraints to make sure that your designs update as desired.

How to use auto-layout in Figma

Looking for more tutorials on the basics behind Frames?

Consult the list below to learn more about the basics behind artboards in Figma.

How to create a Frame in FigmaHow to use auto layout in FigmaHow to change the dimensions of a Frame in FigmaHow to switch a Frame to Landscape or Portrait orientation in FigmaHow to set the maximum and minimum width or height of a frame in FigmaHow to clip content to a frame or allow it to overflow in FigmaSearch blog for all Figma tutorials

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe