16 Oct 2024
My Framer beefs 2024.
Let’s start this article by professing my love for Framer. I’m a huge fan. It has completely revolutionised the way I work and how I run my agency. You can read more about that here.
However, no relationship is perfect. We all have small gripes with the ones we love, like how they load the dishwasher, leave hair in the plughole, or never remember to lock the front door when they’re the last one home! So, let me share my own bugbears with Framer:
Setting text styles
Text styles are a powerful tool in Framer, offering a clear direction for your site’s look and feel once set up. However, the process can be quite time-consuming, sometimes taking me half a day to fully configure. When creating text styles, you define elements like the style (H1, H2, P), font, weight, spacing, and text size. Framer allows you to set different font sizes for each breakpoint, which aligns perfectly with how I’ve worked in the past. The issue arises when you want to set up another style. If you duplicate an existing style, Framer doesn’t retain the breakpoint-specific font sizes, meaning you have to re-enter them manually. Additionally, you can’t change the style type – if you duplicate an H1, for example, you can’t simply turn it into an H2. Instead, you’re forced to recreate all the settings manually for the new style.
Fixes:
Ensure the duplicate option copies all settings, including breakpoint font sizes. Add a feature that allows you to select the heading style when duplicating. For example, if I duplicate an H1, I should be able to retain the settings but change the heading style to H2.
Nice to have:
The ability to add scaling options for font sizing would be a great improvement. Currently, I use Utopia to set my type scales and manually input the scaling logic into Framer. If Framer offered built-in scaling options for each breakpoint, it would significantly speed up workflows.
Components
I love using components in Framer. Coming from Figma, it was an easy process to understand and implement. However, after using them in Framer for a while, I’ve noticed a few things that don’t work perfectly. Have you ever created a component with variables, only to copy it later and find that, 9 times out of 10, all the variable links are missing? You then have to manually relink each variable in the new component.
Another issue I’ve encountered with components involves hover and pressed states. Imagine you’re designing a card with a hover state that moves an arrow 8px and a pressed state that moves it an additional 4px. If you want to create a variation of this card, such as a landscape version, copying the component won’t retain the hover and pressed states, instead it creates unlinked variants of the hover and pressed states. This forces you to painstakingly cross-check the original component’s states and reapply them to the new variant.
Fixes:
Fixing the missing variable link bug is a simple win. As for copying hover and pressed states, the solution is straightforward: if the user selects a variant that includes hover and pressed states, those should be retained when pasted. Conversely, if the user selects a variant without selecting these states, they should be excluded during pasting.
Handling images in the Framer CMS
Framer’s CMS is brilliant and has improved significantly with the introduction of collection references. However, the way the content section handles images still needs work. When I place an image in a content section, I have very limited control over its appearance. There are image styles but you can only adjust the radius and shadow, there’s no control over padding or alignment. Additionally, you can only apply one image style per content section meaning you can’t have multiple image styles within the same section. The biggest issue is image sizing. Adding images to the CMS feels random. If you size them to fit full width, they often fill only three-quarters of the space. I still don’t understand why an image that’s 2560px wide only fills a third of a container that’s 1113px wide.
Fixes:
Add padding and alignment controls to image styles, and allow these styles to be applied to individual images within the CMS content section. Additionally, I’d love to see container rules for images, enabling me to set the width to fill and the height to scale, similar to how it works within Framer’s regular design environment.
Nice to have:
The option to add and style captions for images is a feature commonly found in most CMS platforms and would be a welcome addition to Framer. While accessibility in Framer is generally strong, it’s disappointing that when adding images to a content section in the CMS, you can’t include an alt tag—this is a missed opportunity for improving accessibility.
Bullet and numbered list styling
Clients love bullet points. They want them on their websites, it’s just a thing. You’d think this would be straightforward in Framer, and to some extent it is, but the functionality is pretty bare bones.
Firstly, I’m not sure how to create a bullet list in Framer without pasting bullets from a word document. If I use the shortcut ‘Alt + 8’, I just get a non-formatted bullet. At least with numbered lists, Framer figures out what you’re doing. But if you want to change the styling of the list, you’re out of luck. There’s no way to adjust the list’s inset or spacing, which leads to unattractive, hard-to-read lists, especially when there’s a lot of text. In the past, I’ve had to ‘hack’ lists by creating a set of stacks with one bullet point in each, which gives me control over the styling but is clearly an accessibility no-no.
Fixes:
Add the ability to insert list styles, including options for list spacing and inset values so we can easily create beautiful, readable lists. Add bullet and numbered list buttons to the properties menu, and make the bullet shortcut actually work.
Nice to have:
Don’t assume I always want to start my numbered list at 1. If I begin my list at 20, I still want the numbered formatting to function properly. Also, I might want my list point to be a different colour to the text.
Fin.
Those are my Framer beefs of 2024.
Some of these gripes I have posted on the Framer Community Feature Request board. There are a lot of requests to work through so who knows how they prioritise them. I hope the Framer gods see this and implement some of my suggestions. It would be a shame to include the same beefs for the 2025 edition.
P.S. The title of this post was inspired by one of my favourite comedians David O'Doherty (watch from 1:18).