How to reference design components with Framer X

ImageComponent.tsx

// ================================
// Step 0: 
// - Go to the canvas
// - Drop an image from your file system
// - Right click on the image and convert it to a design component
// - Rename the component to `Img1`
// ================================

import * as React from "react";
import { PropertyControls } from "framer";

// ================================
// Step 1: import the Img1 from ./canvas
// You can import any design component in your canvas, just make sure you reference it with the right name.
// ================================
import { Img1 } from "./canvas";

// Define type of property
interface Props {}

export class ImageComponent extends React.Component<Props, {}> {
  static defaultProps = {};

  static propertyControls: PropertyControls = {};

  render() {
    // ================================
    // Step 2: Use the imported component. Make sure you use it as a JSX element, in particular DON'T do
    // `return Img1` or `return new Img1` as they will simply not work.
    // ================================
    return <Img1 />;
  }
}

As mentioned on Step one, make sure you name your component.

One small thing to remember:

If you name it as img1 (on the Framer X UI) (i.e. lower cased) you will anyway have to import it as Img1 (on the code). This is because by convention React components are PascalCased (see https://github.com/airbnb/javascript/tree/master/react#naming)