Creating Code Components in Framer X
From simple interactive buttons to a robust interactive design system—learn how to do it all.
November 27, 2018
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
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.
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.
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.
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
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
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
function, which defines what we’ll actually display on the canvas.
The propertyControls static defines what will be rendered within the property panel in Framer X. In the default code component, it looks like this:
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
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
that sets the
style of our button.
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.
Want more design articles?
5 Ways Facebook Scales Their Design System
Read more ›
Design Systems in Framer X
Read more ›
Creating Design Components
Read more ›