framer.top

Using the Drag Effect in Framer

The drag effect lets visitors reach right in and grab elements on the page — by making elements physically moveable in the browser. It might be more playful than functional — but one things for sure — it’s fun. In this lesson, I’ll show you how to make any element draggable with just a couple of clicks.Grab the remix file: https://www.framer.com/academy/lessons/framer-animations-drag-effectSign up: https://framer.link/ytFollow: https://framer.link/yt-xLearn: https://framer.link/yt-academy

Page Titles, Descriptions, and URLs (SEO Lesson 4)

Your title, description, and URL are often the first things people see in search results—so they need to make a strong first impression. In this lesson, learn how to craft clear, keyword-driven metadata in Framer that improves both SEO and click-through rates.Check out the full course here: https://www.framer.com/academy/courses/structure-for-visibility-with-seo-in-framerSign up: https://framer.link/ytFollow: https://framer.link/yt-xLearn: https://framer.link/yt-academyMB013MQ8YHMNWAA

Using the Loop Effect in Framer

Sometimes, animation doesn’t need a trigger — it just needs rhythm and flow. The Loop effect in Framer is perfect for things like pulsing indicators, moving backgrounds, or attention-grabbing icons. In this lesson, I’ll show you how to set up a looping animation and make it feel just right.Grab the remix link here: https://www.framer.com/academy/lessons/framer-animations-loop-effectSign up: https://framer.link/ytFollow: https://framer.link/yt-xLearn: https://framer.link/yt-academy

Mastering transitions and easing in Framer

A good animation isn’t just about making things move — it’s about how they move. Transitions in Framer let us control duration, easing, and even emulate real-world physics using springs. In this lesson, we’ll explore how to craft transitions that feel smooth, intentional, and expressive — whether you're fine-tuning a micro-interaction or choreographing an entire hero section.Sign up: https://framer.link/ytFollow: https://framer.link/yt-xLearn: https://framer.link/yt-academy

Optimizing Images, Icons, and Interactive Elements in Framer (SEO Lesson 3)

Learn how to add alt text, ARIA labels, and clear button text in Framer to make your site more accessible and SEO-friendly. Small changes here go a long way in helping people (and search engines) understand your content.Sign up: https://framer.link/ytFollow: https://framer.link/yt-xLearn: https://framer.link/yt-academyMB013MQ8YHMNWAA

Startups are hard, Framer makes one part easy. Your website.

Startups get the Framer Launch Plan free for a year. That’s $900 to design and ship your site. no setup, no developers. Just design and ship it. Apply now at https://framer.com/startupsFollow: https://framer.link/yt-xLearn: https://framer.link/yt-academy

Framer Update: Search for Pages, Layers, and Assets

This update adds search to the Pages, Layers, and Assets Panel in Framer. This makes it much easier to find what you need, especially in larger projects. Find Folders, Pages, Components, Styles, Layers, and more. You can hit ESC to clear the filtered value at any point. Plus, while working, you can use ⌘F on macOS and ⌃F on Windows to quickly focus the search input. Navigating big websites has never been easier. https://framer.com/updates/pages-layers-assets-searchSign up: https://framer.link/yt

Using Hover and Press Effects in Framer

Let’s start with the basics — how to make things feel alive when visitors interact with them. Hover and press effects are small touches that make a big difference — by giving visitors tangible feedback that makes it super clear if something is clickable in the first place — and if they’ve clicked it successful. In this lesson, we’ll walk through how to create these two effects in Framer in just a couple of clicks.Sign up: https://framer.link/ytFollow: https://framer.link/yt-xLearn: https://frame

Bringing websites to life with animation in Framer

Animation on the web isn’t just about making things move — it’s about making things make sense. When we hover, click, scroll — motion helps guide the eye, provide feedback, and make the experience feel alive. In this course, we’re gonna look at how to use animation in Framer to add clarity, not clutter — and bring our designs to life, while at the same time, improving the way people interact with our sites. But before we get tactical, let’s spend a few minutes getting philosophical.Sign up: htt

Framer Update: Link Decoration Styles

The July Update introduces redesigned Link Styles with full support for decoration styles, giving you complete control over how your links look and behave. There’s now a dedicated Decoration panel with settings for color, style, thickness, offset and more. These brand new properties will work anywhere, from standalone text layers to inline links from the CMS. Together with recent linking updates like Rel Attributes and Parameter Forwarding, linking in Framer is now more powerful than ever. https

Structuring Content with Semantic Tags in Framer (SEO Lesson 2)

Learn how to structure your content properly in Framer using semantic tags like headings, paragraphs, and layout frames. In this lesson, we’ll show you how to improve both accessibility and SEO by giving your content the meaning and structure it needs to be understood by screen readers, search engines, and users alike.Sign up: https://framer.link/ytFollow: https://framer.link/yt-xLearn: https://framer.link/yt-academyMB013MQ8YHMNWAA

Intro to SEO & Accessibility in Framer (SEO Lesson 1)

Get an introduction to SEO and accessibility in Framer. Learn how semantic tags, proper structure, and intentional content design can make your site easier to find and easier to use — for everyone.Sign up: https://framer.link/ytFollow: https://framer.link/yt-xLearn: https://framer.link/yt-academyMB013MQ8YHMNWAA

Framer Update: Wireframer Icons and Insert Sections

This update brings dynamic icon set support to Wireframer. It now generates pages and sections with relevant icons based on your prompt, using real Framer icon sets so you get all the benefits of Vector Sets, from visual browsing and search to fully customizable styles. We’re also bringing back Sections, redesigned to match Wireframer. You’ll find the new Sections in the Insert Panel, available in both light and dark mode. With the new Sections and Wireframer, rapidly designing layouts in Framer

Framer Update: Linking with Rel, Parameters, and more

The June Update brings brand new Linking features to Framer. We’ve redesigned our Linking UI across the app, enabling us to add more properties like Rel. Rel attributes define the relationship between the current page and a linked page. They help with SEO, protect user privacy, and give search engines context about a link’s origin and purpose. For example, setting Rel to No Follow tells search engines not to pass SEO value, often used for untrusted links. Similarly, Sponsored marks paid or spons

Vector Update: Icon Sets, CMS Support, Components

Today we’re introducing big updates to Vectors in Framer. Built-in icon sets now support more styles—like Stroke Width and Duotone—for more control. Properties like Stroke Width are also available as Variables in custom icon sets. Path editing is more stable, and keyboard support makes browsing icons faster. Plus, Vector Sets now work seamlessly with the Framer CMS, unlocking new use cases. Watch the video to learn more, and find the changelog here: https://framer.com/updates/vector-updatesSign

Localization Glossary

AI translations aren’t always perfect. Company names, slogans, and terms can get mistranslated or changed when they shouldn’t. With the Glossary feature, you can define exactly how specific terms should be handled across your site. Each term can be one or more words, case sensitive, and optionally translated. When 'Translatable' is on, you can provide the exact translation per locale. This ensures consistency across every version of your site, no matter the language. It’s especially useful for b

Creating advanced components with Workshop in Framer

Even with a solid idea, building a custom component from scratch can be a bit of a time sink—especially if you're not writing code or just trying to move fast.That’s where Workshop comes in. It’s Framer’s built-in AI tool that helps you go from idea to functional component with a simple prompt.Need a pricing calculator? A tab layout? An interactive image card? Just describe it—and Workshop handles the heavy lifting, giving you something that’s not just smart, but fully editable.In this video, we

Generating layouts with AI using Wireframer

No matter how experienced a designer you are, starting with a blank canvas can be daunting — and building up the structure of common layout patterns from scratch can be time consuming, boring, and redundant.Which is why we’ve created a new AI powered layout generator called Wireframer.Describe what you’re trying to build — and Wireframer generates responsive, purpose-driven but neutral layouts — that we can then take, modify, and style ourselves to end up with something completely our own.Let’s

Inline Content Editing

We’re introducing a new way to edit CMS content, inline, in context, and directly on the Canvas. Just double-click any layer with CMS content to start typing right away. Your changes will be instantly synced with the CMS, and you can edit a wide range of fields, including plain text, rich text, dates, references and images. When working with rich text, you can now type / to insert blocks like headings, lists, blockquotes, tables, images, and videos, all fully editable inline. This new editing ex

Wireframer: Dark Mode

Wireframer can now generate starting points in both light and dark mode. You can ask for dark mode in your initial prompt, or mid-chat. Any follow-up changes or additions will automatically match your chosen color scheme. Plus, Wireframer can generate even more unique sections, fully responsive, and directly customizable. Start your website in Framer. Now in dark mode. https://framer.com/updates/wireframer-dark-modeSign up: https://framer.link/ytFollow: https://framer.link/yt-xLearn: https://fra