Getting Started

Getting Started

Code Components can extend Framers capabilities by rendering any React Component directly on the canvas. Framer has a built in code editor to write them directly in Framer.

Framer components are just plain React components, but they have a few useful extras to empower them in Framer workflows:

• Adding Property Controls

• Framer Motion built-in

• Sharing with a URL

Basics

To create a new code component, go to the assets panel and click Code. Then, click Create Code File. You'll be presented with a new code file that exports a single React component. You will see we import some special helper from the framer library that we use to empower the component in Framer.

import { addPropertyControls, ControlType } from "framer"

export function MyComponent(props) {
  return <div>{props.text}</div>
}

addPropertyControls(MyComponent, {
  text: { 
    type: ControlType.String, 
    defaultValue: "Hello World!" 
  },
})

In this case, we are building a normal React component, but adding a control to it, to enable setting of the Text property from the canvas. To set this up we use the addPropertyControls API as seen above.

Sizing your Component

There are four settings for code component layout in Framer: auto, fixed, any, and any-prefer-fixed. These can be set for width or height axis individually, using @framerSupportedLayoutWidth and @framerSupportedLayoutHeight annotations.

• auto — The component will dictate its own size.

• fixed — The component is in a fixed size container & can fill parent.

• any — The user can switch between auto and fixed sizing.

• any-prefer-fixed — Will insert with sizing set to fixed.

The following code will make your component have auto-sizing for width, but not height. You can make these two properties any combination of sizing options as long as you have both width & height specified.

/**
* @framerSupportedLayoutWidth auto
* @framerSupportedLayoutHeight fixed
*/
export function Toggle(props) { ...

These annotations let Framer know what size your component should be inserted into the canvas when fixed sizing is enabled. In this case, it will insert with a width of 200px and a height of 200px.