Import Framer Components

A guide to using Framer Handshake to import React components into your pages.

Framer is a design tool that allows you to create components visually. With Framer Handshake, these components can be exported as React components, and imported into Motif with a single line of code.

Obtaining the import URL

Hitting the Handshake button brings up the Handshake dialog, which contains the URL of the React component, and an example use:

Adding the component to your Motif page

You may copy the entire snippet from the Handshake dialog, and paste it into Motif. Make sure to remove the comment string, as this is not a valid JSX comment syntax:

import Home from "https://framer.com/m/Home-E4CQ.js@v8P7Fi9ntCCyFTzKTPAq"

<Home
  buttonText="Click Me"
  menuLabel1="Menu 1"
  menuLabel2="Menu 2"
  menuLabel3="Menu 3"
  shadow={true}
  title="Heading Text"
/>

Using a specific version, or the latest version

In the Handshake URL, you will notice a randomly generated string after the @ symbol. This string represents a specific version of your component. If you make a change to your component, that version string will change. In that way, you can ensure that you are working with a specific version of the component, and only when you are ready to update, you can grab the new URL. If on the other hand you want your page to always use the latest version of a component, simply remove the part starting with the @ symbol.

Using a specific version:

import Home from "https://framer.com/m/Home-E4CQ.js@v8P7Fi9ntCCyFTzKTPAq"

Using the latest version:

import Home from "https://framer.com/m/Home-E4CQ.js"

Defining dynamic component properties

In the above example, you will notice that some of the component properties are dynamically set in code. That is because we have defined them as dynamic in Framer. For instance, the CTA button's label can be set via the buttonText property of the component. To achieve this behavior, select your component in Framer, and in the property sidebar, make the desired property dynamic by hitting the + button next to the property, then Create, and give it an identifier.

Live walkthrough

Here is a video walking you through the steps to set up Framer with Motif: