Property Controls in Framer X

Start building your own code components. Learn all about the included property controls, from images to fused numbers.

Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →

In Framer X, we introduced code components, re-usable elements that can be programmed from scratch, based on React. You can create your own, or install them from the Store. Within these components, you can define your own properties—and allow others to customize it to their liking. This essentially allows you to hack Framer’s UI, and design your own property panel. In this post, I’ll cover all of the supported property controls, how they work, and provide you with samples to get started. Let’s get started.

Components

So, you’re ready to start making your own code components. You can do so by clicking on the “Components” icon in the left panel. Then, click “New” and select “from Code”. This will open up your default code editor. If you don’t have any, I can recommend Visual Studio Code. Alternatives include Atom and Sublime Text. The default code component is very simple, and it only exposes a single property: Text. Before we dive into the properties, let’s briefly go over the basics first.

• Import. This simply imports elements from included libraries, like React and Framer. We’ll need a few things from the Framer Library too, like PropertyControls and ControlType.
• Style. This is an object which includes a bunch of CSS style declarations, stored in a constant. Just some default styling.
• Interface. This is TypeScript. In Framer X, the usage of TypeScript is optional, but recommended. It allows you to assign types to properties, like string or number.
• Class. The exported class is where we define our actual component. It includes the name, the property interface (Props), our default property values (defaultProps), our exposed property controls (propertyControls) and the render() function, which defines what we’ll actually render (display) on the canvas.

Great. With that out of the way, let’s get into the nitty-gritty.

The Controls

The propertyControls static defines what will be rendered within the property panel in Framer X. In the default code component, it looks like this:

static propertyControls: PropertyControls = {
  text: { 
    type: ControlType.String, 
    title: "Text" 
  }
};

The PropertyControls typing is necessary to make Framer X detect it. Within the object, we can give the property any name we’d like (here it’s text), and then we pass along an object which generally should always include a type and a title. The type defines the type of control, and the title defines the title that will display in the property panel.

Below you’ll find a list of all available property controls, including a short description. If you prefer to learn by doing, I’ve also made an example that includes all property controls, and displays their output on the canvas. You can grab it from the Store, and right-click on the thumbnail from within the Components panel to copy the code. Or, you can download the original Props.tsx file too, and include it in the code folder of your project (hit CMD + Option + P to open your project folder).

Property Example

A great starting point for your next code component.

• Install from the Store ›
• Direct Download ›

All Types

Text
A string that can contain any text value. Displayed as an input field. Contains an optional placeholder property.

static propertyControls: PropertyControls = {
  text: { 
    type: ControlType.String, 
    title: "Text", 
    placeholder: "Framer X" 
  }
}

Color
A string that can contain any color value in the HEX, RGB and HSL color spaces. Displayed as a color picker and numeric input control that allows you to control the alpha value.

static propertyControls: PropertyControls = {
  color: { 
    type: ControlType.Color, 
    title: "Color" 
  }
}

Boolean
A boolean that is either true or false. Displayed as a segmented control. The titles displayed within the segmented control are True and False by default, but can be customized with enabledTitle and disabledTitle.

static propertyControls: PropertyControls = {
  boolean: { 
    type: ControlType.Boolean, 
    title: "Boolean",
    enabledTitle: "True",
    disabledTitle: "False"
  }
}

Number
A single numeric value. Displayed as an input field, alongside a slider control. Contains optional min, max, step and unit values. The unit property can be set to % to have the input field display in percentiles instead.

static propertyControls: PropertyControls = {
  number: { 
    type: ControlType.Number, 
    title: "Number",
    min: 0,
    max: 100,
    step: 1
  }
}

Image
An image file. Displayed as an image picker and a small image preview.

static propertyControls: PropertyControls = {
  image: { 
    type: ControlType.Image, 
    title: "Image"
  }
}

File
Any file. Displayed using a file picker which will display the file name after selection. Contains an optionalFileTypes property that takes an array of strings, like [“png”, “jpg”].

static propertyControls: PropertyControls = {
  file: { 
    type: ControlType.File, 
    title: "File",
    allowedFileTypes: ["png", "jpg"]
  }
}

Enum
A selection of options. Displays as a dropdown control. Contains an options property, which takes an array of strings as the actual options, and an optional optionTitles property, which also takes an array of strings and will define how the options will render in the UI.

static propertyControls: PropertyControls = {
  enum: { 
    type: ControlType.Enum, 
    title: "Enum",
    options: ["A", "B", "C"],
    optionTitles: ["Option A", "Option B", "Option C"]
  }
}

SegmentedEnum
A limited selection of options. Displayed as a segmented control (toggle). Contains an options property, which takes an array of strings as the actual options, and an optional optionTitles property, which also takes an array of strings and will define how the options will render in the UI. This will work with a maximum of ~3/4 options. For 4+ options, I’d recommend using the Enum control instead.

static propertyControls: PropertyControls = {
  segment: { 
    type: ControlType.SegmentedEnum, 
    title: "Segment",
    options: ["A", "B", "C"],
    optionTitles: ["A", "B", "C"]
  }
}

FusedNumber
A single numeric value, or a set of 4 numeric values, each representing the side (top, right, bottom, left) of an object. It’s been designed for properties like border-radius, border-width and padding. Displays as an input control, alongside a segmented control that allows you to toggle between all-sides or specific-side control.

static propertyControls: PropertyControls = {
  fused: { 
    type: ControlType.FusedNumber, 
    title: "Fused",
    toggleKey: "fusedPerSide",
    toggleTitles: ["All Sides", "Per Side"],
    valueKeys: [
      "fusedTop", 
      "fusedRight", 
      "fusedBottom", 
      "fusedLeft"
    ],
    valueLabels: ["T", "R", "B", "L"],
    min: 0,
  }
}

That’s it! I can’t wait to see the things you’ll create and publish to the Framer X Store. If you feel you’ve made something great, and would like to be featured, please feel free to mention me on Twitter, I’d love to take a look.