How to create a Frame in Figma

A flower that represents Figma with the text “Create a Frame” beneath it.

A step by step guide on creating a new artboard for a screen or a component in Figma.

Step One: Select the Frame tool

A screenshot of Figma that shows you how to select the frame tool. It's found on the top right, three buttons in and can be accessed quickly by selecting the Figma canvas and pressing "F" on the keyboard.

Either press F or click the Frame icon on the tool bar.

Step Two: Create a Frame

A screenshot of Figma that shows you a Figma Canvas with a 100px by 100px artboard, a custom sized artboard, an iPhone 14 artboard and a Desktop artboard.

There are various options that you can use to create a frame:

Click to draw a 100px by 100px artboard
Draw your own artboard
Presets (Phones, Tablets, Desktop, Presentation, Watch, Paper, Social Media, Figma Community or Archive)

A | Click to Draw

A screenshot of Figma that shows you how a 100px by 100px frame is created if you click anywhere on the Figma canvas after selecting the frame tool.

Click anywhere on the Figma canvas to create a 100px by 100px artboard.

B | Draw your own

A screenshot of Figma that shows you the area of the Figma canvas. If the Frame tool is selected you can create a new artboard by clicking on the canvas and dragging across it to form a canvas of your own size.

Click and drag anywhere on the Figma canvas to create an artboard of custom dimensions.

C | Preset Frame Dimensions

A screenshot of Figma that shows you how to select a frame preset. The options are found on the right side bar and allow you to select from preset sizes for common Phones, Tablets, Desktop computers, Presentations, Watches, Paper, Social Media, items from the Figma Community or an "Archive." Select a preset category to see what presets are available for that category and then click the one that you wish for it to draw the artboard on the Figma canvas.

Select a preset artboard dimension from the right side bar.

Looking for more tutorials on the basics behind Frames?

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

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.

How to create a Frame in Figma

A step by step guide on creating a new artboard for a screen or a component in Figma.

Step One: Select the Frame tool

Step Two: Create a Frame

A | Click to Draw

B | Draw your own

C | Preset Frame Dimensions

Looking for more tutorials on the basics behind Frames?

Any Questions?

Book a Free Consultation.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details