CLI for Figma Sentinel - Design change tracking and automated sync
npm install @khoavhd/figma-sentinel

> CLI for Figma Sentinel - Automated design change tracking and synchronization from Figma to your codebase
``bashRun directly with npx (no install required)
npx @khoavhd/figma-sentinel sync
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 ;
}
`$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
@khoavhd/figma-sentinel-core | Core library for programmatic use |
| @khoavhd/figma-sentinel-action` | GitHub Action wrapper |For complete documentation, see the main repository.
MIT © duckhoa-uit