# 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:

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"
/>


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"


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

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.