Quick Start
Create a ProjectEdit a PageLink to a PageSet a TemplatePrepare for SEOPublish to the WebSet up a Custom DomainBasics
Project StructureMarkdownJSXMDXMarkdocES ModulesCSS StylingTailwind CSSMetadataLayout and Design
LayoutsTemplatesResponsive DesignsUsing ColorsTypographyMathematicsPublishing
SEO and SharingCustom DomainsAnalyticsSitemapsFaviconsGuides
WebflowNotionFramerConfiguration
motif.jsontailwind.config.jsmain.cssApp
Keyboard ShortcutsSlash CommandsInstant SearchOffline AccessDistraction-Free WritingReal-Time CollaborationDesktop AppAdvanced
Motif APIA 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.
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"
menuLabel1="Menu 1"
menuLabel2="Menu 2"
menuLabel3="Menu 3"
shadow={true}
title="Heading Text"
/>
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"
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.
Here is a video walking you through the steps to set up Framer with Motif:
© 2022 Motif Land Inc. All rights reserved. This site is built with Motif.