Framer X uses JavaScript modules to move components between files. In short, these modules work by allowing any file to add variables to its list of "exports", as well as allowing any file to "import" variables that other files have exported.

As in regular React, Framer X follows a convention where designers write each component in its own file, then add the component to the file's list of exports. In this way, components can import the other components they need from the files where those components live.

In Framer X, You can import four kinds of components into your code component:

  • Other code components
  • Design Components from the Canvas
  • Components from packages that you've downloaded from the store
  • Components from packages that you've installed from NPM

Importing Code Components

The easiest type of components to import are other code components.

  1. Create a new code component or open an existing component's .tsx file.
  2. At the top of the file, add the line import { MyComponent } from "./MyComponent" , replacing MyComponent   with the name of the your code component that you'd like to import, and replacing ./MyComponent with the name of that code component's file.

Some things to watch out for:

  • If the code component that you're importing lives in a folder, you'll need to use relative pathing syntax to get it. The path "./" will target files in the same folder as the file that you're editing. The path "./SomeFolder/" would target files stored in a folder named SomeFolder, though SomeFolder  would need to live in the same folder as the file that you're editing. The path "../"  would target files in the parent folder of the folder that stores the file that you're editing. Learn more about file paths here.

Once you've imported your code component, you can use it just like you would any other React component.

import * as React from "react"
import { MyButton } from "./MyButton"

export function MyComponent() {
   return <MyButton text="Click here!" />
}

Importing Design Components

When you create a design component, that component is automatically exported from the canvas.tsx  file.

  1. Create a new code component or open an existing component's .tsx  file.
  2. At the top of the file, add the line import { MyComponent } from "./canvas", replacing MyComponent  with the name of the design component that you'd like to import. 

Some things to watch out for:

  • If your design component has a slash /  in its name, you'll need to replace the /  with an underscore _  when importing the component. For example, to import a design component named  Cards/UserCard , you'd write  import { Cards_UserCard } from "./canvas"
  • If you're importing more than one component, add each component's name, separated by a comma , .

Once you've imported your design component, you can use it just like you would any other component. If your design component has one or more defined properties, you can set these properties through the component's props.

import * as React from "react"
import { Button, Switch } from "./canvas"

export function MyComponent() {
   return <Button myDefinedProperty="Login" />
}

Importing components from packages

When you install a package from the Framer X store, its components will be available from "@framer/PackagesName/code/ComponentName" .

  1. Install a package from the Framer Store.
  2. Create a new code component or open an existing component's .tsx file.
  3. Open your Framer X project's Project Folder by selecting File > Show Project Folder from the menu.
  4. Open the node_modules  folder.
  5. Open the @framer  folder.
  6. Copy the name of the package's folder.
  7. Back in your component file, add the line import { ComponentName } from "framer/PackageName/code/ComponentName" , replacing ComponentName  with the name of the component you'd like to use, and replacing PackageName  with the name of the package's folder from Step 6.

You can now use the package's component as you would any other component.

For example, to use the MarkerMap  component from the Mapbox package in a code component, we'd first install the Mapbox package, then create a component that looks something like this: 

import * as React from "react"
import { Frame } from "framer"
import { MarkerMap } from "@framer/mapbox.mapbox/code/MarkerMap"

export function Example() {
    return <Frame size={"100%"}><MarkerMap/></Frame>
}


Some things to watch out for:

  • Many components have required props. To learn more about a component, you may have to open the component's file and read the component itself. (Don't change the component's code, though – it's not polite and may cause bugs.)

Importing components from NPM packages

If you're installing packages from NPM, you probably know how this works. Remember that Framer X uses TypeScript, so packages with default exports may require a different syntax when importing.

import * as React from "react"
import { Frame } from "framer"
import { YourComponent } from "your-package"
import * as YourOtherComponent from "your-other-package"

export function Example() {
  return (
    <Frame size={"100%"}>
      <YourComponent/>
      <YourOtherComponent/>
    </Frame>
  )
}

Did this answer your question?