Creating Code Components in Framer X

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

ben

Benjamin den Boer

November 27, 2018

Header

W hen 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 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.

Learn more about the future of design systems

Get tutorials, op-eds and case studies on design systems in Framer X as curated by our team and industry leaders.

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’s 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 other 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.

5 Ways Facebook Scales Their Design System

Read more ›

Design Systems in Framer X

Read more ›

Creating Design Components

Read more ›

Try Framer X.

The world’s most advanced tool for interactive design has arrived. Get started with Framer X today.

Try it for free › Learn about teams ›

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.