Framer lessons

A practical look at Framer AI: generate a page to start from, build code components with Workshop, and generate imagery with AI plugins.

Add dynamic filters to a Framer CMS collection so visitors can search and filter themselves, stack multiple filters.

Add search to a Framer site with the built-in component: scope it to a CMS collection, set the placeholder.

Use code in Framer without being a developer: create a code component, expose settings with property controls.

Add languages to a Framer site: create a locale with its region and slug, translate with AI and review it.

Add Lottie animations in Framer using the LottieFiles plugin: browse and recolour an animation, then control its loop.

Build a collection list in Framer: design one card, connect each element to a CMS field, then set the source.

Build a CMS detail page in Framer: lay out one template, bind the fields, pull in referenced collections.

Add custom cursors in Framer: set web cursors per page or element, use your own component as the pointer.

Build a bento grid in Framer with nested frames: a holder split into sections, fill versus fixed heights, consistent gaps, then content inside each card.

Build a navbar component in Framer that sticks to the top, works on every breakpoint.

Build an infinite scrolling logo ticker in Framer: insert the Ticker component, connect frames from off the canvas, then set speed.

Use scroll sections in Framer to link straight to part of a page, set where the scroll stops with a Y offset.

Add a carousel or slideshow in Framer using the built-in interactive components: connect cards from off the canvas, fix the sizing.

Add video in Framer with YouTube, Vimeo or your own file, and build a full background video by setting it to 100% and positioning it absolutely behind your.

Use the Framer Agent properly: reference pages, CMS collections and colour styles with @, add skills with /, pick the right model.

A tour of the Framer editor: the freeform canvas versus breakpoints, pages and layers, the insert and layout menus, preview, and the properties panel.

Make a Framer site accessible: write useful alt text, check colour contrast and typography, and use the per-layer accessibility settings.

Animate a navbar in Framer using component variants: open a mega menu on hover, animate the bar in on page load with a start state.

Connect Shopify to Framer with Frameship: create a custom app, set the Storefront API scopes, sync products into the CMS.

Learn how breakpoints work in Framer: where desktop, tablet and phone start, which edits cascade down, and how to fix the layouts that break.

Build a form in Framer, name every input so submissions are readable, and connect it to email, a webhook or Google Sheets.

Build a popup modal in Framer with a fixed overlay: open it from a button, centre the content, add a close button.

Learn how to add a lightbox to any image in Framer with the native effect, then style the max width, padding, backdrop and transition.

Learn Framer's four overflow types, why hidden breaks sticky positioning, and how to build scrollable containers with per-axis overflow.