Creates a new Figma Code Connect mapping file for a CDS component
Objective: Create a new Code Connect mapping file for a specificed CDS component.
ALWAYS refresh your memory of the React Code Connect documentation here: https://developers.figma.com/docs/code-connect/react/ before starting this task.
You must be provided two pieces of information:
1. a name or reference to a CDS React component
2. a Figma URL
If you do not have either, MUST NEVER proceed with the task.
Retrieve Figma component data
get_metadata tool with the Figma URL you were providedget_design_contextRead the React component source
Generate Code Connect Mapping File
figma.connect-best-practices SKILLIn 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
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} />,
},
);