Creating Code Components


When it comes to design systems, most tools offer little more than a way to create static files. And while style guides and documentation are a great way to create a shared visual language, we believe that truly functional product design begins with reusable and interactive UI components.

In Framer X, we’ve made it easy to design collaboratively based off a shared set of interactive components, with the option to build a bridge between design and development. Turn any visual element into a React code component, add custom interfaces based off your product guidelines and publish to your Team Store for designers on your team to install and customize to their projects. Read Head of Product Tom Watson’s post to find out more about the benefits of creating an interactive design system in Framer X. In this guide, I’ll show you how to create your first code component and publish to the public or private Team Store.

Download a free trial to follow along ›

Get Started

First, head over to the Code tab in the left-most panel, click New, and give your code component a name. Then, click Create New Component. Framer X will open it’s internal code editor, so you can start building your component right away.

Our newly created code component will now appear within the components panel. Dragging the same component onto the canvas will make each one an instance of the original code component. Every time you make a change to the component, your saved changes will be reflected across the master and all of its instances.

Code Basics

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.


The import statement allows you to source elements from included libraries, like React and Framer. We’ll need a few things from the Framer Library too, like PropertyControls and ControlType.


The style object includes a bunch of CSS style declarations that are stored in a constant, including some default styling.


The code for components in Framer X is Typescript. TypeScript is very close to ES6 (JavaScript), but allows you to assign predefined types to values, like string, number, or React.CSSProperties. In Framer X, the usage of TypeScript is optional but recommended because it allows you to easily catch mistakes in your code.


The exported class is where we define our actual component. It includes the name, property interface (Props), default property values (defaultProps), exposed property controls (propertyControls) and the render() function, which defines what we’ll actually display on the canvas.

Interested in React resources for designers?

Get thought-provoking creative content delivered to your inbox. No spam, never boring.

Adding Properties

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 type is necessary to make Framer X detect it. Within the object, we can give the property any name we’d like (in this example, it’s text), and then we pass along an object which generally should always include a type and a title. For a complete overview of all available properties, install this example from the store.

For our first component, let’s create a simple button, with customizable color and text contents. We’ll need at least two property controls: one for text, one for the fill color. First, let’s prepare the CSS by removing the background property, setting the fontWeight to bold and the color to white. Next, we’ll update our Interface, and add a Fill property.

interface Props {
text: string;
fill: string;

Then, we’ll update the default property values and add a color property control.

static defaultProps = {
text: "Get Started",
fill: "#09F"
static propertyControls: PropertyControls = {
text: { type: ControlType.String, title: "Text" },
fill: { type: ControlType.Color, title: "Fill" }

And finally, we’ll update the render method. We’ll make sure it still inherits properties from the style object using the spread operator, but extend it to allow us to override the background color with our fill property.

render() (
<div style={{, background: this.props.fill }}>

And that’s it—we’ve successfully added a new property. Now, by following the same steps, we can easily add another one: a radius property control of the type ControlType.Number that sets the borderRadius style of our button.

Download the final project file

Next steps

From here, there are tons of interactions and properties you could add to make it your own. A great next step is to make an interactive accordion component, which you can learn more about in this Learn tutorial.

Once you’re ready to share your components, we recommend setting up project files for each package or collection of components that you want to publish.

For more detailed instructions on publishing to the packages, check out this support article.