Figma Create Connect

Code Connect Best Practices

In this repo, it is convention for Code Connect files (*.figma.tsx) to be colocated with their corresponding components, within a __figma__ directory.

Example:

MyComponent/
  __tests__/
  __figma__/
    MyComponent.figma.tsx
  MyComponent.tsx
  index.ts

Typical Code Connect Template

Note: NEVER use relative imports for components used in code connect examples. ALWAYS use the package import paths.

Template Code Connect file:

import { figma } from '@figma/code-connect';
// Add React import for mobile components only
// import React from 'react';

import { ComponentName } from '@coinbase/package-name/path/to/ComponentName';

figma.connect(
  ComponentName,
  // FIGMA URL HERE,
  {
    imports: ["import { ComponentName } from '@coinbase/cds-package-name/path/to/ComponentName'"],
    props: {
      // MAP FIGMA PROPERTIES TO COMPONENT PROPS USING FIGMA CODE CONNECT API HERE
    },
    example: (props) => <ComponentName {...props} />,
  },
);