README.md

Code Connect for icons

This folder includes example scripts for generating Code Connect files for your components. This is useful for icons, where you might have tons of icons that you don't want to manually connect one by one.

Usage

To run the scripts, you'll need to set the FIGMA_ACCESS_TOKEN env variable. See here for how to get this token.

Run the scripts with e.g npx tsx:

FIGMA_ACCESS_TOKEN=<my token> npx tsx import-icons.ts

or, if you have the access token in an .env file, Code Connect will pick that up:

npx tsx import-icons.ts

Code Connect Client

client includes helper functions for interacting with Figma files and generating Code Connect files. It uses the Figma REST API under the hood. This folder includes a few example scripts that can be modified to fit your needs.

getComponents will fetch any components in a file, or if a node-id query parameter is provided, any nodes within that frame. The result can then be used to dynamically connect components with figma.connect() and write this to a file that can be published with figma connect publish.

import { client } from '@figma/code-connect'

async function getIcons() {
  const components = await client.getComponents('https://figma.com/file/ABc123IjkLmnOPq?node-id=41-41')
  const icons = components.filter(({ name }) => name.startsWith('icon'))
  // ... write code connect file
}

getComponents returns an array of Component objects with the following type:

interface Component {
  // the type of component (only COMPONENT_SET nodes can have variant properties)
  type: 'COMPONENT' | 'COMPONENT_SET'
  // the name of the component in Figma
  name: string
  // a unique ID for this node
  id: string
  // file key for the file containing this node
  fileKey: string
  // URL to this node
  figmaUrl: string
  // Properties for this component, keyed by the name of the property
  componentPropertyDefinitions: Record<string, {
    defaultValue: boolean | string
    type: 'BOOLEAN' | 'INSTANCE_SWAP' | 'TEXT' | 'VARIANT'

    // All possible values for this property. Only exists on VARIANT properties
    variantOptions?: string[]
  }>
}