People are going crazy over Framer X. I went to the Framer X demo in NYC. Here’s everything I know about Framer X.

I’ve written previously about the recent merging of design and development. The timeline goes like this:

• 2016: AirBnb/Jon Gold’s React-Sketchapp allows you to render React Native components to a Sketch artboard.
• 2017: Webflow allows you to build web pages visually (with some slick CSS/JS effect functionality) and output code for publishing.
• 2017: Brainly/Konrad Dzwinel’s Html-Sketchapp allows you to render any HTML element to a Sketch artboard.
• 2017: Seek/Mark Dalgleish’s Html-Sketchapp-cli. Wraps up Brainly’s process into a single terminal command.
• 2018: Google debuts a suite of tools to deliver tight mapping of Material Design UX assets to Material Design code assets. This includes Material Theme Editor and Gallery.io, a handoff tool for Material Design.

Now, Framer is having its moment with Framer X.

I started paying attention to Framer X because of the insane testimonials it has received from pillars of the community:

Jon Gold of AirBnb tweets “Framer X is so good that I have no intention of trying to build design tools again.”

Daniel Eden of Facebook tweets “We got a demo of Framer X and I can confirm: it’s going to be the best commercially-available design tool available.”

These are fairly positive endorsements 😱😱😱

Yet a Google search for “Framer X” online yields little. Framer itself has only put up a teaser trailer which pans and tilts across the new interface.

So I went to the Framer X demo in NYC to understand what was going on. It was presented by Krijn Rijshouwer, a team member in town from Amsterdam who’s been part of Framer since early days. After the demo, I asked Krijn all about Framer X functionality. He was super cool and helped me understand what is and isn’t possible.

Here’s the general flow and functionality of Framer X.

I’ve done my best to accurately understand, and describe here, the functionality of this tool. Krijn noted they’re still evolving the API every day, and some processes may be different in the production version.

Starting a new Framer X project

You can now start a new Framer X file from a Screen or “from Code”. When you create a project “from Code”, two special things happen:

1. Framer X outputs a project directory populated with a NPM-style node_modules folder and a set of .tsx (TypeScript) files.
2. Your text editor of choice (ie VS Code) auto-opens up beside the Framer X window. The primary .tsx project file opens. It contains starter React code generated for the user.

👆This is already quite a novel start. Framer X outputs an NPM-style directory which contains a node_modules folder and React code files which will look familiar to any developer.

The primary .tsx file (let’s call it App.tsx) contains an import statement for React, a style object (const style = {…}) , and React Component code with props and JSX syntax.

The biggest reveal in the teaser is probably this new Component asset option.

As you continue working with Framer X, you’re offered a new 👆“Component” asset option on the left-side menu, which visually generates component-style groupings of text and shape elements. If I understand correctly, each Component generates its own .tsx React Component file. You can access the .tsx file to copy and paste the code manually into your main App.tsx file.

TL;DR: Framer X offers a back-and-forth workflow between visual assets in the Framer X window, and React code in a text editor.

When you edit the React code in your text editor, the Framer X window re-renders to reflect the code changes (This novel interactivity will be familiar to anyone who experimented with React-Sketchapp.)

Back in Framer X: You can change the component’s color, scale, and position. You can add UX animations like a rotation or a bounce. When you save the Framer X project, the code changes are made not in your App.tsx file, but in an adjacent, Framer .tsx project file. To incorporate the changes from Framer X to your codebase, you can manually copy and paste the code into your App.tsx file.

With this Framer X/text-editor dual context, each designer/developer will favor one interface over another, depending on their comfort level working within a codebase.

What else is in Framer X?

There are more interesting features which push Framer further away from a design tool like Sketch. One feature involves out-of-the-box interactivity of UI elements like toggles, switches, and text fields. The other feature involves a connected App Store-like environment for building, sharing and distributing these interactive UI elements.

Wrapping up

For Designers: Framer X allows designers to work visually and generate React code without a developer. They can build UI elements and animations which output TypeScript for handoff. I can envision this being a comfortable way for visual designers to get their feet wet working with code.

For Developers: Framer X is a novel tool for manipulating React Components outside the text editor. Devs who are comfortable in a code context (ie React , CSS and libraries like Zeit/Guillermo Rauch’s styled-jsx and Max Stoiber’s / Glen Maddern’s 💅styled-components) will probably favor working in the text editor.

I mentioned to Krijn that Framer X feels sort of like rendering code to a browser window, and then being able to manipulate the elements right in the browser window. He agreed. It’s a nice way to develop an interface.