Getting existing React components on your canvas

Note: This article refers to the Framer desktop app. Learn more about the differences between the Framer web and desktop app here.

Note: This article uses Framer’s code features. Find out how to enable code features in your project.

One of Framer’s most powerful features is its ability to consume NPM packages. NPM is a repository of code that developers from all around the world use to publish their work. Since Framer is built using open technologies it can consume most NPM packages.

In this article we’ll walk you through importing a component from an existing React library, and how to get it to show on the Framer canvas.

Starting off

Material UI is a collection of React components used to design user interfaces. If we want to use one of the components from Material UI, we first need to install it as a dependency in our project.

  1. Open up your .framerx or .framerfx project file.
  2. When opened, hit P to open up the project folder.
  3. Open a Terminal session and change directories into your project directory.

How to open your project in a terminal

You can change directories within the Terminal by writing the command ~$ cd and writing the exact path to the folder you want. We can also simply drag the folder from Finder to the Terminal window instead.

If we do this for our Framer project, your command before running it should look something like ~$ cd myproject.framerx.

  • If you are using a default .framerx file, your project folder will be named container and it will have a folder icon. Drag it from the very top of your Finder instance that we opened up earlier straight into the Terminal.
  • For folder-backed .framerfx files, your project folder will simply be the project file from wherever you saved it in your Mac.

Installing the NPM library in your project

With our terminal pointed to our Framer project, we’re going to tell it to install Material UI as a dependency using yarn:

~ $ yarn add @material-ui/core

Tip: Next to being able to see which exact name of the package you should use, you can also find useful information like number of downloads and a link to the packages source code on the package’s NPM page.

Now that we have the package installed in our project, it will show up in our project folder under node_modules and we’ll be able to refer to it from code.

Using the component in code

Return to your project file and navigate to the Assets panel. To the bottom-left, choose to create a new asset and when prompted, select that you want to create a new code component.

At the top we’ll import a component from Material UI, namely the Button component.

import * as React from "react"
import { Frame } from "framer"
import { Button } from "@material-ui/core/Button"
COPY

Our component will now know that it may be using the Button component from Material UI. We can use the Button component within our code component in the following way:

Now we’ll be able to drag the component from the Components panel straight to our canvas.

Note: In the example above we also set several props on the Button component. These may be required to render it. Several external code editors, such as VSCode, will be able to easily show you which properties can be set on a component.

Making the button’s text configurable

Now that you have the MaterialButton available on your canvas, you’re probably wondering if there is a way to customize the text so that it doesn’t always render “Hello World”. The way to do this in Framer is through Property Controls. Property controls make it possible to expose values in Framer’s UI. In the following example we are going to set a property control for the button’s text.

Find out all about Property Controls from Product Specialist Peri Langlois on Learn.

Conclusions

In this guide we learned a few important topics:

  1. How to cd into your Framer project.
  2. How to install an NPM package using yarn.
  3. How to expose an installed component to Framer’s canvas.
  4. How to make the text property customizable using property controls.

Learn more

To find out how to further utilize NPM packages, watch the video tutorial on installing packages with yarn: