@khoavhd/figma-sentinel


> CLI for Figma Sentinel - Automated design change tracking and synchronization from Figma to your codebase

Installation

``bash


Run directly with npx (no install required)

npx @khoavhd/figma-sentinel sync

Or install globally

npm install -g @khoavhd/figma-sentinel
pnpm add -g @khoavhd/figma-sentinel

Verify installation

figma-sentinel --version
`

Quick Start

$3

Reference Figma designs in your source code using comment directives:

`tsx
// src/components/Button.tsx

// @figma-file: ABC123xyz
// @figma-node: 1:23
// @figma-node: 1:45

export function Button({ children }) {
return {children};
}
`

$3

`bash
export FIGMA_TOKEN="your-figma-personal-access-token"
`

Get your token from Figma Account Settings.

$3

`bash
figma-sentinel init
`

$3

`bash
figma-sentinel sync
`

CLI Commands

$3

Scan source files, fetch Figma designs, and detect changes.

`bash
figma-sentinel sync [options]

Options:
--dry-run Preview changes without writing files
--cwd

Set working directory
--config Path to config file
`

$3

Validate your setup without fetching from Figma.

`bash
figma-sentinel check [options]

Options:
--cwd

Set working directory
--config Path to config file
`

$3

Initialize Figma Sentinel with an interactive wizard.

`bash
figma-sentinel init [options]

Options:
--cwd

Set working directory
`

$3

Debug and compare a specific node's current and stored state.

`bash
figma-sentinel diff [options]

Options:
--file-key Figma file key (required)
--cwd

Set working directory
--config Path to config file
`

$3

Fetch and display Figma Variables (design tokens) from Figma files.

> Note: The Figma Variables API requires a Figma Enterprise plan.

`bash
figma-sentinel variables [options]

Options:
--file-key Figma file key to fetch variables from
--collection Filter by collection name
--output Output JSON file path
--cwd

Set working directory
--config Path to config file
`

Configuration

Create figma-sentinel.config.js in your project root:

`js
module.exports = {
filePatterns: ['src//.tsx', 'src//.jsx'],
excludePatterns: ['node_modules/', '/*.test.tsx'],
specsDir: '.design-specs',
exportImages: true,
imageScale: 2,
outputFormat: 'json',
};
`

Related Packages

| Package | Description |
|---------|-------------|
| @khoavhd/figma-sentinel-core | Core library for programmatic use |
| @khoavhd/figma-sentinel-action` | GitHub Action wrapper |

Documentation

For complete documentation, see the main repository.

License

MIT © duckhoa-uit