Registry / web-framework / figma-sir-compiler

figma-sir-compiler

library1.0.7jsnpmunverified

A Figma-to-code compiler that converts Figma designs into a Semantic Intermediate Representation (SIR) and then generates front-end code (Vue, TypeScript). Current stable version is 1.0.7, with monthly releases. Key differentiators: uses a structured SIR DSL for intermediate representation, supports interactive prototypes (click/hover) and navigation generation, requires specific Figma file structure (SECTION/FRAME) for correct parsing. Compared to alternatives like Anima or Locofy, it focuses on semantic layer naming and more deterministic code generation but is more opinionated about Figma organization.

web-framework data serialization

npm install figma-sir-compiler

package ↗

INSTALL

IMPORT

SIG · FIGMA-SIR-COMPILER

figma-sir-compiler

web-frameworkjavascriptv1.0.7

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

compile

✓ import { compile } from 'figma-sir-compiler'

✗ const { compile } = require('figma-sir-compiler')

Library is ESM-only; require() will fail. Use dynamic import() if needed in CJS.

Type definitions (e.g., FigmaConfig)

✓ import type { FigmaConfig } from 'figma-sir-compiler'

✗ import { FigmaConfig } from 'figma-sir-compiler'

FigmaConfig is a TypeScript interface; import it with `type` to avoid runtime inclusion.

default export (all-in-one)

✓ import FigmaSirCompiler from 'figma-sir-compiler'

✗ const FigmaSirCompiler = require('figma-sir-compiler')

Default export is a class with compile() method; ESM-only.

Shows how to import the compile function, configure the compiler with Figma credentials, and execute the compilation asynchronously.

// install: npm install figma-sir-compiler import { compile } from 'figma-sir-compiler'; // Create configuration const config = { figmaToken: process.env.FIGMA_TOKEN || '', fileKey: 'YOUR_FILE_KEY', nodeId: '', outputDir: './output', cacheDir: '.figma-cache', filterRules: { namePatterns: ['status bar', 'tab bar', 'nav bar'], filterHidden: true } }; // Run compilation const result = await compile(config); console.log(result); // Generated code map

figma-sir-compiler --version

Debug

Known issues

gotchaFigma file structure must follow strict SECTION/FRAME hierarchy: SECTION = flow, FRAME = page inside SECTION. Free-floating FRAMEs are ignored.

fix

Restructure Figma file: all pages (FRAME) must be inside a SECTION. Do not nest SECTIONs.

affects: >=1.0.0

breakingVersion 1.0.x requires Node.js >=16.0.0. Older Node.js versions will throw syntax errors due to ES2021 features.

fix

Update Node.js to v16 or later.

affects: >=1.0.0

deprecatedThe CLI command 'figma-sir init' is deprecated in favor of manually creating figma.config.json since v1.0.5.

fix

Manually create figma.config.json as shown in the README.

affects: >=1.0.5

gotchaLayer names must be in English for proper semantic recognition. Non-English names (e.g., Chinese) are treated as generic rectangles.

fix

Rename layers to English keywords like 'Button Primary', 'Input Email'.

affects: >=1.0.0

breakingThe compile function now returns a Promise instead of synchronous result since v1.0.2.

fix

Use async/await or .then() when calling compile().

affects: <1.0.2

gotchaInteractive prototypes (On click, On hover) require the interaction to be set in Figma's Prototype tab with a trigger and destination; otherwise no interaction DSL is generated.

fix

In Figma, select element, go to Prototype tab, add interaction with trigger and navigate to target frame.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: figma_sir_compiler_1.compile is not a function

Using CJS require() instead of ESM import.

fix

Change to import { compile } from 'figma-sir-compiler' or use dynamic import().

Error: Unexpected token '??='

Node.js version below 16.0.0 does not support ES2021 logical assignment.

fix

Upgrade Node.js to >=16.0.0.

FigmaSIRCompiler: No pages found in the file. Make sure your frames are inside Section nodes.

FRAMEs are not nested under SECTION nodes in Figma.

fix

Restructure Figma file: place all page FRAMEs inside SECTION nodes.

Upgrade

Version history

1.0.7latest on npm

Audit

Dependencies

typescriptrequiredRequired peer dependency for type checking and type generation

Agent activity

6 hits · last 30 days

node

Bingbot

Resources

packagehttps://www.npmjs.com/package/figma-sir-compiler ↗