Creating Code Components in Framer X Creating Code Components in Framer X

From simple interactive buttons to a robust interactive design system—learn how to do it all.

Benjamin den Boer

October 27, 2018

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 Components tab in the left-most panel, and click New. Be sure to select from Code in the options below, and give your code component a name. Next, click Create and Edit. Framer X relies on an external editor for writing code. If you have one installed, it should automatically open. Otherwise, any code editor will work, though we recommend Visual Studio Code or Atom.

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.

Import

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.

Style

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

Interface

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.

Class

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 on the list to be notified when we launch full courses, tutorials, and articles related to React and Framer X

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:

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.

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

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.

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 

From here, there are tons of interactions and properties you could add to make it your own. 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 public or private Team Store, check out our Help Center article. Or read our guide on Creating Design Components in Framer X.

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.