@tokiforge/figma

Figma integration for TokiForge design tokens. Sync tokens between Figma and code, compare designs, and manage design system consistency.

Figma integration for TokiForge design tokens (v2.4.0). Sync tokens between Figma and your codebase.

Installation

npm install @tokiforge/figma@^2.4.0 @tokiforge/core@^2.4.0

Setup

1. Get your Figma Personal Access Token:

   • Go to Figma Settings ? Account ? Personal Access Tokens
   • Create a new token

2. Get your Figma File Key:

   • Open your Figma file
   • The file key is in the URL: https://www.figma.com/file/{FILE_KEY}/...

Usage

Pull tokens from Figma

import { pullFromFigma } from "@tokiforge/figma";

const tokens = await pullFromFigma({
  accessToken: "your-figma-token",
  fileKey: "your-file-key",
});

// Save to file
import { writeFileSync } from "fs";
writeFileSync("tokens.json", JSON.stringify(tokens, null, 2));

Push tokens to Figma

import { pushToFigma } from "@tokiforge/figma";

await pushToFigma("./tokens.json", {
  accessToken: "your-figma-token",
  fileKey: "your-file-key",
});

Figma plugin (local)

Build the in-repo plugin assets:

pnpm --filter @tokiforge/figma build

Then in Figma Desktop → Plugins → Development → Import plugin from manifest → select packages/figma/dist/manifest.json. The UI supports pull/push of local paint styles and settings persistence.

CLI Usage

# Pull from Figma
tokiforge figma:pull --token YOUR_TOKEN --file-key FILE_KEY

# Push to Figma
tokiforge figma:push --token YOUR_TOKEN --file-key FILE_KEY

Note

Figma API has limitations for creating styles. The CLI now supports figma:pull, figma:push, and figma:diff; for style creation/update operations, use the Figma plugin workflow.