# how to create a frame in figma

Viewport: 1910x922 @1.25x

Playback: autoplay=false durationMs=3000 navBar=false arrows=true callouts=true browserBar=false browserTheme=light

1. [Intro] How to Create a Frame in Figma
   - body: This guide will walk you through the process of creating a frame in Figma. Follow these steps to successfully add a frame to your design project.
   - voiceover: This guide will walk you through the steps to create a frame in Figma, which functions as an artboard for your design projects.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b4wift0001la0c97p23rbo/cm9b56vch000j0ci69mimaa5p.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
1. step_01 [image] - Navigate to Figma.
   - source type: IMAGE
   - description: Open your Figma project
   - target: (998, 474), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (998, 474), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Open your web browser and go to the Figma website (https://www.figma.com). Log in to your account to access the Figma interface.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b4wift0001la0c97p23rbo/cm9b56z8n000l0ci6a5c37475.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b4wift0001la0c97p23rbo/cm9b4wnce000303humj7564ro.png
2. step_02 [image] - Select the Frame tool (F) from the top bar or press the F key.
   - source type: IMAGE
   - description: Select the Frame tool
   - target: (608.9564470264994, 652.8457796949008), rect: top=686.4000244140625 left=598.5 width=32 height=32
   - hotspots: 1
     - hotspot_01 (608.9564470264994, 652.8457796949008), rect: top=686.4000244140625 left=598.5 width=32 height=32
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: From the top bar in Figma, click on the Frame tool icon or simply press the 'F' key on your keyboard. This tool allows you to create frames on your canvas.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b4wift0001la0c97p23rbo/cm9b56z98000m0ci694m9c44h.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b4wift0001la0c97p23rbo/cm9b4wovi000403huxlsbux4t.png
3. step_03 [image] - Click and drag on the canvas to create a frame, or choose preset sizes from the right panel (e.g., Desktop, iPhone).
   - source type: IMAGE
   - description: Click on the canvas
   - target: (861.7672910929416, 451.9999962904326), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (861.7672910929416, 451.9999962904326), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Click and drag on the canvas to create a custom-sized frame. Alternatively, you can choose from preset sizes available on the right panel, such as Desktop, iPhone, and more.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b4wift0001la0c97p23rbo/cm9b56z9r000n0ci61pn22mvs.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b4wift0001la0c97p23rbo/cm9b4ws9c000503hu0zj8y7yi.png
4. step_04 [image] - The frame acts like an artboard — you can place elements inside and organize your design.
   - source type: IMAGE
   - description: Adjust the frame size
   - target: (826.7173950121821, 506.99995054174053), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (826.7173950121821, 506.99995054174053), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: The frame you created acts like an artboard. You can now place various elements inside the frame to organize and structure your design efficiently.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b4wift0001la0c97p23rbo/cm9b56zag000o0ci6clird0ld.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b4wift0001la0c97p23rbo/cm9b4wusd000603huf8i3f6w7.png
6. [Outro] Frame Added !!
   - body: Now that you've created a frame, you can start adding design elements within it or create multiple frames to organize your project better. Continue exploring Figma's features to enhance your design workflow.
   - voiceover: With your frame created, you can now proceed to add text, shapes, images, and other design elements to bring your project to life.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b4wift0001la0c97p23rbo/cm9b56x17000k0ci6dr3i4m99.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM

Source: https://share.layerpath.com/share/cm9b4wift0001la0c97p23rbo/tour