10 Framer Tricks I Wish I Knew Sooner

Ryan Hayward

After two years in Framer, here are the ten tricks I use every single day. A few of these genuinely annoyed me when I found them, because of how much time I'd wasted not knowing.


  1. Copy and paste effects. Build an appear or scroll effect once, then right-click, copy, copy effects, and paste it onto any other layer. No more rebuilding the same animation across every section.


  2. Export from the canvas. On the desktop app, select any frame, scroll to the bottom of the properties panel, and export as PNG or JPEG at any scale, just like Figma.


  3. Canvas pages. Need to design something that shouldn't appear on the live site? Use a canvas page. It's a free-form space that never publishes, perfect for logos, graphics and working assets.


  4. The Workshop plugin. Free plugin from Framer that lets you build code components with AI. Prompt it, and it generates a working component you can drop anywhere. Great for anything Framer can't do natively.


  5. Text and colour styles. Global styles you reuse everywhere. Change one, and it updates across the entire site. Essential for consistency and painless rebrands.


  6. Scroll sections. Give a frame a scroll section ID, then link a button or nav item straight to it. Set the link to smooth, and it glides down to that section.


  7. Image filters. Select an image, open styles, hit the plus, and you get blur, brightness, contrast, grayscale and more, all in Framer, no Photoshop needed.


  8. Component folders. Rename a component as "Folder Name / Component Name" to organise your components into folders. Go deeper with more slashes. A lifesaver on bigger sites.


  9. Staging and version control. On paid plans, push to a staging domain first to check changes live before they hit production. Roll back to an older version if something breaks.


  10. Draft pages. Working on a page that isn't ready? Mark it as draft so it lives only inside Framer and won't publish, even when you ship other updates.

Hopefully one or two of these made you go "I wish I knew that sooner", because every one of them did that to me.

Keep reading

Framer vs Figma Sites: Which Should You Use?

An honest, unbiased comparison of Framer and Figma Sites across design, collaboration, publishing and scaling.

Mar 10, 2026

How to Optimise Your Framer Site for SEO

A practical crash course on getting your Framer site found, covering site settings, page-level SEO, headings, alt text and performance.

Feb 26, 2026

5 Hard Truths About Learning Framer

After teaching thousands of designers Framer, here are the five mistakes I see on repeat, and how to avoid them.

May 21, 2026