Skip to main content

Continuous Integration

The easiest way to get started using Code Connect is by using the CLI locally. However, once you have set up your first connected components, you can integrate Code Connect with your CI/CD environment to simplify maintenance and to ensure component connections are always up to date. Using GitHub actions, you can specify that you want to publish new files when any PR is merged to the main branch. We recommend only running this on pull requests that are relevant to Code Connect to minimize impact on other pull requests.

on:
  push:
    paths:
      - src/components/**/*.figma.tsx
    branches:
      - main

jobs:
  code-connect:
    name: Code Connect
    runs-on: ubuntu-latest
    steps:
      - run: npx figma connect publish --exit-on-unreadable-files
        env:
          FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}

Authentication in CI​

The CLI authenticates with a token provided via the --token flag or the FIGMA_ACCESS_TOKEN environment variable. Store the token as a secret in your CI provider rather than committing it.

For CI we recommend a Plan Access Token (PLANT) rather than a Personal Access Token (PAT):

  • PLANTs are owned by the plan (Org+) and managed by admins, so they keep working when the person who created them leaves the team.
  • PLANTs can be configured with an expiration time of up to one year and refreshed before they expire, reducing rotation frequency compared with a PAT's 90-day maximum.
  • Figma CLI PLANTs use a fixed set of Figma CLI scopes instead of inheriting a user's access, limiting the credential to supported CLI workflows and resources in its plan.

An admin can create a token from the Figma CLI tab in the developer hub. The token is used exactly like a PAT: pass it via FIGMA_ACCESS_TOKEN (or --token); no other change to your pipeline is required. See the Plan Access Tokens documentation for details.