git:20260826.dfbfa9d to git:20260826.bd10424

---

name: tokens

description: Audits whether the colors on a Figma frame or page are bound to design system tokens, and maps and binds hardcoded colors to the right token. Derives token-to-hex from bindings already in the file so every mapping has evidence, grades the results, and auto-proposes only the safe ones. Lint mode (check only) and bind mode are separate. Which library and which token groups come from the design_system section of figma-conventions.yaml; on auto it detects the library the file is connected to. Triggers - "/fig:tokens", "check the token bindings", "find unbound colors", "토큰 바인딩 검수", "하드코딩 색상 검사", "디자인시스템 연동 점검".

allowed-tools: AskUserQuestion, mcp__plugin_figma_figma__use_figma, mcp__plugin_figma_figma__search_design_system, mcp__plugin_figma_figma__get_screenshot, mcp__plugin_figma_figma__get_metadata

---

## When to invoke

## When NOT to invoke

## Inputs

|---|---|

|---|---|---|

## Procedure

```js

function hex(c){const f=x=>Math.round(x*255).toString(16).padStart(2,"0").toUpperCase();return "#"+f(c.r)+f(c.g)+f(c.b);}

function insideInstance(n){let p=n.parent;while(p){if(p.type==="INSTANCE")return true;p=p.parent;}return false;}

```

```js

const map={}; // varId -> {name, hexes:{}, count}

for(const id of ROOT_IDS){

const root=await figma.getNodeByIdAsync(id);

for(const n of [root,...root.findAll(()=>true)]){

for(const key of ["fills","strokes"]){

const arr=n[key]; if(!Array.isArray(arr)) continue;

for(const p of arr){

if(p.type==="SOLID"&&p.visible!==false&&p.boundVariables&&p.boundVariables.color){

const vid=p.boundVariables.color.id;

if(!map[vid]){const v=await figma.variables.getVariableByIdAsync(vid);map[vid]={name:v?v.name:"?",hexes:{},count:0};}

map[vid].count++; const h=hex(p.color); map[vid].hexes[h]=(map[vid].hexes[h]||0)+1;

}

}

}

}

}

return Object.values(map).map(e=>({name:e.name,count:e.count,hex:Object.keys(e.hexes).join(",")}));

```

```js

const agg={};

for(const id of ROOT_IDS){

const root=await figma.getNodeByIdAsync(id);

for(const n of [root,...root.findAll(()=>true)]){

const ii=insideInstance(n);

for(const key of ["fills","strokes"]){

const arr=n[key]; if(!Array.isArray(arr)) continue;

for(const p of arr){

if(p.type!=="SOLID"||p.visible===false) continue;

if(p.boundVariables&&p.boundVariables.color) continue;

const k=key+"|"+hex(p.color);

if(!agg[k]) agg[k]={prop:key,hex:hex(p.color),editable:0,inInstance:0,examples:[]};

agg[k][ii?"inInstance":"editable"]++;

if(agg[k].examples.length<4) agg[k].examples.push((ii?"⟨inst⟩":"")+n.name+" ["+n.type+"]");

}

}

}

}

return Object.values(agg).sort((a,b)=>b.editable-a.editable);

```

```js

const V={ tokenA: await figma.variables.importVariableByKeyAsync("KEY_A"), /* ... */ };

const fillMap={"#FFFFFF":V.tokenA, /* hex: variable */ };

const strokeMap={/* ... */};

const counts={};

const root=await figma.getNodeByIdAsync(FRAME_ID);

for(const n of [root,...root.findAll(()=>true)]){

for(const [key,mapObj] of [["fills",fillMap],["strokes",strokeMap]]){

const arr=n[key]; if(!Array.isArray(arr)||!arr.length) continue;

let changed=false;

const next=arr.map(p=>{

if(p.type==="SOLID"&&p.visible!==false&&!(p.boundVariables&&p.boundVariables.color)){

const v=mapObj[hex(p.color)];

if(v){changed=true;counts[v.name]=(counts[v.name]||0)+1;return figma.variables.setBoundVariableForPaint(p,"color",v);}

}

});

if(changed) n[key]=next;

}

}

return {frame:FRAME_ID, counts};

```

```js

let editableLeft=0;

for(const id of ROOT_IDS){

const root=await figma.getNodeByIdAsync(id);

for(const n of [root,...root.findAll(()=>true)]){

if(insideInstance(n)) continue;

for(const key of ["fills","strokes"]){

const arr=n[key]; if(!Array.isArray(arr)) continue;

for(const p of arr){

if(p.type==="SOLID"&&p.visible!==false&&!(p.boundVariables&&p.boundVariables.color)&&TARGET_HEXES.includes(hex(p.color))) editableLeft++;

}

}

}

}

```

## Constraints

## Notes