[{"data":1,"prerenderedAt":2677},["ShallowReactive",2],{"navigation_en":3,"-docs-getting-started-tooling-figma-plugin":407,"-docs-getting-started-tooling-figma-plugin-surround":2672},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":48,"body":409,"description":2664,"extension":2665,"links":2666,"meta":2667,"navigation":2668,"path":49,"seo":2669,"sitemap":2670,"stem":50,"__hash__":2671},"docs_gettingStarted/docs/getting-started/05.tooling/03.figma-plugin.md",{"type":410,"value":411,"toc":2638},"minimark",[412,416,420,426,460,464,467,478,482,524,535,538,542,553,557,566,569,614,617,631,635,639,646,649,688,691,709,711,715,718,722,725,754,856,861,948,953,1028,1032,1035,1066,1186,1190,1301,1306,1725,1727,1731,1734,1738,2015,2019,2036,2040,2054,2058,2061,2065,2068,2073,2498,2509,2513,2553,2557,2634],[413,414,64],"h2",{"id":415},"overview",[417,418,419],"p",{},"The Styleframe Figma Plugin enables bidirectional synchronization of design tokens between your codebase and Figma. Export your Styleframe variables to Figma, or import Figma variables back into your codebase—all using the industry-standard W3C DTCG (Design Tokens Community Group) format.",[417,421,422],{},[423,424,425],"strong",{},"Key features:",[427,428,429,436,442,448,454],"ul",{},[430,431,432,435],"li",{},[423,433,434],{},"Code-first architecture",": Your Styleframe config is the single source of truth",[430,437,438,441],{},[423,439,440],{},"Bidirectional sync",": Import tokens into Figma or export Figma variables to code",[430,443,444,447],{},[423,445,446],{},"Multi-mode support",": Light, dark, and custom themes are preserved as Figma modes",[430,449,450,453],{},[423,451,452],{},"Type-safe",": Colors, dimensions, strings, and booleans are mapped correctly",[430,455,456,459],{},[423,457,458],{},"Free and open source",": No subscriptions or seat limits",[413,461,463],{"id":462},"prerequisites","Prerequisites",[417,465,466],{},"Before you begin, ensure you have:",[427,468,469,472,475],{},[430,470,471],{},"A Styleframe project with design tokens defined",[430,473,474],{},"A Figma account (free or paid)",[430,476,477],{},"Node.js 18+ installed (for CLI commands)",[413,479,481],{"id":480},"installing-the-figma-plugin","Installing the Figma Plugin",[483,484,485,490,502,506,513,517],"steps",{},[486,487,489],"h3",{"id":488},"visit-the-figma-community","Visit the Figma Community",[417,491,492,493,501],{},"Go to the ",[494,495,500],"a",{"href":496,"rel":497,"target":499},"https://www.figma.com/community/plugin/1597716416772135340/styleframe",[498],"nofollow","_blank","Styleframe Sync plugin"," page on the Figma Community.",[486,503,505],{"id":504},"open-in-your-figma-file","Open in your Figma file",[417,507,508,509,512],{},"Click ",[423,510,511],{},"\"Open in...\""," and select your Figma file.",[486,514,516],{"id":515},"access-the-plugin","Access the plugin",[417,518,519,520,523],{},"The plugin will appear in your Figma ",[423,521,522],{},"Plugins"," menu.",[525,526,527,530,531,534],"tip",{},[423,528,529],{},"Pro tip:"," Right-click in Figma and go to ",[423,532,533],{},"Plugins > Styleframe"," to quickly access the plugin.",[536,537],"hr",{},[413,539,541],{"id":540},"using-the-figma-plugin","Using the Figma Plugin",[417,543,544,545,548,549,552],{},"The plugin has two tabs: ",[423,546,547],{},"Import"," for bringing tokens into Figma, and ",[423,550,551],{},"Export"," for extracting Figma variables.",[486,554,556],{"id":555},"importing-tokens-into-figma","Importing Tokens into Figma",[417,558,559],{},[560,561],"img",{"alt":562,"className":563,"src":565},"Styleframe - Import Design Tokens into Figma",[564],"w-fit","/assets/images/figma-import.png",[417,567,568],{},"Import your Styleframe design tokens into Figma as native Figma Variables:",[570,571,572,583,592,603,609],"ol",{},[430,573,574,577,578,582],{},[423,575,576],{},"Export your tokens"," using the CLI (see ",[494,579,581],{"href":580},"#exporting-tokens-code--figma","CLI Export"," below)",[430,584,585,588,589,591],{},[423,586,587],{},"Open the plugin"," in Figma and select the ",[423,590,547],{}," tab",[430,593,594,597,598,602],{},[423,595,596],{},"Drag and drop"," your ",[599,600,601],"code",{},"tokens.json"," file into the drop zone (or click to browse)",[430,604,605,608],{},[423,606,607],{},"Preview"," the variables that will be created",[430,610,508,611,613],{},[423,612,547],{}," to create the Figma variable collection",[417,615,616],{},"The plugin automatically:",[427,618,619,622,625,628],{},[430,620,621],{},"Creates a new variable collection with your tokens",[430,623,624],{},"Sets up modes for each theme (Light, Dark, etc.)",[430,626,627],{},"Maps token types to Figma variable types (Color, Number, String, Boolean)",[430,629,630],{},"Preserves token aliases as Figma variable references",[632,633,634],"note",{},"If a collection with the same name already exists, variables will be updated rather than duplicated.",[486,636,638],{"id":637},"exporting-tokens-from-figma","Exporting Tokens from Figma",[417,640,641],{},[560,642],{"alt":643,"className":644,"src":645},"Styleframe - Export Design Tokens from Figma",[564],"/assets/images/figma-export.png",[417,647,648],{},"Export Figma Variables to the DTCG format for use in your codebase:",[570,650,651,658,664,669,679],{},[430,652,653,655,656,591],{},[423,654,587],{}," and select the ",[423,657,551],{},[430,659,660,663],{},[423,661,662],{},"Select a collection"," from the dropdown menu",[430,665,508,666,668],{},[423,667,551],{}," to generate the DTCG JSON",[430,670,671,674,675,678],{},[423,672,673],{},"Copy"," the JSON to your clipboard or ",[423,676,677],{},"Download"," as a file",[430,680,681,577,684,582],{},[423,682,683],{},"Import into Styleframe",[494,685,687],{"href":686},"#importing-tokens-figma--code","CLI Import",[417,689,690],{},"The export preserves:",[427,692,693,696,703,706],{},[430,694,695],{},"All variable values across modes",[430,697,698,699,702],{},"Variable aliases as DTCG references (",[599,700,701],{},"{token.path}",")",[430,704,705],{},"Token types and descriptions",[430,707,708],{},"Hierarchical token structure",[536,710],{},[413,712,714],{"id":713},"using-the-cli","Using the CLI",[417,716,717],{},"The Styleframe CLI provides commands for automating token synchronization in your development workflow.",[486,719,721],{"id":720},"exporting-tokens-code-figma","Exporting Tokens (Code → Figma)",[417,723,724],{},"Export your Styleframe variables to the DTCG format:",[726,727,732],"pre",{"className":728,"code":729,"language":730,"meta":731,"style":731},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","styleframe figma export [options]\n","bash","",[599,733,734],{"__ignoreMap":731},[735,736,739,743,747,750],"span",{"class":737,"line":738},"line",1,[735,740,742],{"class":741},"sBMFI","styleframe",[735,744,746],{"class":745},"sfazB"," figma",[735,748,749],{"class":745}," export",[735,751,753],{"class":752},"sTEyZ"," [options]\n",[755,756,757,776],"table",{},[758,759,760],"thead",{},[761,762,763,767,770,773],"tr",{},[764,765,766],"th",{},"Option",[764,768,769],{},"Alias",[764,771,772],{},"Default",[764,774,775],{},"Description",[777,778,779,800,819,838],"tbody",{},[761,780,781,787,792,797],{},[782,783,784],"td",{},[599,785,786],{},"--config",[782,788,789],{},[599,790,791],{},"-c",[782,793,794],{},[599,795,796],{},"styleframe.config.ts",[782,798,799],{},"Path to Styleframe config file",[761,801,802,807,812,816],{},[782,803,804],{},[599,805,806],{},"--output",[782,808,809],{},[599,810,811],{},"-o",[782,813,814],{},[599,815,601],{},[782,817,818],{},"Output JSON file path",[761,820,821,826,831,835],{},[782,822,823],{},[599,824,825],{},"--collection",[782,827,828],{},[599,829,830],{},"-n",[782,832,833],{},[599,834,150],{},[782,836,837],{},"Name for the Figma collection",[761,839,840,845,848,853],{},[782,841,842],{},[599,843,844],{},"--baseFontSize",[782,846,847],{},"-",[782,849,850],{},[599,851,852],{},"16",[782,854,855],{},"Base font size for rem conversion",[417,857,858],{},[423,859,860],{},"Example usage:",[726,862,864],{"className":728,"code":863,"language":730,"meta":731,"style":731},"# Basic export\nstyleframe figma export\n\n# Custom config and output\nstyleframe figma export -c src/styleframe.config.ts -o design-tokens.json\n\n# Named collection\nstyleframe figma export --collection \"My Design System\"\n",[599,865,866,872,882,888,894,915,920,926],{"__ignoreMap":731},[735,867,868],{"class":737,"line":738},[735,869,871],{"class":870},"sHwdD","# Basic export\n",[735,873,875,877,879],{"class":737,"line":874},2,[735,876,742],{"class":741},[735,878,746],{"class":745},[735,880,881],{"class":745}," export\n",[735,883,885],{"class":737,"line":884},3,[735,886,887],{"emptyLinePlaceholder":206},"\n",[735,889,891],{"class":737,"line":890},4,[735,892,893],{"class":870},"# Custom config and output\n",[735,895,897,899,901,903,906,909,912],{"class":737,"line":896},5,[735,898,742],{"class":741},[735,900,746],{"class":745},[735,902,749],{"class":745},[735,904,905],{"class":745}," -c",[735,907,908],{"class":745}," src/styleframe.config.ts",[735,910,911],{"class":745}," -o",[735,913,914],{"class":745}," design-tokens.json\n",[735,916,918],{"class":737,"line":917},6,[735,919,887],{"emptyLinePlaceholder":206},[735,921,923],{"class":737,"line":922},7,[735,924,925],{"class":870},"# Named collection\n",[735,927,929,931,933,935,938,942,945],{"class":737,"line":928},8,[735,930,742],{"class":741},[735,932,746],{"class":745},[735,934,749],{"class":745},[735,936,937],{"class":745}," --collection",[735,939,941],{"class":940},"sMK4o"," \"",[735,943,944],{"class":745},"My Design System",[735,946,947],{"class":940},"\"\n",[417,949,950],{},[423,951,952],{},"Sample output:",[726,954,956],{"className":728,"code":955,"language":730,"meta":731,"style":731},"Loading configuration from \"styleframe.config.ts\"...\nExtracting variables...\nWriting 42 variables to \"tokens.json\"...\nExported 42 variables in DTCG format\n",[599,957,958,979,987,1010],{"__ignoreMap":731},[735,959,960,963,966,969,971,973,976],{"class":737,"line":738},[735,961,962],{"class":741},"Loading",[735,964,965],{"class":745}," configuration",[735,967,968],{"class":745}," from",[735,970,941],{"class":940},[735,972,796],{"class":745},[735,974,975],{"class":940},"\"",[735,977,978],{"class":745},"...\n",[735,980,981,984],{"class":737,"line":874},[735,982,983],{"class":741},"Extracting",[735,985,986],{"class":745}," variables...\n",[735,988,989,992,996,999,1002,1004,1006,1008],{"class":737,"line":884},[735,990,991],{"class":741},"Writing",[735,993,995],{"class":994},"sbssI"," 42",[735,997,998],{"class":745}," variables",[735,1000,1001],{"class":745}," to",[735,1003,941],{"class":940},[735,1005,601],{"class":745},[735,1007,975],{"class":940},[735,1009,978],{"class":745},[735,1011,1012,1015,1017,1019,1022,1025],{"class":737,"line":890},[735,1013,1014],{"class":741},"Exported",[735,1016,995],{"class":994},[735,1018,998],{"class":745},[735,1020,1021],{"class":745}," in",[735,1023,1024],{"class":745}," DTCG",[735,1026,1027],{"class":745}," format\n",[486,1029,1031],{"id":1030},"importing-tokens-figma-code","Importing Tokens (Figma → Code)",[417,1033,1034],{},"Generate Styleframe TypeScript code from a DTCG JSON file:",[726,1036,1038],{"className":728,"code":1037,"language":730,"meta":731,"style":731},"styleframe figma import --input \u003Cfile> [options]\n",[599,1039,1040],{"__ignoreMap":731},[735,1041,1042,1044,1046,1049,1052,1055,1058,1061,1064],{"class":737,"line":738},[735,1043,742],{"class":741},[735,1045,746],{"class":745},[735,1047,1048],{"class":745}," import",[735,1050,1051],{"class":745}," --input",[735,1053,1054],{"class":940}," \u003C",[735,1056,1057],{"class":745},"fil",[735,1059,1060],{"class":752},"e",[735,1062,1063],{"class":940},">",[735,1065,753],{"class":752},[755,1067,1068,1080],{},[758,1069,1070],{},[761,1071,1072,1074,1076,1078],{},[764,1073,766],{},[764,1075,769],{},[764,1077,772],{},[764,1079,775],{},[777,1081,1082,1103,1121,1138,1155,1169],{},[761,1083,1084,1089,1094,1100],{},[782,1085,1086],{},[599,1087,1088],{},"--input",[782,1090,1091],{},[599,1092,1093],{},"-i",[782,1095,1096],{},[1097,1098,1099],"em",{},"required",[782,1101,1102],{},"Input DTCG JSON file path",[761,1104,1105,1109,1113,1118],{},[782,1106,1107],{},[599,1108,806],{},[782,1110,1111],{},[599,1112,811],{},[782,1114,1115],{},[599,1116,1117],{},"tokens.styleframe.ts",[782,1119,1120],{},"Output TypeScript file path",[761,1122,1123,1128,1130,1135],{},[782,1124,1125],{},[599,1126,1127],{},"--composables",[782,1129,847],{},[782,1131,1132],{},[599,1133,1134],{},"true",[782,1136,1137],{},"Use @styleframe/theme composables",[761,1139,1140,1145,1147,1152],{},[782,1141,1142],{},[599,1143,1144],{},"--rem",[782,1146,847],{},[782,1148,1149],{},[599,1150,1151],{},"false",[782,1153,1154],{},"Use rem units for dimensions",[761,1156,1157,1161,1163,1167],{},[782,1158,1159],{},[599,1160,844],{},[782,1162,847],{},[782,1164,1165],{},[599,1166,852],{},[782,1168,855],{},[761,1170,1171,1176,1178,1183],{},[782,1172,1173],{},[599,1174,1175],{},"--instanceName",[782,1177,847],{},[782,1179,1180],{},[599,1181,1182],{},"s",[782,1184,1185],{},"Styleframe instance variable name",[417,1187,1188],{},[423,1189,860],{},[726,1191,1193],{"className":728,"code":1192,"language":730,"meta":731,"style":731},"# Basic import\nstyleframe figma import -i tokens.json\n\n# Custom output path\nstyleframe figma import -i tokens.json -o src/theme/tokens.ts\n\n# With rem units\nstyleframe figma import -i tokens.json --rem --baseFontSize 16\n\n# Without composables (plain variables)\nstyleframe figma import -i tokens.json --composables false\n",[599,1194,1195,1200,1214,1218,1223,1241,1245,1250,1271,1276,1282],{"__ignoreMap":731},[735,1196,1197],{"class":737,"line":738},[735,1198,1199],{"class":870},"# Basic import\n",[735,1201,1202,1204,1206,1208,1211],{"class":737,"line":874},[735,1203,742],{"class":741},[735,1205,746],{"class":745},[735,1207,1048],{"class":745},[735,1209,1210],{"class":745}," -i",[735,1212,1213],{"class":745}," tokens.json\n",[735,1215,1216],{"class":737,"line":884},[735,1217,887],{"emptyLinePlaceholder":206},[735,1219,1220],{"class":737,"line":890},[735,1221,1222],{"class":870},"# Custom output path\n",[735,1224,1225,1227,1229,1231,1233,1236,1238],{"class":737,"line":896},[735,1226,742],{"class":741},[735,1228,746],{"class":745},[735,1230,1048],{"class":745},[735,1232,1210],{"class":745},[735,1234,1235],{"class":745}," tokens.json",[735,1237,911],{"class":745},[735,1239,1240],{"class":745}," src/theme/tokens.ts\n",[735,1242,1243],{"class":737,"line":917},[735,1244,887],{"emptyLinePlaceholder":206},[735,1246,1247],{"class":737,"line":922},[735,1248,1249],{"class":870},"# With rem units\n",[735,1251,1252,1254,1256,1258,1260,1262,1265,1268],{"class":737,"line":928},[735,1253,742],{"class":741},[735,1255,746],{"class":745},[735,1257,1048],{"class":745},[735,1259,1210],{"class":745},[735,1261,1235],{"class":745},[735,1263,1264],{"class":745}," --rem",[735,1266,1267],{"class":745}," --baseFontSize",[735,1269,1270],{"class":994}," 16\n",[735,1272,1274],{"class":737,"line":1273},9,[735,1275,887],{"emptyLinePlaceholder":206},[735,1277,1279],{"class":737,"line":1278},10,[735,1280,1281],{"class":870},"# Without composables (plain variables)\n",[735,1283,1285,1287,1289,1291,1293,1295,1298],{"class":737,"line":1284},11,[735,1286,742],{"class":741},[735,1288,746],{"class":745},[735,1290,1048],{"class":745},[735,1292,1210],{"class":745},[735,1294,1235],{"class":745},[735,1296,1297],{"class":745}," --composables",[735,1299,1300],{"class":940}," false\n",[417,1302,1303],{},[423,1304,1305],{},"Generated code example:",[726,1307,1311],{"className":1308,"code":1309,"language":1310,"meta":731,"style":731},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens, useSpacingDesignTokens } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { variable, ref, theme } = s;\n\n// Color variables\nconst { colorPrimary, colorSecondary } = useColorDesignTokens(s, {\n  primary: \"#006cff\",\n  secondary: \"#6c757d\",\n});\n\n// Spacing variables\nconst { spacingSm, spacingMd, spacingLg } = useSpacingDesignTokens(s, {\n  sm: \"8px\",\n  md: \"16px\",\n  lg: \"24px\",\n});\n\ntheme(\"dark\", (ctx) => {\n  ctx.variable(colorPrimary, \"#60a5fa\");\n  ctx.variable(colorSecondary, \"#9ca3af\");\n});\n\nexport default s;\n","ts",[599,1312,1313,1339,1367,1371,1391,1421,1425,1430,1458,1477,1493,1501,1506,1512,1544,1561,1578,1595,1604,1609,1641,1671,1698,1707,1712],{"__ignoreMap":731},[735,1314,1315,1319,1322,1325,1328,1330,1332,1334,1336],{"class":737,"line":738},[735,1316,1318],{"class":1317},"s7zQu","import",[735,1320,1321],{"class":940}," {",[735,1323,1324],{"class":752}," styleframe",[735,1326,1327],{"class":940}," }",[735,1329,968],{"class":1317},[735,1331,941],{"class":940},[735,1333,742],{"class":745},[735,1335,975],{"class":940},[735,1337,1338],{"class":940},";\n",[735,1340,1341,1343,1345,1348,1351,1354,1356,1358,1360,1363,1365],{"class":737,"line":874},[735,1342,1318],{"class":1317},[735,1344,1321],{"class":940},[735,1346,1347],{"class":752}," useColorDesignTokens",[735,1349,1350],{"class":940},",",[735,1352,1353],{"class":752}," useSpacingDesignTokens",[735,1355,1327],{"class":940},[735,1357,968],{"class":1317},[735,1359,941],{"class":940},[735,1361,1362],{"class":745},"@styleframe/theme",[735,1364,975],{"class":940},[735,1366,1338],{"class":940},[735,1368,1369],{"class":737,"line":884},[735,1370,887],{"emptyLinePlaceholder":206},[735,1372,1373,1377,1380,1383,1386,1389],{"class":737,"line":890},[735,1374,1376],{"class":1375},"spNyl","const",[735,1378,1379],{"class":752}," s ",[735,1381,1382],{"class":940},"=",[735,1384,1324],{"class":1385},"s2Zo4",[735,1387,1388],{"class":752},"()",[735,1390,1338],{"class":940},[735,1392,1393,1395,1397,1400,1402,1405,1407,1410,1413,1416,1419],{"class":737,"line":896},[735,1394,1376],{"class":1375},[735,1396,1321],{"class":940},[735,1398,1399],{"class":752}," variable",[735,1401,1350],{"class":940},[735,1403,1404],{"class":752}," ref",[735,1406,1350],{"class":940},[735,1408,1409],{"class":752}," theme ",[735,1411,1412],{"class":940},"}",[735,1414,1415],{"class":940}," =",[735,1417,1418],{"class":752}," s",[735,1420,1338],{"class":940},[735,1422,1423],{"class":737,"line":917},[735,1424,887],{"emptyLinePlaceholder":206},[735,1426,1427],{"class":737,"line":922},[735,1428,1429],{"class":870},"// Color variables\n",[735,1431,1432,1434,1436,1439,1441,1444,1446,1448,1450,1453,1455],{"class":737,"line":928},[735,1433,1376],{"class":1375},[735,1435,1321],{"class":940},[735,1437,1438],{"class":752}," colorPrimary",[735,1440,1350],{"class":940},[735,1442,1443],{"class":752}," colorSecondary ",[735,1445,1412],{"class":940},[735,1447,1415],{"class":940},[735,1449,1347],{"class":1385},[735,1451,1452],{"class":752},"(s",[735,1454,1350],{"class":940},[735,1456,1457],{"class":940}," {\n",[735,1459,1460,1464,1467,1469,1472,1474],{"class":737,"line":1273},[735,1461,1463],{"class":1462},"swJcz","  primary",[735,1465,1466],{"class":940},":",[735,1468,941],{"class":940},[735,1470,1471],{"class":745},"#006cff",[735,1473,975],{"class":940},[735,1475,1476],{"class":940},",\n",[735,1478,1479,1482,1484,1486,1489,1491],{"class":737,"line":1278},[735,1480,1481],{"class":1462},"  secondary",[735,1483,1466],{"class":940},[735,1485,941],{"class":940},[735,1487,1488],{"class":745},"#6c757d",[735,1490,975],{"class":940},[735,1492,1476],{"class":940},[735,1494,1495,1497,1499],{"class":737,"line":1284},[735,1496,1412],{"class":940},[735,1498,702],{"class":752},[735,1500,1338],{"class":940},[735,1502,1504],{"class":737,"line":1503},12,[735,1505,887],{"emptyLinePlaceholder":206},[735,1507,1509],{"class":737,"line":1508},13,[735,1510,1511],{"class":870},"// Spacing variables\n",[735,1513,1515,1517,1519,1522,1524,1527,1529,1532,1534,1536,1538,1540,1542],{"class":737,"line":1514},14,[735,1516,1376],{"class":1375},[735,1518,1321],{"class":940},[735,1520,1521],{"class":752}," spacingSm",[735,1523,1350],{"class":940},[735,1525,1526],{"class":752}," spacingMd",[735,1528,1350],{"class":940},[735,1530,1531],{"class":752}," spacingLg ",[735,1533,1412],{"class":940},[735,1535,1415],{"class":940},[735,1537,1353],{"class":1385},[735,1539,1452],{"class":752},[735,1541,1350],{"class":940},[735,1543,1457],{"class":940},[735,1545,1547,1550,1552,1554,1557,1559],{"class":737,"line":1546},15,[735,1548,1549],{"class":1462},"  sm",[735,1551,1466],{"class":940},[735,1553,941],{"class":940},[735,1555,1556],{"class":745},"8px",[735,1558,975],{"class":940},[735,1560,1476],{"class":940},[735,1562,1564,1567,1569,1571,1574,1576],{"class":737,"line":1563},16,[735,1565,1566],{"class":1462},"  md",[735,1568,1466],{"class":940},[735,1570,941],{"class":940},[735,1572,1573],{"class":745},"16px",[735,1575,975],{"class":940},[735,1577,1476],{"class":940},[735,1579,1581,1584,1586,1588,1591,1593],{"class":737,"line":1580},17,[735,1582,1583],{"class":1462},"  lg",[735,1585,1466],{"class":940},[735,1587,941],{"class":940},[735,1589,1590],{"class":745},"24px",[735,1592,975],{"class":940},[735,1594,1476],{"class":940},[735,1596,1598,1600,1602],{"class":737,"line":1597},18,[735,1599,1412],{"class":940},[735,1601,702],{"class":752},[735,1603,1338],{"class":940},[735,1605,1607],{"class":737,"line":1606},19,[735,1608,887],{"emptyLinePlaceholder":206},[735,1610,1612,1615,1618,1620,1623,1625,1627,1630,1634,1636,1639],{"class":737,"line":1611},20,[735,1613,1614],{"class":1385},"theme",[735,1616,1617],{"class":752},"(",[735,1619,975],{"class":940},[735,1621,1622],{"class":745},"dark",[735,1624,975],{"class":940},[735,1626,1350],{"class":940},[735,1628,1629],{"class":940}," (",[735,1631,1633],{"class":1632},"sHdIc","ctx",[735,1635,702],{"class":940},[735,1637,1638],{"class":1375}," =>",[735,1640,1457],{"class":940},[735,1642,1644,1647,1650,1653,1655,1658,1660,1662,1665,1667,1669],{"class":737,"line":1643},21,[735,1645,1646],{"class":752},"  ctx",[735,1648,1649],{"class":940},".",[735,1651,1652],{"class":1385},"variable",[735,1654,1617],{"class":1462},[735,1656,1657],{"class":752},"colorPrimary",[735,1659,1350],{"class":940},[735,1661,941],{"class":940},[735,1663,1664],{"class":745},"#60a5fa",[735,1666,975],{"class":940},[735,1668,702],{"class":1462},[735,1670,1338],{"class":940},[735,1672,1674,1676,1678,1680,1682,1685,1687,1689,1692,1694,1696],{"class":737,"line":1673},22,[735,1675,1646],{"class":752},[735,1677,1649],{"class":940},[735,1679,1652],{"class":1385},[735,1681,1617],{"class":1462},[735,1683,1684],{"class":752},"colorSecondary",[735,1686,1350],{"class":940},[735,1688,941],{"class":940},[735,1690,1691],{"class":745},"#9ca3af",[735,1693,975],{"class":940},[735,1695,702],{"class":1462},[735,1697,1338],{"class":940},[735,1699,1701,1703,1705],{"class":737,"line":1700},23,[735,1702,1412],{"class":940},[735,1704,702],{"class":752},[735,1706,1338],{"class":940},[735,1708,1710],{"class":737,"line":1709},24,[735,1711,887],{"emptyLinePlaceholder":206},[735,1713,1715,1718,1721,1723],{"class":737,"line":1714},25,[735,1716,1717],{"class":1317},"export",[735,1719,1720],{"class":1317}," default",[735,1722,1418],{"class":752},[735,1724,1338],{"class":940},[536,1726],{},[413,1728,1730],{"id":1729},"recommended-workflow","Recommended Workflow",[417,1732,1733],{},"Here's a typical workflow for syncing tokens between Styleframe and Figma:",[486,1735,1737],{"id":1736},"_1-define-tokens-in-styleframe","1. Define tokens in Styleframe",[726,1739,1741],{"className":1308,"code":1740,"language":1310,"meta":731,"style":731},"// styleframe.config.ts\nimport { styleframe } from 'styleframe';\n\nconst s = styleframe();\nconst { variable, theme, ref } = s;\n\nconst colorPrimary = variable('color.primary', '#006cff');\nconst colorBackground = variable('color.background', '#ffffff');\nconst spacingMd = variable('spacing.md', '16px');\n\ntheme('dark', (ctx) => {\n  ctx.variable(colorPrimary, '#60a5fa');\n  ctx.variable(colorBackground, '#1a1a1a');\n});\n\nexport default s;\n",[599,1742,1743,1748,1770,1774,1788,1814,1818,1850,1883,1915,1919,1943,1967,1993,2001,2005],{"__ignoreMap":731},[735,1744,1745],{"class":737,"line":738},[735,1746,1747],{"class":870},"// styleframe.config.ts\n",[735,1749,1750,1752,1754,1756,1758,1760,1763,1765,1768],{"class":737,"line":874},[735,1751,1318],{"class":1317},[735,1753,1321],{"class":940},[735,1755,1324],{"class":752},[735,1757,1327],{"class":940},[735,1759,968],{"class":1317},[735,1761,1762],{"class":940}," '",[735,1764,742],{"class":745},[735,1766,1767],{"class":940},"'",[735,1769,1338],{"class":940},[735,1771,1772],{"class":737,"line":884},[735,1773,887],{"emptyLinePlaceholder":206},[735,1775,1776,1778,1780,1782,1784,1786],{"class":737,"line":890},[735,1777,1376],{"class":1375},[735,1779,1379],{"class":752},[735,1781,1382],{"class":940},[735,1783,1324],{"class":1385},[735,1785,1388],{"class":752},[735,1787,1338],{"class":940},[735,1789,1790,1792,1794,1796,1798,1801,1803,1806,1808,1810,1812],{"class":737,"line":896},[735,1791,1376],{"class":1375},[735,1793,1321],{"class":940},[735,1795,1399],{"class":752},[735,1797,1350],{"class":940},[735,1799,1800],{"class":752}," theme",[735,1802,1350],{"class":940},[735,1804,1805],{"class":752}," ref ",[735,1807,1412],{"class":940},[735,1809,1415],{"class":940},[735,1811,1418],{"class":752},[735,1813,1338],{"class":940},[735,1815,1816],{"class":737,"line":917},[735,1817,887],{"emptyLinePlaceholder":206},[735,1819,1820,1822,1825,1827,1829,1831,1833,1836,1838,1840,1842,1844,1846,1848],{"class":737,"line":922},[735,1821,1376],{"class":1375},[735,1823,1824],{"class":752}," colorPrimary ",[735,1826,1382],{"class":940},[735,1828,1399],{"class":1385},[735,1830,1617],{"class":752},[735,1832,1767],{"class":940},[735,1834,1835],{"class":745},"color.primary",[735,1837,1767],{"class":940},[735,1839,1350],{"class":940},[735,1841,1762],{"class":940},[735,1843,1471],{"class":745},[735,1845,1767],{"class":940},[735,1847,702],{"class":752},[735,1849,1338],{"class":940},[735,1851,1852,1854,1857,1859,1861,1863,1865,1868,1870,1872,1874,1877,1879,1881],{"class":737,"line":928},[735,1853,1376],{"class":1375},[735,1855,1856],{"class":752}," colorBackground ",[735,1858,1382],{"class":940},[735,1860,1399],{"class":1385},[735,1862,1617],{"class":752},[735,1864,1767],{"class":940},[735,1866,1867],{"class":745},"color.background",[735,1869,1767],{"class":940},[735,1871,1350],{"class":940},[735,1873,1762],{"class":940},[735,1875,1876],{"class":745},"#ffffff",[735,1878,1767],{"class":940},[735,1880,702],{"class":752},[735,1882,1338],{"class":940},[735,1884,1885,1887,1890,1892,1894,1896,1898,1901,1903,1905,1907,1909,1911,1913],{"class":737,"line":1273},[735,1886,1376],{"class":1375},[735,1888,1889],{"class":752}," spacingMd ",[735,1891,1382],{"class":940},[735,1893,1399],{"class":1385},[735,1895,1617],{"class":752},[735,1897,1767],{"class":940},[735,1899,1900],{"class":745},"spacing.md",[735,1902,1767],{"class":940},[735,1904,1350],{"class":940},[735,1906,1762],{"class":940},[735,1908,1573],{"class":745},[735,1910,1767],{"class":940},[735,1912,702],{"class":752},[735,1914,1338],{"class":940},[735,1916,1917],{"class":737,"line":1278},[735,1918,887],{"emptyLinePlaceholder":206},[735,1920,1921,1923,1925,1927,1929,1931,1933,1935,1937,1939,1941],{"class":737,"line":1284},[735,1922,1614],{"class":1385},[735,1924,1617],{"class":752},[735,1926,1767],{"class":940},[735,1928,1622],{"class":745},[735,1930,1767],{"class":940},[735,1932,1350],{"class":940},[735,1934,1629],{"class":940},[735,1936,1633],{"class":1632},[735,1938,702],{"class":940},[735,1940,1638],{"class":1375},[735,1942,1457],{"class":940},[735,1944,1945,1947,1949,1951,1953,1955,1957,1959,1961,1963,1965],{"class":737,"line":1503},[735,1946,1646],{"class":752},[735,1948,1649],{"class":940},[735,1950,1652],{"class":1385},[735,1952,1617],{"class":1462},[735,1954,1657],{"class":752},[735,1956,1350],{"class":940},[735,1958,1762],{"class":940},[735,1960,1664],{"class":745},[735,1962,1767],{"class":940},[735,1964,702],{"class":1462},[735,1966,1338],{"class":940},[735,1968,1969,1971,1973,1975,1977,1980,1982,1984,1987,1989,1991],{"class":737,"line":1508},[735,1970,1646],{"class":752},[735,1972,1649],{"class":940},[735,1974,1652],{"class":1385},[735,1976,1617],{"class":1462},[735,1978,1979],{"class":752},"colorBackground",[735,1981,1350],{"class":940},[735,1983,1762],{"class":940},[735,1985,1986],{"class":745},"#1a1a1a",[735,1988,1767],{"class":940},[735,1990,702],{"class":1462},[735,1992,1338],{"class":940},[735,1994,1995,1997,1999],{"class":737,"line":1514},[735,1996,1412],{"class":940},[735,1998,702],{"class":752},[735,2000,1338],{"class":940},[735,2002,2003],{"class":737,"line":1546},[735,2004,887],{"emptyLinePlaceholder":206},[735,2006,2007,2009,2011,2013],{"class":737,"line":1563},[735,2008,1717],{"class":1317},[735,2010,1720],{"class":1317},[735,2012,1418],{"class":752},[735,2014,1338],{"class":940},[486,2016,2018],{"id":2017},"_2-export-to-dtcg-format","2. Export to DTCG format",[726,2020,2022],{"className":728,"code":2021,"language":730,"meta":731,"style":731},"styleframe figma export -o tokens.json\n",[599,2023,2024],{"__ignoreMap":731},[735,2025,2026,2028,2030,2032,2034],{"class":737,"line":738},[735,2027,742],{"class":741},[735,2029,746],{"class":745},[735,2031,749],{"class":745},[735,2033,911],{"class":745},[735,2035,1213],{"class":745},[486,2037,2039],{"id":2038},"_3-import-into-figma","3. Import into Figma",[570,2041,2042,2045,2051],{},[430,2043,2044],{},"Open the Styleframe Sync plugin in Figma",[430,2046,2047,2048,2050],{},"Drag ",[599,2049,601],{}," into the Import tab",[430,2052,2053],{},"Click Import",[486,2055,2057],{"id":2056},"_4-design-in-figma","4. Design in Figma",[417,2059,2060],{},"Use your variables in Figma as needed for components, styles, and layouts.",[413,2062,2064],{"id":2063},"dtcg-format","DTCG Format",[417,2066,2067],{},"Styleframe uses the W3C Design Tokens Community Group (DTCG) format for token interchange. This is an emerging standard supported by many design tools.",[417,2069,2070],{},[423,2071,2072],{},"Example DTCG structure:",[726,2074,2078],{"className":2075,"code":2076,"language":2077,"meta":731,"style":731},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"$schema\": \"https://design-tokens.github.io/community-group/format/\",\n  \"$extensions\": {\n    \"dev.styleframe\": {\n      \"collection\": \"Design Tokens\",\n      \"modes\": [\"Light\", \"Dark\"]\n    }\n  },\n  \"color\": {\n    \"primary\": {\n      \"$value\": \"#006cff\",\n      \"$type\": \"color\"\n    },\n    \"background\": {\n      \"$value\": \"#ffffff\",\n      \"$type\": \"color\"\n    }\n  },\n  \"$modifiers\": {\n    \"theme\": {\n      \"$type\": \"modifier\",\n      \"contexts\": {\n        \"Dark\": {\n          \"color\": {\n            \"primary\": { \"$value\": \"#60a5fa\" },\n            \"background\": { \"$value\": \"#1a1a1a\" }\n          }\n        }\n      }\n    }\n  }\n}\n","json",[599,2079,2080,2085,2106,2119,2133,2153,2186,2191,2196,2209,2222,2241,2258,2263,2276,2294,2310,2314,2318,2331,2343,2362,2375,2388,2402,2433,2463,2469,2475,2481,2486,2492],{"__ignoreMap":731},[735,2081,2082],{"class":737,"line":738},[735,2083,2084],{"class":940},"{\n",[735,2086,2087,2090,2093,2095,2097,2099,2102,2104],{"class":737,"line":874},[735,2088,2089],{"class":940},"  \"",[735,2091,2092],{"class":1375},"$schema",[735,2094,975],{"class":940},[735,2096,1466],{"class":940},[735,2098,941],{"class":940},[735,2100,2101],{"class":745},"https://design-tokens.github.io/community-group/format/",[735,2103,975],{"class":940},[735,2105,1476],{"class":940},[735,2107,2108,2110,2113,2115,2117],{"class":737,"line":884},[735,2109,2089],{"class":940},[735,2111,2112],{"class":1375},"$extensions",[735,2114,975],{"class":940},[735,2116,1466],{"class":940},[735,2118,1457],{"class":940},[735,2120,2121,2124,2127,2129,2131],{"class":737,"line":890},[735,2122,2123],{"class":940},"    \"",[735,2125,2126],{"class":741},"dev.styleframe",[735,2128,975],{"class":940},[735,2130,1466],{"class":940},[735,2132,1457],{"class":940},[735,2134,2135,2138,2141,2143,2145,2147,2149,2151],{"class":737,"line":896},[735,2136,2137],{"class":940},"      \"",[735,2139,2140],{"class":994},"collection",[735,2142,975],{"class":940},[735,2144,1466],{"class":940},[735,2146,941],{"class":940},[735,2148,150],{"class":745},[735,2150,975],{"class":940},[735,2152,1476],{"class":940},[735,2154,2155,2157,2160,2162,2164,2167,2169,2172,2174,2176,2178,2181,2183],{"class":737,"line":917},[735,2156,2137],{"class":940},[735,2158,2159],{"class":994},"modes",[735,2161,975],{"class":940},[735,2163,1466],{"class":940},[735,2165,2166],{"class":940}," [",[735,2168,975],{"class":940},[735,2170,2171],{"class":745},"Light",[735,2173,975],{"class":940},[735,2175,1350],{"class":940},[735,2177,941],{"class":940},[735,2179,2180],{"class":745},"Dark",[735,2182,975],{"class":940},[735,2184,2185],{"class":940},"]\n",[735,2187,2188],{"class":737,"line":922},[735,2189,2190],{"class":940},"    }\n",[735,2192,2193],{"class":737,"line":928},[735,2194,2195],{"class":940},"  },\n",[735,2197,2198,2200,2203,2205,2207],{"class":737,"line":1273},[735,2199,2089],{"class":940},[735,2201,2202],{"class":1375},"color",[735,2204,975],{"class":940},[735,2206,1466],{"class":940},[735,2208,1457],{"class":940},[735,2210,2211,2213,2216,2218,2220],{"class":737,"line":1278},[735,2212,2123],{"class":940},[735,2214,2215],{"class":741},"primary",[735,2217,975],{"class":940},[735,2219,1466],{"class":940},[735,2221,1457],{"class":940},[735,2223,2224,2226,2229,2231,2233,2235,2237,2239],{"class":737,"line":1284},[735,2225,2137],{"class":940},[735,2227,2228],{"class":994},"$value",[735,2230,975],{"class":940},[735,2232,1466],{"class":940},[735,2234,941],{"class":940},[735,2236,1471],{"class":745},[735,2238,975],{"class":940},[735,2240,1476],{"class":940},[735,2242,2243,2245,2248,2250,2252,2254,2256],{"class":737,"line":1503},[735,2244,2137],{"class":940},[735,2246,2247],{"class":994},"$type",[735,2249,975],{"class":940},[735,2251,1466],{"class":940},[735,2253,941],{"class":940},[735,2255,2202],{"class":745},[735,2257,947],{"class":940},[735,2259,2260],{"class":737,"line":1508},[735,2261,2262],{"class":940},"    },\n",[735,2264,2265,2267,2270,2272,2274],{"class":737,"line":1514},[735,2266,2123],{"class":940},[735,2268,2269],{"class":741},"background",[735,2271,975],{"class":940},[735,2273,1466],{"class":940},[735,2275,1457],{"class":940},[735,2277,2278,2280,2282,2284,2286,2288,2290,2292],{"class":737,"line":1546},[735,2279,2137],{"class":940},[735,2281,2228],{"class":994},[735,2283,975],{"class":940},[735,2285,1466],{"class":940},[735,2287,941],{"class":940},[735,2289,1876],{"class":745},[735,2291,975],{"class":940},[735,2293,1476],{"class":940},[735,2295,2296,2298,2300,2302,2304,2306,2308],{"class":737,"line":1563},[735,2297,2137],{"class":940},[735,2299,2247],{"class":994},[735,2301,975],{"class":940},[735,2303,1466],{"class":940},[735,2305,941],{"class":940},[735,2307,2202],{"class":745},[735,2309,947],{"class":940},[735,2311,2312],{"class":737,"line":1580},[735,2313,2190],{"class":940},[735,2315,2316],{"class":737,"line":1597},[735,2317,2195],{"class":940},[735,2319,2320,2322,2325,2327,2329],{"class":737,"line":1606},[735,2321,2089],{"class":940},[735,2323,2324],{"class":1375},"$modifiers",[735,2326,975],{"class":940},[735,2328,1466],{"class":940},[735,2330,1457],{"class":940},[735,2332,2333,2335,2337,2339,2341],{"class":737,"line":1611},[735,2334,2123],{"class":940},[735,2336,1614],{"class":741},[735,2338,975],{"class":940},[735,2340,1466],{"class":940},[735,2342,1457],{"class":940},[735,2344,2345,2347,2349,2351,2353,2355,2358,2360],{"class":737,"line":1643},[735,2346,2137],{"class":940},[735,2348,2247],{"class":994},[735,2350,975],{"class":940},[735,2352,1466],{"class":940},[735,2354,941],{"class":940},[735,2356,2357],{"class":745},"modifier",[735,2359,975],{"class":940},[735,2361,1476],{"class":940},[735,2363,2364,2366,2369,2371,2373],{"class":737,"line":1673},[735,2365,2137],{"class":940},[735,2367,2368],{"class":994},"contexts",[735,2370,975],{"class":940},[735,2372,1466],{"class":940},[735,2374,1457],{"class":940},[735,2376,2377,2380,2382,2384,2386],{"class":737,"line":1700},[735,2378,2379],{"class":940},"        \"",[735,2381,2180],{"class":1462},[735,2383,975],{"class":940},[735,2385,1466],{"class":940},[735,2387,1457],{"class":940},[735,2389,2390,2393,2396,2398,2400],{"class":737,"line":1709},[735,2391,2392],{"class":940},"          \"",[735,2394,2202],{"class":2395},"su27w",[735,2397,975],{"class":940},[735,2399,1466],{"class":940},[735,2401,1457],{"class":940},[735,2403,2404,2407,2409,2411,2413,2415,2417,2420,2422,2424,2426,2428,2430],{"class":737,"line":1714},[735,2405,2406],{"class":940},"            \"",[735,2408,2215],{"class":1385},[735,2410,975],{"class":940},[735,2412,1466],{"class":940},[735,2414,1321],{"class":940},[735,2416,941],{"class":940},[735,2418,2228],{"class":2419},"sfNiH",[735,2421,975],{"class":940},[735,2423,1466],{"class":940},[735,2425,941],{"class":940},[735,2427,1664],{"class":745},[735,2429,975],{"class":940},[735,2431,2432],{"class":940}," },\n",[735,2434,2436,2438,2440,2442,2444,2446,2448,2450,2452,2454,2456,2458,2460],{"class":737,"line":2435},26,[735,2437,2406],{"class":940},[735,2439,2269],{"class":1385},[735,2441,975],{"class":940},[735,2443,1466],{"class":940},[735,2445,1321],{"class":940},[735,2447,941],{"class":940},[735,2449,2228],{"class":2419},[735,2451,975],{"class":940},[735,2453,1466],{"class":940},[735,2455,941],{"class":940},[735,2457,1986],{"class":745},[735,2459,975],{"class":940},[735,2461,2462],{"class":940}," }\n",[735,2464,2466],{"class":737,"line":2465},27,[735,2467,2468],{"class":940},"          }\n",[735,2470,2472],{"class":737,"line":2471},28,[735,2473,2474],{"class":940},"        }\n",[735,2476,2478],{"class":737,"line":2477},29,[735,2479,2480],{"class":940},"      }\n",[735,2482,2484],{"class":737,"line":2483},30,[735,2485,2190],{"class":940},[735,2487,2489],{"class":737,"line":2488},31,[735,2490,2491],{"class":940},"  }\n",[735,2493,2495],{"class":737,"line":2494},32,[735,2496,2497],{"class":940},"}\n",[525,2499,2500,2503,2504,1649],{},[423,2501,2502],{},"Pro tip",": Learn more about the DTCG format at ",[494,2505,2508],{"href":2506,"rel":2507,"target":499},"https://www.designtokens.org/",[498],"designtokens.org",[413,2510,2512],{"id":2511},"best-practices","Best Practices",[427,2514,2515,2521,2533,2543],{},[430,2516,2517,2520],{},[423,2518,2519],{},"Keep code as the source of truth",": Define tokens in Styleframe first, then sync to Figma",[430,2522,2523,2526,2527,2529,2530],{},[423,2524,2525],{},"Use semantic token names",": ",[599,2528,1835],{}," instead of ",[599,2531,2532],{},"color.blue",[430,2534,2535,2538,2539,2542],{},[423,2536,2537],{},"Organize with groups",": Use dot notation (",[599,2540,2541],{},"color.background.primary",") for hierarchy",[430,2544,2545,2548,2549,2552],{},[423,2546,2547],{},"Export tokens in CI/CD",": Automate ",[599,2550,2551],{},"styleframe figma export"," on every commit to generate fresh token files",[413,2554,2556],{"id":2555},"faq","FAQ",[2558,2559,2560,2594,2598,2609,2626,2630],"accordion",{},[2561,2562,2565,2568],"accordion-item",{"icon":2563,"label":2564},"i-lucide-circle-help","What token types are supported?",[417,2566,2567],{},"Styleframe supports four token types that map to Figma variable types:",[427,2569,2570,2576,2582,2588],{},[430,2571,2572,2575],{},[423,2573,2574],{},"Color",": CSS color values (hex, rgb, hsl, etc.) → Figma Color",[430,2577,2578,2581],{},[423,2579,2580],{},"Number/Dimension",": Numeric values with units (16px, 1rem) → Figma Number",[430,2583,2584,2587],{},[423,2585,2586],{},"String",": Text values → Figma String",[430,2589,2590,2593],{},[423,2591,2592],{},"Boolean",": true/false values → Figma Boolean",[2561,2595,2597],{"icon":2563,"label":2596},"How are themes/modes handled?","Styleframe themes become Figma modes. When you export tokens, the default theme becomes the first mode (usually \"Light\"), and each additional theme (like \"dark\") becomes a separate mode. Token overrides in themes are preserved as mode-specific values.",[2561,2599,2601,2602,2605,2606,2608],{"icon":2563,"label":2600},"Are variable aliases preserved?","Yes! When you export from Styleframe, token references using ",[599,2603,2604],{},"ref()"," are converted to DTCG alias syntax (",[599,2607,701],{},"). When imported into Figma, these become native Figma variable references. The same applies in reverse when exporting from Figma.",[2561,2610,2612,2613,2615,2616,2621,2622,2625],{"icon":2563,"label":2611},"Can I use this with CI/CD pipelines?","Yes, the CLI is designed for automation. Add ",[599,2614,2551],{}," to your build pipeline to generate fresh token files on every commit. Note that Figma's ",[494,2617,2620],{"href":2618,"rel":2619,"target":499},"https://developers.figma.com/docs/rest-api/variables-endpoints/",[498],"Variables REST API"," for programmatically importing tokens is only available to ",[423,2623,2624],{},"Enterprise"," organization members. For other plans, you'll need to use the plugin manually to import the generated JSON.",[2561,2627,2629],{"icon":2563,"label":2628},"What happens to existing Figma variables?","When importing tokens, the plugin updates existing variables with matching names rather than creating duplicates. New variables are added, and existing values are overwritten with the imported values.",[2561,2631,2633],{"icon":2563,"label":2632},"Is the plugin free?","Yes, the Figma plugin and CLI are completely free and open source. No subscriptions, no seat limits, no premium features hidden behind a paywall.",[2635,2636,2637],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .su27w, html code.shiki .su27w{--shiki-light:#916B53;--shiki-default:#916B53;--shiki-dark:#916B53}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":731,"searchDepth":874,"depth":874,"links":2639},[2640,2641,2642,2647,2651,2655,2661,2662,2663],{"id":415,"depth":874,"text":64},{"id":462,"depth":874,"text":463},{"id":480,"depth":874,"text":481,"children":2643},[2644,2645,2646],{"id":488,"depth":884,"text":489},{"id":504,"depth":884,"text":505},{"id":515,"depth":884,"text":516},{"id":540,"depth":874,"text":541,"children":2648},[2649,2650],{"id":555,"depth":884,"text":556},{"id":637,"depth":884,"text":638},{"id":713,"depth":874,"text":714,"children":2652},[2653,2654],{"id":720,"depth":884,"text":721},{"id":1030,"depth":884,"text":1031},{"id":1729,"depth":874,"text":1730,"children":2656},[2657,2658,2659,2660],{"id":1736,"depth":884,"text":1737},{"id":2017,"depth":884,"text":2018},{"id":2038,"depth":884,"text":2039},{"id":2056,"depth":884,"text":2057},{"id":2063,"depth":874,"text":2064},{"id":2511,"depth":874,"text":2512},{"id":2555,"depth":874,"text":2556},"Sync your Styleframe design tokens with Figma using the plugin and CLI commands for bidirectional token synchronization.","md",null,{},{"icon":51},{"title":48,"description":2664},{"loc":49},"g3hl1-6b1SAQ9snjomhpE-YClayuUfrS1el0_61Hzkw",[2673,2675],{"title":43,"path":44,"stem":45,"description":2674,"icon":46,"children":-1},"Automatically detect utility class names in your source files and generate the corresponding CSS at build time — no manual value definitions needed.",{"title":53,"path":54,"stem":55,"description":2676,"icon":56,"children":-1},"Understanding Styleframe's Open Source MIT license and Styleframe Pro's commercial license for production use.",1776621128271]