Framer X

The future of design tools?

Framer X is the latest software by the team at Framer. They are trying to solve “digital product design from start to finish”. They introduced some very novel and unique features. So let’s see if Framer X is right for you.

I love what the team has done with Framer X and enjoyed working with it quite a bit.

What is awesome

Generally Framer X is pretty snappy with not to many bugs. The interface works and is easy to understand. And with the interactive onboarding, learning how to use it is a matter of minutes.

Prototyping

Building certain interactions in just a couple clicks is one Framer X’s strength. This includes scrollable and swipeable content with animations like “3D cube” or “cover flow”. And of course links that allow things like push, overlay, fade and even flip.

You get this in other tools as well, but Framer X pairs it with a great design tool. Reaching 80–90% of the quality of sketch. This is something I have not seen anywhere else yet.

Individual component overwrites

“Design components” are what symbols are in sketch. But there are some neat improvements over the original. You choose the text and image elements that are editable via the sidebar. You can also provide a name for those overwrites. While possible in sketch, framers approach feels more straight forward and organized.

Additionally you can change anything in any component instance. For example if I want to make the text bold in one instance, I can do it. Framer is pretty smart about it, changing the text color will still affect all instances.

By deselecting the checkmark an element will be hidden from the sidebar when creating an instance.

Code components

Creating custom components via react code sets Framer X apart from every other tool. React is widely used, so you might be able to reuse the same components that are used in your actual products. This also means that your front-end colleagues can help you create components to work with.

I created a simple text field with a placeholder and a lot of customization options within 30 minutes or so.

A simple input component with 8 options coded in react.

Below you can see the code for this component. While I do have some background in coding, I have never used react before, but it was pretty easy.

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { nominalTypeHack } from "prop-types";
const style: React.CSSProperties = {
  height: "100%",
  display: "flex",
  alignItems: "stretch",
  width: "100%",
  justifyContent: "left",
  textAlign: "left",
  color: "#8855FF",
  background: "transaprent",
  overflow: "hidden"
};
export class Input extends React.Component<Props> {
// Set default properties
static defaultProps = {
  placeholder: "Placeholder",
  textColor: "black",
  textColor: "black",
  textSize: "16px",
  caratColor: "blue",
  bgColor: "transparent",
  fontWeight: "400"
}
// Items shown in property panel
static propertyControls: PropertyControls = {
  placeholder: { type: ControlType.String, title: "Placeholder" },
  placeholderColor: {type: ControlType.Color, title: "Placeholder color"},
  textColor: {type: ControlType.Color, title: "Text color"},
  textSize: {
    type: ControlType.Number,
    title: "Text size",
    max: 300,
    min: 1,
    step: 1,
    unit: 'px'
  },
  bgColor: {type: ControlType.Color, title: "BG color"},
  fontWeight: {
    type: ControlType.SegmentedEnum,
    options: ["200", "400", "500", "700"],
    optionTitles: ["200", "400", "500", "700"],
    title: "Weight"
  }
  padding: {
    type: ControlType.FusedNumber,
    splitKey: "paddingPerSide",
    splitLabels: ["Padding", "Padding per Side"],
    valueKeys: ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
    valueLabels: ["T", "R", "B", "L"],
    min: 0,
    title: "Padding"
  }
}
render() {
let inputStyle: React.CSSProperties = {
  background: this.props.bgColor,
  border: "none",
  fontFamily: "SF UI Text, Helvetica Neue, Helvetica",
  color: this.props.textColor,
  padding: this.props.padding,
  paddingTop: this.props.paddingTop,
  paddingLeft: this.props.paddingLeft,
  paddingRight: this.props.paddingRight,
  paddingBottom: this.props.paddingBottom,
  fontSize: this.props.textSize,
  fontWeight: this.props.fontWeight,
  flex: "1",
  boxSizing: "border-box",
  outline: "none"
}
/* This is a hack due to a react issue with css pseudo classes like ::placeholder */
let id = `input_${Math.floor(Math.random() * 0xFFFF)}`
return <div style={style}>
  <style dangerouslySetInnerHTML={{__html: `
    #${id}::placeholder { color: ${this.props.placeholderColor} }
  `}} />
<input id={id} style={inputStyle} type="text" placeholder={this.props.placeholder} />
</div>;
}
}

Component store

Integrating the store prominently into the app, makes it is easy to install any component you need.

I heard that a team account allows you to share private component libraries via the store with your team. This is pretty neat if your company has a design system and many components. Getting started when joining the company or on a new project would be very fast.

As of now the capabilities are still fairly limited. Hopefully a better search and categories will be added in the future. Previews in the store, ratings and quality indicators, like on npm would make it even better.

What is missing

While I enjoyed working in Framer X, there were quite some things I was not happy with. Some can be easily solved, others might take a bit more work.

Structuring files

Both “Home” & “ Menu” are “artboards” the rest are components, instances and other elements.

When your project consists of more than a couple screens it is vital to be able to organize everything. Otherwise you waste half of your time finding screens. Sadly, Framer X is doing a pretty poor job here.

There are no pages and all layers including components are on the same page and layer list. There are also no dedicated artboards. “Frames” act like artboards but also as normal rectangles. Because of this, the layer list can’t even be divided by artboard like in sketch.

Finding components

Framer X components tray is missing easy organization methods like folders, favorites, etc.

The component panel includes a search (see bottom). You can also choose to only show components from a specific “package”.

Sadly, this is where it ends. Looking through big icon sets or entire design systems is very cumbersome. The team at Framer should definitely invest more time in this screen.

Folders in which you can mix installed components and your own would be one neat solution. “Favourites” and a “recently used” section would improve it even more.

For shared, public components adding keywords would be good. Currently the search only uses component names, so keywords would improve it.

When searching for “text field” components, “input fields” are not shown. Some intelligence to fix this would be good especially when using store components.

Starting with a simple search makes sense, but I hope the team adds a better one soon. Something like Sketch Runner would be great.

Tools aren’t always visible

You can see in the pictures above, that the “+” panel contains all tools like drawing a “frame” or “ellipse”. This means when viewing layers or components the tools are not visible. While still accessible via the keyboard shortcuts, it makes working with Framer somewhat complicated.

Limited tool set

The most important tools are available but there is still a lot missing. While this may not be an issue for you, I am certainly missing a lot.

Framer supports only linear gradients with no intermediate color stops. The handling of gradients, e.g. moving the stops is very tedious and hard to get right.

Rulers and grids are also missing, as well as scissors for cutting paths. You can’t outline text & borders or flatten shapes. Those may be a bit advanced, but I used it in Sketch a lot.

No layer & text styles

One huge thing that Framer X is missing are text and layer styles. Perfect would be to have layer, character & paragraph styles, but not even Sketch has that.

The only way of creating something like a text style is to create a component with only text. Maybe I need to get used to it, but to me this is not very practical when you are creating designs.

Layer styles have no replacement at all. This means you have to “copy styles” from an object and paste it onto the new object to make sure they are the same.

The style overwrites in symbols that Sketch introduced, makes this feature even more important.

Customizable components

Framer X has two types of components. “Design components” which are like symbols in sketch. And “code components” which are the hot new things that only Framer X can do. As they differ quite a bit, I will discuss them separately.

Design components
Design components only allow text and image overwrites from the sidebar. But you can click into any instance and overwrite anything, which is very helpful.

Missing from Sketch are the layer & text styles. This enables you to create fixed styles e.g. “primary button” and “secondary button”. This is very important to keep a consistent style and helps with creating a style guide.

Code components
Code components need to be built in react. As you can see above it is not that hard. You can make everything customizable, but if you were to add a font dropdown you would have to add every font by hand.

You cannot overwrite anything by clicking into a component. In contrast to design components, code component are one element. Everything you want to change needs to be defined in your code. This can be very cumbersome if you build very flexible components. You would need to define border radius, line thickness, line style, etc.

Need for code

You need code for many things like keeping the state of an app, e.g. “did the user toggle dark mode”, building those awesome components, and more. I hope that many of those features will be available without code in the future. Alternatively, there could be a visual code editor.

Keeping state is something that has to be moved into the app, as this could be a huge benefit for prototypes.

Recording prototypes

Currently you cannot create recordings of your prototype from within Framer X. When presenting & documenting designs it is often easier to use a gif or video so this would be important to add.

Is it right for you?

This depends on your needs. If you build high fidelity prototypes or only work within a design system, Framer X can make your life a lot easier. Especially if your team is using react.

If your projects all have a different style and you need to quickly create and test products, it’s a different story. In this case you should wait and see how Framer X evolves.