Just released Fullscreen Navbar ✨
Here’s a closer look at the cinematic reveal, rolling menu trigger, oversized links, and layered entrance animation.
Juan Peces
Spain. es/en/fr
Spain. es/en/fr
Just released Fullscreen Navbar ✨
Here’s a closer look at the cinematic reveal, rolling menu trigger, oversized links, and layered entrance animation.
#ads #advertising
Hi, I am researching ad components and ad / advertising management plugins or solutions in Framer. Whether it is a single or CMS-based component, maybe even an HTML insert or a rotating roster of ads, how do you handle that for clients?
Best
Introducing Video Shaders. Shaders in Framer can now accept both images and video, which we’ve grouped under Media in the Insert panel. We’re first updating the Chromatic Aberration shader with video support and all-new controls. Videos even play in realtime as you’re editing properties. With our new properties, you can add glass-like curvature and dispersion to your videos and images with a few clicks. High-fidelity effects, web-ready, published in seconds. https://www.framer.com/updates/video-shaders
Responsive text in Framer usually means managing styles per breakpoint — type that steps instead of scales.
Meet Fluidity, it generates a fluid type scale, creates the Text Styles, and writes real clamp() CSS into your project so the published site scales continuously. No login, free.
Just shipped a big update to my Framer component!
The Infinite Horizontal Parallax Gallery now supports native CMS integration.
Check it out: https://framer.link/gsAQugH
🧭 Marketplace Navigation is here!
The Marketplace is now the primary Community landing spot, with a new sidebar for browsing categories and direct category links in the main framer.com nav. We also sharpened search results and refined Member page rankings to spotlight top contributors. Finding great resources, and the creators behind them, just got easier. You can read more on the Update Page
PS: There's also a small related change in the Desktop App, who can spot it first?
I thought I'd optimized every image on my Framer sites. Then I found the ones hiding in my CMS.
Hey everyone,
I've been building Framer sites for a couple years now, and before every launch I'd do the same ritual: go page by page, check file sizes, compress the heavy stuff, convert to WebP, add alt text. Tedious but manageable.
Then on one project I noticed a background image inside a component instance I'd never actually clicked into, still a fat 2MB PNG, completely untouched. And a bunch of CMS collection items with images that don't even show up when you're just scanning pages visually. I'd been doing this "thorough" audit for two years and still missing a chunk of every project. 😅
So I built a plugin to actually cover everything: pages, components, CMS collections, all of it, in one panel. Cleaned it up, used it on client work for a while, put it on the Marketplace as Image Manager.
What it does now:
🔍 Scans your whole project - pages, components, and CMS collections (image fields + galleries), not just what's visible on canvas
🗂 Groups everything by where it actually lives, so you're not hunting through pages
🚫 One entry per image, no duplicates from desktop/tablet/mobile breakpoints or component variants
⚠ Flags issues at a glance - oversized files, missing alt text
⚡ One-click optimize: resize + convert to WebP, applied straight to your project
✅ Bulk actions for fixing a whole batch at once instead of one by one
✏ Inline alt text editing for SEO and accessibility
Genuinely curious how the rest of you handle this: by hand, external tools like Squoosh/TinyPNG, or just letting it slide? And if there's something that would actually save you time here, I'm taking notes. 📝
Full disclosure, it's my own plugin, here if you want a look (€7, lifetime): [Link]
Happy to answer anything 👋
![I thought I'd optimized every image on my Framer sites. Then I found the ones hiding in my CMS.Hey everyone,I've been building Framer sites for a couple years now, and before every launch I'd do the same ritual: go page by page, check file sizes, compress the heavy stuff, convert to WebP, add alt text. Tedious but manageable.Then on one project I noticed a background image inside a component instance I'd never actually clicked into, still a fat 2MB PNG, completely untouched. And a bunch of CMS collection items with images that don't even show up when you're just scanning pages visually. I'd been doing this "thorough" audit for two years and still missing a chunk of every project. 😅So I built a plugin to actually cover everything: pages, components, CMS collections, all of it, in one panel. Cleaned it up, used it on client work for a while, put it on the Marketplace as Image Manager.What it does now:🔍 Scans your whole project - pages, components, and CMS collections (image fields + galleries), not just what's visible on canvas🗂 Groups everything by where it actually lives, so you're not hunting through pages🚫 One entry per image, no duplicates from desktop/tablet/mobile breakpoints or component variants⚠ Flags issues at a glance - oversized files, missing alt text⚡ One-click optimize: resize + convert to WebP, applied straight to your project✅ Bulk actions for fixing a whole batch at once instead of one by one✏ Inline alt text editing for SEO and accessibilityGenuinely curious how the rest of you handle this: by hand, external tools like Squoosh/TinyPNG, or just letting it slide? And if there's something that would actually save you time here, I'm taking notes. 📝Full disclosure, it's my own plugin, here if you want a look (€7, lifetime): [Link]Happy to answer anything 👋](https://image.mux.com/xYKQ7xu5GCWZnTZpxbIWuF78onlyQCVwdhe99uRmDZY/thumbnail.webp?time=0&width=640)
I was trying to find help on YouTube about the Framer CMS, but they only showed me very basic things. So I figured it out on my own and went the safer route.
So I wanna show you, how I am using @Framer components inside the CMS to power these different layouts.
Every Layout is built by CMS Detail pages using content rows. Each row is made up by 3 columns, and different variables toggle different width of those columns. Now I am still just using 5 rows.
Each row has 10 layout options defined in the component, each with ability to tweak further, such as alignment gap, spacing, padding min / max sizing.
Anyone went down the same path?
#featurerequests #PDF #print
PDF export for frames? It would be wonderful if this was a native feature, @Framer (re: the new PDF Export plugin by Chris Lacorte).
Also, to be able to use the Design canvas to export production-ready design assets, we would love to have certain controls in PDF Export like: color profile, resolution, print marks... A guy can dream!
The Print for Figma plugin is the way to go, Framer! : )
After a few weeks trying the different CMS-related features and types of binding, filtering, conditioning... in Framer, I have to say I am impressed by the quality of engineering behind this tool. Not saying it's perfect, but it's by far the best visual editor I have ever tried.
I am not talking about AI agents. I mean creating all the infrastructure and web of relations for a magazine or somewhat complex editorial type of project is a breeze once you get the hang of it.
—Tags/categories referencing.
—A content series collection to bind different entries within a same series, coverage o branded feature.
—Showing/hiding components when a CMS list is empty.
—Rendering different variants of a component based on conditions.
—Binding component variables to CMS fields with static or dynamic filtering.
—Maybe an "advanced CMS mode" would be great, to see two-way referencing in the DB (e.g. which news items are using this tag).
Using custom post types, custom blocks and custom fields in WordPress has been a nightmare for ages. Not to mention styling any custom element.
I do think Framer is a thing from another planet. I hope one day it will incorporate improvements like:
—better design system-management options
—an 'official' UI Kit (with curated community contributions) with dashboard widgets included.
— Official connectors to Baserow (also Dutch, btw), and a way to easily display the connected data with selected UI Kits (to build custom dashboards).
But overall, I really am in awe. Congrats to the team for the technical prowess. And especially to the Spanish members of @Framer, of course **
Which bento grid actually looks better to you?
1. one image, consistent feel
2. mixed images, more variety
#grids #cheatsheets
This is the grid that I am using so far for web design in the canvas. Right after applying the grid to each breakpoint,
A. I make a cheatsheet with column widths, margins and gaps, set in custom frames.
B. I place it on top of each breakpoint for quick reference, so I don't have to click a thousand times on the grid button.
C. I use it also on the components canvas, at the top of the page.
Am I the only one doing this? Someone at @Framer tell me it there's anything wrong with the grid I'm using or if I need professional help. 😀
You guys have a better approach? Please share!
Best
P.S. I'm using 12 cols for Tablet because it gives me better flexibility than an 8 or 6-col grid.
#CMS #Layout #Visibility
So the other day I posted on how I could not find a way to use the Visible Items variable to conditionally hide a header stack preceding a CMS list, since that variable is only available inside the CMS container (the DB call).
My workaround was to include the header in the CMS container, and then use the Visible Items to hide it when no items are shown.
Now, the logical flow for a header is to use a VERTICAL stack:
Top row: Header ↓
Next row: the CMS List
So that hack worked when I just needed a vertical stack for my CMS list, like this:
Header ↓
CMS Item 1 ↓
CMS Item 2 ↓
CMS Item 3 ↓
etc.
BUT.
Then I had another page where I also needed to hide the header based on the number of visible items, but in this case my CMS items list required a HORIZONTAL display (see images):
Header ↓
CMS Item 1 → CMS Item 2 → CMS Item 3
So, what's the problem, you say? Well, unless I am mistaken, within the realm of a CMS list container, if you try to encapsulate the single CMS item stack in a frame to change its flow direction (from vertical to horizontal, or viceversa) it will lose its connection with the CMS database, thus becoming a regular frame.
The solution that worked for me: keep the header with conditioned visibility inside the top CMS list container (so you can use the Visible Items condition), but use a GRID display, with a full column span for the header section, so that the header stays on top, as if it were part of a vertical stack, and use the standard column span you need for your horizontally displayed row of CMS cards.
I am sharing this workaround in case if helps anybody. Maybe it was obvious, but it drove me crazy. The Framer agent said it was not possible without a code component / override.
Best
P.S. Also, I hope this community serves its members as a mutual help forum as much as it serves as a showcase / marketplace. Human collective wisdom and mutual aid will always beat AI, profit sharing or portfolio exhibition. ✊🏻✊🏽✊🏿🙂
Tiny Framer update, but a really good one.
If you select two layers and add Auto Layout, Framer now preserves the existing spacing between them instead of automatically resetting the gap to 10px.
I've been waiting for this one for a long time.
#help
Hi! Do you good people know an easy way to use the number of rendered CMS items (items count) in a visibility condition?
// The context
In my Tags index page, I call the Tags CMS collection twice, to show the news items that match each Tag in the Tags collections (using the handy filter):
1. To display a 1st set of 3 news items of that collection where I show the featured photo and the title for each item.
2. To display the rest of the news items as a list, with the Content Offset =3 where I only show the date and the title.
// The problem
If you see the attached pictures, my problem is that, when no news items exist that match the 'tag' filter, the "Lista" is still showing. That is because I haven't figured out how to apply a visibility condition to the List stack, like this: if the CMS count in the "Lista" CMS recall is empty, hide the whole stack (heading and CMS list).
Any Framer wizard that knows how to do this properly? I can only find components that display a CMS count, but not any info on how to hide/show an element / stack based on the calculated number of CMS items shown in a list.
Thank you in advance for any help. This is my first Framer website and I am testing how well it adapts to the requirements of a news-based website. I will be posting my doubts here as I progress.
So far I am loving the tool. I do wish I could make the desktop app's UI bigger.
Best
P.D. Feel free to repost (thank you for that, @Framer) if you don't know the answer but you think your close network might be helpful.
Hyped to finally ship reposts with @Cal. Reshare posts you love straight to the For You feed and help great work reach more people.
Great work deserves to be shared!
Morning! Here's another QoL/QA idea for the @Framer team: When you stumble upon a plugin that you like on the Marketplace, like @Cédric's Type System plugin, you realise very soon that the (external) metadata for the Framer plugins CMS is actually very limited.
One thing Figma got right the 1st time is metadata. When you don't have much time, and your eyes are sore from browsing the marketplace, you just want to check the essential data in the metadata card, meaning:
—Last updated, which is the 1st indicator of a plugin's reliability (in the card, not in the description).
—The number of installs/remixes, which is the 2nd indicator.
—Clickable related TAGS. In this plugin's context, tags should be "Typography" and "Design System" (generic/wider scope) and "Text Styles Generator" (specific).
The related plugins section should reflect semantic / tag association. Right now, they are anything but Related (see screen grab).
I think @Jurre was working on a marketplace redo, so let's hope for the best [practices]. : )
#FixingFramer
P.S. Also, the search feature in the marketplace does not correctly process the é character, so searching for Cédric does not render anything. Quand même ...
P.S. If marketplace links to community resources are not allowed when posting in the community, how am I supposed to link to the plugin I'm talking about? Just make a screen grab and let users search for it?
