Figma SIR Compiler

1.0.7 verified Fri May 01 auth: no javascript

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.

Common errors

error TypeError: figma_sir_compiler_1.compile is not a function ↓

cause Using CJS require() instead of ESM import.

fix

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

error Error: Unexpected token '??=' ↓

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

fix

Upgrade Node.js to >=16.0.0.

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

cause FRAMEs are not nested under SECTION nodes in Figma.

fix

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

Warnings

gotcha Figma 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.

breaking Version 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.

deprecated The 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.

gotcha Layer 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'.

breaking The compile function now returns a Promise instead of synchronous result since v1.0.2. ↓

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

gotcha Interactive 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.

Install

npm install figma-sir-compiler

yarn add figma-sir-compiler

pnpm add figma-sir-compiler

Imports

compile

wrong

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

correct

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

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

Type definitions (e.g., FigmaConfig)
wrong
```
import { FigmaConfig } from 'figma-sir-compiler'
```
correct
```
import type { FigmaConfig } from 'figma-sir-compiler'
```
FigmaConfig is a TypeScript interface; import it with `type` to avoid runtime inclusion.

default export (all-in-one)

wrong

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

correct

import FigmaSirCompiler from 'figma-sir-compiler'

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

Quickstart

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