Framer
First impression of Framer Sites
Today, on a whim, I decided to try Framer Sites and see what all the hype is about.
It was a really fun hour of learning and building. After one hour, I had nearly recreated the home page of my personal website and deployed it instantly with a click.
Here are my first impressions:
What I loved
Deploying a design instantly to the web is really fun — I clicked publish and was quite surprised to see just how fast my website appeared live on the internet with a shareable URL. Maybe one second? Or two? Of course, there wasn't a whole lot to the page — it's an HTML file with a bunch of inline styles. Yet, it's profound to go from a rich canvas-like editor to the public internet with a click.
It's quite often too hard to make and deploy changes in code. This friction is gone with Framer Sites, which I suspect will motivate many more designers and developers to move their personal sites or portfolios over to this system because it will be the fastest way to adjust a color, or fix a typo, and have that change online instantly.
This does make me wonder, however: what's the story for teams on Framer Sites? Maybe this is on the roadmap, and first things have to come first. But it's pretty wild that I can totally break my site and click publish without any kind of system (as far as I can tell) for testing, previewing, or approving changes.
Exceptions abound. But in my experience, I've been able to run the furthest, the fastest, when collaborating with people in complimentary roles where we each took the time and effort to speak each other's language and build a shared understanding of what we're really working towards.
Exceptions abound. But in my experience, I've been able to run the furthest, the fastest, when collaborating with people in complimentary roles where we each took the time and effort to speak each other's language and build a shared understanding of what we're really working towards.
It's not hard to squint and see where this is going: the ability to create, open source, and distribute Framer components through some kind of plugin system or package manager or storefront. I imagine that, like Framer Sites' premium themes offering, there will even be opportunities for people to monetize individual components to save others hours of time. Remember, Tailwind UI is a multi-million dollar business.
But of course, the real value will be in creating component systems for internal teams to design, compose, and distribute. Removing the Figma-to-code handoff process entirely for a design systems team is an exciting possibility.
Blurs the lines between configuration and design — Building a website from scratch is a lot of fun. But for me, I really can't stand that last 1% of the process where I have to wire up analytics, configure a favicon (and inevitably spend half an hour figuring out what the hell a `.ico` file even is), audit the open graph data for every page, and then keep re-deploying to make sure things look right in production.
Framer is simplifying all of that, and bringing site configuration directly into the editor. While today's version of site analytics and deployment history feel like a v1 (e.g. it doesn't look like it's possible to revert to a previous deployment, even though they're all technically available), it's clear to see the ambition here: Framer Sites will become a proper end-to-end site builder and manager.
Framer's visual design is beautiful — the editor itself is beautiful, and across the board Framer is a tool that reflects a deep reverence for craft. They care about having clear affordances for inputs and drop-downs and buttons, the editor supports dark mode out of the box, and it feels like there aren't dusty corners to be found in any part of the app. The tool is polished as hell, visually speaking.
What needs work
Keyboard shortcuts, bulk editing, and direct selection need work — trying Framer Sites made me appreciate just how fast and fluid navigating Figma is with keyboard shortcuts. Framer isn't there yet. Navigating, selecting, and editing felt clunky, and I found myself struggling to get to the right place in my layers list or finding the right property to edit in the properties panel.
There are also more subtle things that feel off, like the way the layers list handles selection, deselection, expansion, and collapsing. Framer tries to be intelligent about how the layers list expands and collapses based on your selection and actions, but almost never seems to end up in a state I would have predicted. For example, if I expand all of the layers in the layers list, then select an individual layer, then click off of that layer onto the canvas, the entire layers list will instantly collapse.
These kinds of details make it hard for me to keep my place in the editor, get to the thing I'm trying to edit, or feel in control.
The layout system is hard to understand and buggy — it took me a while to understand what Sites means by `auto`, `fill`, and `fraction`, and I found myself constantly fumbling with which method to use for my particular layout needs. This is partly a problem of naming — for example, I never thought of `fraction` as a layout property, but of course that's what is meant when typing `1fr` in a CSS grid. Changing other layout properties, like setting the width to `auto`, did not do what I expect (fill the space available).
It's very possible that my brain is getting frozen somewhere between Figma's Auto-layout model, CSS grid, flexbox, and now this new tool, where at any moment in time I wasn't quite sure which option would behave in which way.
The output markup is messy — it was interesting to compare the Framer Site's markup output with my actual website. Of course, in both cases, I'm sure there is room for manual optimization. But despite my best effort to use the fewest number of nested frames and stacks possible, Framer Sites often ended up with a single text layer buried 8 to 10 levels deep in nested divs.
Does this matter? Honestly, maybe not. I think developers will care if they can be bothered to inspect element and see what's going on under the hood, but I suspect that as long as a Framer Site's output is fast enough, that no customer will ever notice.
But hey, let's take a stand: we should hold our tools to a high standard! And clearly there's room for Framer to improve their code generation so that users aren't shipping gnarly nests of divs to the world.