Visual website builder with design tools and CMS

How to Record Framer

Record Framer at 100% canvas zoom with visible property values. Guide for website building tutorials, component design, and CMS setup recordings.

When you’d need to record Framer

Website building tutorials

Record the full Framer workflow — add sections, configure layouts with Framer's auto-layout system, apply effects and animations. Framer's visual builder is powerful but has a learning curve that video tutorials flatten.

Component and interaction design

Record creating reusable components with variants, hover states, and scroll-triggered animations. Show the component editor, define variants, and preview the interaction.

Framer CMS setup tutorials

Record CMS collection creation — define fields, add content, bind to design components. Framer's CMS approach differs from Webflow's, and video walkthroughs prevent confusion.

Template customization demos

Record how to customize Framer templates — swap images, change text, adjust colors, modify layout. Template sellers and Framer showcase templates as video demos.

Recommended settings

Resolution

2560x1440

Frame rate

30fps

Audio

Microphone only

Capture mode

Window Capture

Things to know

•Framer's canvas is zoomable like Figma — but zoomed-out views make website text and component details unreadable on video
•The properties panel (right side) shows component settings, layout options, and effect values in compact form elements
•Framer's preview mode opens the site in a new window — you may need to capture both the editor and preview
•Project names and staging URLs (project-name.framer.app) are visible in the browser tab and editor header

Step-by-step

1
In Screenify Studio, select Window Capture and pick the Framer window.
Record at 1440p — Framer's properties panel has small spacing values, font sizes, and effect parameters.
2
Open Framer in Chrome. Check the project name in the editor header and browser tab — staging URLs follow the pattern project-name.framer.app. Rename the project if it reveals a client name.
3
Set the canvas zoom to 100% (bottom-left zoom control). Framer's canvas can zoom out to show the full page layout — useful for planning but the text becomes unreadable in recordings.
4
Close panels you won't use. Framer shows a left panel (layers/assets/pages) and right panel (properties). Toggle the left panel with the sidebar icon if you don't need it — more canvas space means cleaner recording.
5
When selecting elements on the canvas, click and WAIT for the properties panel to update. Framer's properties panel shows layout, sizing, styling, and effects for the selected element — give viewers 2 seconds to read it.

Pro tips

Auto-zoom on the properties panel. Framer's right panel shows width, height, padding, gap, font properties, and effects in compact rows with 11px values. When you adjust a gap value from 16 to 24, auto-zoom catches the interaction and zooms in — viewers see the exact property and value.

Show the preview alongside the editor. After making changes in the Framer editor, click Preview (top right) to open the live site in a new window. Show viewers the result of their build. Editor work without preview is like cooking without tasting.

Demonstrate auto-layout before building. Framer's layout system (stacking, alignment, spacing, padding) is its foundation. Before building a section, show how auto-layout works on a simple example: add a frame, set direction to vertical, add spacing. This 30-second demo saves viewers hours of confusion.

Record component variants one at a time. When creating a component with 3 variants (default, hover, active), configure one variant fully, explain it, then switch to the next. Don't configure all variants simultaneously — the properties panel changes are too fast to follow.

Common mistakes

Recording with the canvas zoomed out. At 50% zoom, the page text is microscopic. Section headings become gray smudges. Always zoom to 100% and scroll to the section you're working on rather than showing the entire page at reduced zoom.

Skipping the preview after building. You spend 10 minutes configuring a section in the editor but never show how it looks live. Click Preview to open the site. Scroll to the section. Show responsive behavior. Editor-only tutorials are incomplete.

Not explaining Framer's auto-layout system. You click a frame and set 'Stack direction: vertical, gap: 16' without explaining what that means. Viewers copy the values without understanding the layout model. Explain the concept briefly before showing the implementation.

Showing the staging URL to public viewers. Your Framer staging URL is project-name.framer.app. If this is a client project, the URL reveals the project name. Mention this or rename the project before recording.