Framer X

The future of design tools?

What is awesome


Individual component overwrites

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

Code components

A simple input component with 8 options coded in react.
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 propertiesstatic defaultProps = {  placeholder: "Placeholder",  textColor: "black",  textColor: "black",  textSize: "16px",  caratColor: "blue",  bgColor: "transparent",  fontWeight: "400"}// Items shown in property panelstatic 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

What is missing

Structuring files

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

Finding components

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

Tools aren’t always visible

Limited tool set

No layer & text styles

Customizable components

Need for code

Recording prototypes

Is it right for you?

Product designer with a love for complex problems & data. Everything I post on Medium is a copy — the originals are on my own website: