{"id":25579,"library":"figma-sir-compiler","title":"Figma SIR Compiler","description":"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.","status":"active","version":"1.0.7","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","figma","design-to-code","sir","semantic","compiler","code-generation","ui","dsl","typescript"],"install":[{"cmd":"npm install figma-sir-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add figma-sir-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add figma-sir-compiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for type checking and type generation","package":"typescript","optional":false}],"imports":[{"note":"Library is ESM-only; require() will fail. Use dynamic import() if needed in CJS.","wrong":"const { compile } = require('figma-sir-compiler')","symbol":"compile","correct":"import { compile } from 'figma-sir-compiler'"},{"note":"FigmaConfig is a TypeScript interface; import it with `type` to avoid runtime inclusion.","wrong":"import { FigmaConfig } from 'figma-sir-compiler'","symbol":"Type definitions (e.g., FigmaConfig)","correct":"import type { FigmaConfig } from 'figma-sir-compiler'"},{"note":"Default export is a class with compile() method; ESM-only.","wrong":"const FigmaSirCompiler = require('figma-sir-compiler')","symbol":"default export (all-in-one)","correct":"import FigmaSirCompiler from 'figma-sir-compiler'"}],"quickstart":{"code":"// install: npm install figma-sir-compiler\nimport { compile } from 'figma-sir-compiler';\n\n// Create configuration\nconst config = {\n  figmaToken: process.env.FIGMA_TOKEN || '',\n  fileKey: 'YOUR_FILE_KEY',\n  nodeId: '',\n  outputDir: './output',\n  cacheDir: '.figma-cache',\n  filterRules: {\n    namePatterns: ['status bar', 'tab bar', 'nav bar'],\n    filterHidden: true\n  }\n};\n\n// Run compilation\nconst result = await compile(config);\nconsole.log(result); // Generated code map","lang":"typescript","description":"Shows how to import the compile function, configure the compiler with Figma credentials, and execute the compilation asynchronously."},"warnings":[{"fix":"Restructure Figma file: all pages (FRAME) must be inside a SECTION. Do not nest SECTIONs.","message":"Figma file structure must follow strict SECTION/FRAME hierarchy: SECTION = flow, FRAME = page inside SECTION. Free-floating FRAMEs are ignored.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update Node.js to v16 or later.","message":"Version 1.0.x requires Node.js >=16.0.0. Older Node.js versions will throw syntax errors due to ES2021 features.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Manually create figma.config.json as shown in the README.","message":"The CLI command 'figma-sir init' is deprecated in favor of manually creating figma.config.json since v1.0.5.","severity":"deprecated","affected_versions":">=1.0.5"},{"fix":"Rename layers to English keywords like 'Button Primary', 'Input Email'.","message":"Layer names must be in English for proper semantic recognition. Non-English names (e.g., Chinese) are treated as generic rectangles.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use async/await or .then() when calling compile().","message":"The compile function now returns a Promise instead of synchronous result since v1.0.2.","severity":"breaking","affected_versions":"<1.0.2"},{"fix":"In Figma, select element, go to Prototype tab, add interaction with trigger and navigate to target frame.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Change to import { compile } from 'figma-sir-compiler' or use dynamic import().","cause":"Using CJS require() instead of ESM import.","error":"TypeError: figma_sir_compiler_1.compile is not a function"},{"fix":"Upgrade Node.js to >=16.0.0.","cause":"Node.js version below 16.0.0 does not support ES2021 logical assignment.","error":"Error: Unexpected token '??='"},{"fix":"Restructure Figma file: place all page FRAMEs inside SECTION nodes.","cause":"FRAMEs are not nested under SECTION nodes in Figma.","error":"FigmaSIRCompiler: No pages found in the file. Make sure your frames are inside Section nodes."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}