Nora 1mo
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
Juan Peces
Spain. es/en/fr
Spain. es/en/fr
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?
Hello! Are you guys familiar with this new UI kit / Template pack for Framer, called Blankit that launched yesterday? There is not much 'About' information, but it seems to be the UI kit that Fouroom has been working on for some time and now got its own brand. Could you please confirm, @Fouroom?
I have to say it's the cleanest Framer UI kit I've seen so far, and the design is very ellegant. I wish I could have a peek behind the scenes!
If anyone has more information, please share.
#UIkits #templates
Check it out: https://blankit.supply
Forget templates. We need to talk about UI Kits for Framer. Here are some suggestions for @Framer, from a user's point of view:
1. Buy the ultimate UI kit: Untitled UI and/or create a bespoke Framer plugin. (see https://www.untitledui.com/)
2. Add Relume-grade capabilities to that kit. They nailed it, but they're married to WF.
3. Create a dedicated team for UI Kits.
4. Start a Certified by Framer® UI kits scheme (for QA).
And a question for you seasoned developers: What is your favorite UI Kit for Framer?, Have you found a Framer UI Kit that actually works flawlessly, one that does not require tweaking mobile media queries?
Thank you!
#UIKits #FixingFramer
(Disclaimer: I'm learning the tool, but I've been following Framer for some time now)
Not to be a pesky community member, but I do have some desiderata for the dev / community team at @Framer:
1. Please let users increase the UI size with the standard Cmd/Ctrl + shortcuts. Or kindly send a cheque for new prescription glasses, thank you. Even Jakob Nielsen would approve.
2. Please make it mandatory for community / creator profiles to at least list their country in their profile. Or make sure it shows automatically.
3. I used to be able to add to a Notion db a particular Framer.com web page very easily with the Save to Notion Chrome plugin. But if I use the in-app Community silo, I can't do that. Maybe you guys could put an icon to see the web version of a particular post / resource page, so people can jump into the open web real quick?
We may be chickens, but we are free-range chickens! 😆 🐓
Thank you / Dankje / Merci, nois
So, @Framer, tell us again: how exactly are people supposed to bookmark and organize templates and components in this new recontramarketplace?
I would say the ability to save essential resources and to put them in personal folders is the most needed feature. E.gr.:
Saved/Templates
Saved/Components
Saved/Vectors
Saved/Code overrides
Saved/AI files
...unless you think that "likes" is a proper asset organizing system.
A neverending stream of content, à la social network, may look cool, but users need folders, personal bookmarks, organization. Especially when curation has been mostly set aside. I would say the two most important letters are UI, not AI.
Also, congratulations on the dev effort. Great job. But don't discard non-AI-related UX.
Best
