Edit Page

#Canvas Components

Start using design components from the canvas directly in your code components.

Every design component you define on the canvas in Framer X can be imported directly from code, including defined properties. They are referenced from the code/canvas.tsx file, which holds all design components. To make a component in Framer X:

  • Select any Frame on the canvas
  • Switch to the components panel
  • Click create and name your component
import * as React from "react"
import { Button } from "./canvas"

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

#Canvas.tsx

Your component gets automatically written to a dynamic file called code/canvas.tsx, from where you can add it to any code file in your project. The imported components are named after their Frame name and behave like any other React component. This file is automatically generated when you change any of your components.

// code/canvas.tsx example contents
import { createDesignComponent, CanvasStore } from "framer"
const canvas = CanvasStore.shared(); // CANVAS_DATA;
export const MyComponent = createDesignComponent<{parentSize?:{width:number|string,height:number|string},width?:number|string,height?:number|string}>(canvas, "id_wOcClzQbT", {}, 200,200);

#Properties

If you’ve defined any properties on your component master (like text or image), as well as width and height, you’re able to reference and update these properties via code too.

import * as React from "react"
import { Profile } from "./canvas"

export function MyComponent() {
  return (
    <Profile
      width={200}
      height={200}
      name={"Harry"}
      image={"harry.jpg"}
    />
  )
}

#Layout

Exported Canvas components switch to full DOM layout so they will behave like any other relative DOM element.

import * as React from "react"
import { Card } from "./canvas"

export function MyComponent() {
  return (
    <div style={{ width: 200, height: 200 }}>
      <Card size={"100%"} />
    </div>
  )
}

#Colors

Shared colors from your Canvas can also be imported and used in Code. In this example, we’re importing a color that we’ve named Primary in the Color Picker, and we’re using it to set the background of a Frame. Please note that we manage the colors using CSS variables, so they can’t be transformed using the Color() function at the moment.

Note: For prototyping, using code-friendly names is encouraged, such as accentColor. If your shared color names do contain spaces, you can reference those by using the bracket notation: colors["Accent Color"].

import * as React from "react"
import { Frame } from "framer"
import { colors } from "./canvas"

export function MyComponent() {
  return <Frame backgroundColor={colors.Primary} />
}

#Animating Colors

Imported shared colors can also be animated, just like any other color. In this example, we’re cycling between two imported colors on tap.

import * as React from "react"
import { Frame, useCycle } from "framer"
import { colors } from "./canvas"

export function MyComponent() {
  const [flip, cycle] = useCycle(
    { backgroundColor: colors.Primary },
    { backgroundColor: colors.Secondary }
  )

  return (
    <Frame
      backgroundColor={colors.Primary}
      animate={flip}
      onTap={() => cycle()}
    />
  )
}