Visual web design and development platform with CMS and hosting

How to Record Webflow

Record Webflow Designer at 1440p with visible style values. Guide for web design tutorials, responsive walkthroughs, and client CMS training videos.

When you’d need to record Webflow

Web design tutorials and courses

Record Webflow Designer workflows — building layouts, styling components, setting up interactions. Webflow's visual interface is inherently video-friendly — there's no code to show, just the visual builder in action.

Client handoff and CMS training

Record how clients use the Webflow Editor to update their site — editing content, adding blog posts, managing CMS collections. Clients rewatch the video instead of messaging you every time they need to update a page.

Responsive design walkthroughs

Record how a site responds across breakpoints — desktop, tablet, mobile landscape, mobile portrait. Switch between breakpoints (top bar) to show how the layout adapts. Screenshots can't capture this flow.

Webflow Interactions and animations tutorials

Record complex interaction setups — scroll-triggered animations, hover states, page load animations. Show the Interactions panel settings AND the preview result. Animation tutorials need to show both the setup and the motion.

Recommended settings

Resolution

2560x1440

Frame rate

30fps

Audio

Microphone only

Capture mode

Window Capture

Things to know

•Webflow's Designer has a left panel (elements), right panel (styles), top bar (breakpoints), and canvas — all competing for screen space
•The Styles panel shows CSS properties in Webflow's visual interface — font sizes and spacing values are tiny text
•Webflow's canvas zoom changes the effective resolution of the preview — zoomed-out views make text unreadable
•Project names and site URLs in the breadcrumb bar may reveal client or project names

Step-by-step

1
In Screenify Studio, select Window Capture and pick the Webflow window.
Record at 1440p — Webflow's Styles panel has spacing values, font sizes, and color codes in very small text that needs the extra resolution.
2
Open Webflow Designer in Chrome. Check the breadcrumb/project selector at the top — it shows your workspace name, project name, and page name. Rename the project if it reveals a client name you shouldn't share publicly.
3
Set the canvas zoom to 100%. Webflow's canvas can zoom in/out independently of browser zoom — zoomed-out canvas makes text unreadable in recordings. Click the zoom percentage in the bottom-left corner > set to 100%.
4
Close panels you won't use. The Navigator (F), Assets (J), and Pages panel take up space. Use keyboard shortcuts to toggle them only when needed: F (Navigator), A (Add elements), S (Style panel).
5
Start recording. When selecting elements on the canvas, click the element and WAIT for the Styles panel (right side) to update before explaining. Webflow has a slight delay between element selection and style panel refresh.

For interactions and CMS tutorials

6
For Interactions tutorials, open the Interactions panel (lightning bolt icon in the right panel). Set up the trigger (click, hover, scroll), then add animation steps. Show the setup in the panel, then preview with the play button to show the animation result.
7
For responsive design recordings, build the desktop layout first, then switch breakpoints one at a time (top bar icons). At each breakpoint, show what breaks, fix it, then move to the next smaller breakpoint. This progressive approach teaches responsive thinking.
8
For CMS tutorials, switch to the Editor view (top-right > Editor). Show how to add CMS items, edit rich text, upload images, and publish. This is the view clients use — it's simpler than the Designer and is what you'll train them on.

Pro tips

Auto-zoom on the Styles panel. Webflow's Styles panel renders CSS properties visually — padding values (top: 20px, right: 40px), font-size (16px), and colors (#F97316) in 11px text. When you click a spacing value to change it from 20px to 32px, auto-zoom zooms in so viewers see the exact value change.

Cursor highlight on the canvas. Webflow's canvas highlights elements with blue outlines on hover and orange outlines on selection. With multiple nested elements (div > container > grid > column > text), the outlines overlap and it's unclear which element is selected. Cursor highlight adds clarity.

Record at 1440p for the Styles panel. Webflow's Designer packs dense CSS information into a narrow right panel. At 1080p, the Styles panel text becomes a blur of gray numbers after video compression. 1440p preserves readability for the spacing values, font properties, and color codes.

Use keyboard shortcuts to toggle panels. F (Navigator), S (Styles), D (Settings), A (Add), H (help) — toggling panels with shortcuts keeps the canvas maximized. Show the shortcut via keyboard overlay so viewers learn the workflow, not just the result.

Common mistakes

Recording with canvas zoomed out. Webflow's canvas at 75% or 50% zoom makes all text on the website preview unreadable. Viewers see a tiny website with microscopic text. Set canvas zoom to 100% in the bottom-left zoom control.

Not closing unused panels. Navigator + Assets + Components + Styles + Settings = the canvas has 200px of visible space. Close everything except the panel you're actively using. Toggle with keyboard shortcuts as needed.

Skipping the responsive breakpoint walkthrough. You build a beautiful desktop layout and end the tutorial. Viewers build the same thing and it looks terrible on mobile. Always show all breakpoints — desktop → tablet → mobile landscape → mobile portrait.

Not showing the published result. You spend 10 minutes in the Designer but never publish and show the live site. After making changes, click Publish (top right), then open the published URL to show the actual result. Designer preview ≠ published site — there can be differences.