Framer Sites first impressions

Today, on a whim, I went live on YouTube to try Framer Sites and see what all the buzz is about. You can watch the recap here.

It was a really fun hour of learning and building, especially because many people on the Framer team were in the stream to answer questions and guide me when I got stuck. 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 of Framer Sites:

What I love

Deploying a design instantly to the web is really fun — at the end of my stream, 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.

I've written in the past about why you probably aren't updating your personal site, and one of the key reasons is that it's quite often too hard to make and deploy changes. 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.

Components and integrations — while I didn't get a chance to play with these during the live stream, I poked at the Insert menu after the fact to discover ready-made components for forms, social media posts, and common page components (like navigation bars and footers). How cool is that? In my design tool I can drop in a fully functioning form for an email newsletter, or I can simply paste a URL to render a dynamic tweet directly on my page. These are the kinds of "hacked-on" things that you might hope to see in a Figma plugin, but come baked directly into Framer's component system.

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.

One simple example: the layers list lacks a shift + enter shortcut to move my selection up to the nearest parent. In other cases, it was tricky to command + click to directly select a frame or layer on the canvas; I found myself frequently smashing double-click to get to a layer or frame.

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.

In terms of bugs, if you watch my stream from 1:14:00, you can clearly see how my layout settings for individual layer continued to get reset to a fixed width as I adjusted surrounding frames and parent stacks. If I was doing something wrong, then the tool's behavior should change so that I don't have to constantly reset the layout flow of every element.

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.

What's next

I'll keep playing with Framer Sites, but it's not developed enough to replace the custom setup I have for my personal site today. But if I needed to spin up a new landing page for a side project, it would probably be perfect.

The Framer team was incredibly responsive to my feedback mid-stream, and I know they're going to work quickly to address many of the concerns above.

Next time, I will spend more time learning about the component system, interactions, and creating multi-page sites.

As a meta note, if you liked today's live stream, or want to see more video content, please let me know! Subscribe to my YouTube channel or write a comment below with feedback and ideas for other topics you'd be interested to see in future videos.