{"schema":"https://www.layerpath.com/schemas/public-document/v1","version":1,"id":"/learn/how-to-create-a-frame-in-figma","route":"/learn/how-to-create-a-frame-in-figma","canonical":"https://www.layerpath.com/learn/how-to-create-a-frame-in-figma","title":"How to Create a Frame in Figma","h1":"How to Create a Frame in Figma","description":"Discover the step-by-step guide on how to create frames in Figma. Enhance your design skills and streamline your workflow with our expert tips.","archetype":"tutorial","blocks":[{"type":"heading","depth":1,"children":[{"type":"text","value":"How to Create a Frame in Figma"}]},{"type":"paragraph","children":[{"type":"text","value":"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."}]},{"type":"layerpathTour","sourceUrl":"https://share.layerpath.com/e/cm9b4wift0001la0c97p23rbo/tour","canonicalUrl":"https://share.layerpath.com/e/cm9b4wift0001la0c97p23rbo/tour","id":"cm9b4wift0001la0c97p23rbo"},{"type":"list","ordered":true,"items":[{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Select the Frame Tool"}]},{"type":"text","value":" – Press "},{"type":"inlineCode","value":"F"},{"type":"text","value":" on your keyboard or click the "},{"type":"strong","children":[{"type":"text","value":"Frame tool"}]},{"type":"text","value":" from the top toolbar."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Choose a Preset (Optional)"}]},{"type":"text","value":" – In the right panel, pick a device/frame preset like iPhone, Desktop, or Custom."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Draw the Frame"}]},{"type":"text","value":" – Click and drag on the canvas to create your frame manually, or click a preset to auto-generate one."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Adjust Dimensions"}]},{"type":"text","value":" – Use the right sidebar to tweak the size, position, and layout of your frame."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Add Elements"}]},{"type":"text","value":" – You can now add text, shapes, images, and components inside your frame."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Rename the Frame"}]},{"type":"text","value":" – Double-click the frame's name in the layers panel to rename it for better organization."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Done"}]},{"type":"text","value":" – Your frame is ready to use as a container for UI elements, layouts, or designs."}]}]}]}],"tours":[{"type":"layerpathTour","sourceUrl":"https://share.layerpath.com/e/cm9b4wift0001la0c97p23rbo/tour","canonicalUrl":"https://share.layerpath.com/e/cm9b4wift0001la0c97p23rbo/tour","id":"cm9b4wift0001la0c97p23rbo"}],"plainText":["How to Create a Frame in Figma","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.","https://share.layerpath.com/e/cm9b4wift0001la0c97p23rbo/tour","Select the Frame Tool – Press F on your keyboard or click the Frame tool from the top toolbar.\nChoose a Preset (Optional) – In the right panel, pick a device/frame preset like iPhone, Desktop, or Custom.\nDraw the Frame – Click and drag on the canvas to create your frame manually, or click a preset to auto-generate one.\nAdjust Dimensions – Use the right sidebar to tweak the size, position, and layout of your frame.\nAdd Elements – You can now add text, shapes, images, and components inside your frame.\nRename the Frame – Double-click the frame's name in the layers panel to rename it for better organization.\nDone – Your frame is ready to use as a container for UI elements, layouts, or designs."]}