{"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,"search_vec":"'1.0.7':33 'altern':65 'anima':67 'click/hover':50 'code':8,26,79,93,98 'code-gener':97 'compar':63 'compil':3,9,96 'convert':11 'correct':61 'current':29 'design':13,91 'design-to-cod':90 'determinist':78 'differenti':38 'dsl':43,101 'end':25 'figma':1,6,12,56,86,89 'figma-to-cod':5 'file':57 'focus':71 'front':24 'front-end':23 'generat':22,53,80,99 'interact':48 'intermedi':17,45 'javascript':88 'key':37 'layer':74 'like':66 'locofi':69 'month':35 'name':75 'navig':52 'opinion':84 'organ':87 'pars':62 'prototyp':49 'releas':36 'represent':18,46 'requir':54 'section/frame':59 'semant':16,73,95 'sir':2,19,42,94 'specif':55 'stabl':30 'structur':41,58 'support':47 'typescript':28,102 'ui':100 'use':39 'version':31 'vue':27","created_at":"2026-05-01T13:45:29.841304+00:00","updated_at":"2026-05-01T13:45:29.841304+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"figma-sir-compiler","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/figma-sir-compiler","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","data","serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-05-01","next_check":"2026-07-30","install_tag":null}}