{ "extractedAt": "2026-05-08T03:56:19.859Z", "figmaFileKey": "YbsPRUVmNdsbN40NNwh1Gn", "figmaName": "Step/Item", "nodeId": "4943:7310", "type": "COMPONENT_SET", "pageId": "4265:5942", "pageName": "— — Other Components", "description": "Step item. direction(horizontal/vertical) × style(number/icon) × state(pending/active/completed). Combine multiple instances side by side to build a full Step bar.", "key": "b49b054d3e6ecdc0e7795665aac7625406670b1b", "variants": [ { "id": "4943:7244", "name": "direction=horizontal, style=number, state=completed", "type": "COMPONENT", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "h": 55, "w": 120, "x": 11420, "y": 523, "pH": null, "pV": null, "pR": null, "pB": null, "gap": 6, "r": null, "layoutMode": "VERTICAL", "primaryAxisAlignItems": "CENTER", "counterAxisAlignItems": "CENTER", "fills": [], "strokes": [], "strokeWeight": 1, "effects": [], "text": { "characters": "Step Title", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "size": 14, "fontFamily": "Roboto", "fontWeight": 400, "lineHeightPx": 21, "letterSpacing": 0, "textCase": null, "textDecoration": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#2fb54e", "v": "VariableID:VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102", "token": { "cssVar": "--brand", "figmaName": "UX/Brand/Brand", "variableId": "VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102", "strategy": "hex-fallback" } } ], "v": null, "compositeToken": null }, "vectorNodeIds": [ "I4943:7248;1480:74525", "I4943:7248;1480:76742" ], "description": null, "componentSetId": "4943:7310", "componentPropertyReferences": null }, { "id": "4943:7237", "name": "direction=horizontal, style=number, state=active", "type": "COMPONENT", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "h": 50, "w": 120, "x": 11600, "y": 523, "pH": null, "pV": null, "pR": null, "pB": null, "gap": 6, "r": null, "layoutMode": "VERTICAL", "primaryAxisAlignItems": "CENTER", "counterAxisAlignItems": "CENTER", "fills": [], "strokes": [], "strokeWeight": 1, "effects": [], "text": { "characters": "2", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "size": 16, "fontFamily": "Roboto", "fontWeight": 600, "lineHeightPx": 24, "letterSpacing": 0, "textCase": null, "textDecoration": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#ffffff", "v": "VariableID:VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/3010:115", "token": { "cssVar": "--text-primary-btn", "figmaName": null, "variableId": "VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/3010:115", "strategy": "direct-variable-id-map" } } ], "v": null, "compositeToken": null }, "vectorNodeIds": [], "description": null, "componentSetId": "4943:7310", "componentPropertyReferences": null }, { "id": "4943:7230", "name": "direction=horizontal, style=number, state=pending", "type": "COMPONENT", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "h": 55, "w": 120, "x": 11780, "y": 523, "pH": null, "pV": null, "pR": null, "pB": null, "gap": 6, "r": null, "layoutMode": "VERTICAL", "primaryAxisAlignItems": "CENTER", "counterAxisAlignItems": "CENTER", "fills": [], "strokes": [], "strokeWeight": 1, "effects": [], "text": { "characters": "3", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "size": 16, "fontFamily": "Roboto", "fontWeight": 600, "lineHeightPx": 24, "letterSpacing": 0, "textCase": null, "textDecoration": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:2611:57611", "token": { "cssVar": "--text-placeholder", "figmaName": "Color Type/Text/Placeholder & Button", "variableId": "VariableID:2611:57611", "strategy": "normalized-variable-id" } } ], "v": null, "compositeToken": null }, "vectorNodeIds": [], "description": null, "componentSetId": "4943:7310", "componentPropertyReferences": null }, { "id": "4943:7299", "name": "direction=horizontal, style=icon, state=completed", "type": "COMPONENT", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "h": 59, "w": 120, "x": 11420, "y": 626, "pH": null, "pV": null, "pR": null, "pB": null, "gap": 6, "r": null, "layoutMode": "VERTICAL", "primaryAxisAlignItems": "CENTER", "counterAxisAlignItems": "CENTER", "fills": [], "strokes": [], "strokeWeight": 1, "effects": [], "text": { "characters": "Step Title", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "size": 14, "fontFamily": "Roboto", "fontWeight": 400, "lineHeightPx": 21, "letterSpacing": 0, "textCase": null, "textDecoration": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#2fb54e", "v": "VariableID:VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102", "token": { "cssVar": "--brand", "figmaName": "UX/Brand/Brand", "variableId": "VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102", "strategy": "hex-fallback" } } ], "v": null, "compositeToken": null }, "vectorNodeIds": [ "I4944:355;1585:15659", "I4944:355;1585:15671" ], "description": null, "componentSetId": "4943:7310", "componentPropertyReferences": null }, { "id": "4943:7288", "name": "direction=horizontal, style=icon, state=active", "type": "COMPONENT", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "h": 54, "w": 120, "x": 11600, "y": 626, "pH": null, "pV": null, "pR": null, "pB": null, "gap": 6, "r": null, "layoutMode": "VERTICAL", "primaryAxisAlignItems": "CENTER", "counterAxisAlignItems": "CENTER", "fills": [], "strokes": [], "strokeWeight": 1, "effects": [], "text": { "characters": "Step Title", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "size": 14, "fontFamily": "Roboto", "fontWeight": 600, "lineHeightPx": 16.40625, "letterSpacing": 0, "textCase": null, "textDecoration": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#ffffff", "v": "VariableID:VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/3010:115", "token": { "cssVar": "--text-primary-btn", "figmaName": null, "variableId": "VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/3010:115", "strategy": "direct-variable-id-map" } } ], "v": null, "compositeToken": null }, "vectorNodeIds": [ "I4944:372;1355:28788", "I4944:372;1355:28791", "I4944:372;1355:28794", "I4944:372;1355:28810" ], "description": null, "componentSetId": "4943:7310", "componentPropertyReferences": null }, { "id": "4943:7277", "name": "direction=horizontal, style=icon, state=pending", "type": "COMPONENT", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "h": 59, "w": 120, "x": 11780, "y": 626, "pH": null, "pV": null, "pR": null, "pB": null, "gap": 6, "r": null, "layoutMode": "VERTICAL", "primaryAxisAlignItems": "CENTER", "counterAxisAlignItems": "CENTER", "fills": [], "strokes": [], "strokeWeight": 1, "effects": [], "text": { "characters": "Step Title", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "size": 14, "fontFamily": "Roboto", "fontWeight": 400, "lineHeightPx": 21, "letterSpacing": 0, "textCase": null, "textDecoration": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:2611:57611", "token": { "cssVar": "--text-placeholder", "figmaName": "Color Type/Text/Placeholder & Button", "variableId": "VariableID:2611:57611", "strategy": "normalized-variable-id" } } ], "v": null, "compositeToken": null }, "vectorNodeIds": [ "I4944:414;1591:23451", "I4944:414;1591:23452", "I4944:414;1591:23466", "I4944:414;1591:23520" ], "description": null, "componentSetId": "4943:7310", "componentPropertyReferences": null }, { "id": "4943:7267", "name": "direction=vertical, style=number, state=completed", "type": "COMPONENT", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "h": 68, "w": 140, "x": 11420, "y": 733, "pH": null, "pV": null, "pR": null, "pB": null, "gap": 12, "r": null, "layoutMode": "HORIZONTAL", "primaryAxisAlignItems": null, "counterAxisAlignItems": null, "fills": [], "strokes": [], "strokeWeight": 1, "effects": [], "text": { "characters": "Step Title", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "size": 14, "fontFamily": "Roboto", "fontWeight": 400, "lineHeightPx": 21, "letterSpacing": 0, "textCase": null, "textDecoration": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#2fb54e", "v": "VariableID:VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102", "token": { "cssVar": "--brand", "figmaName": "UX/Brand/Brand", "variableId": "VariableID:ea8c23833b46a0c9905a5aed05bf668593a611ce/3010:102", "strategy": "hex-fallback" } } ], "v": null, "compositeToken": null }, "vectorNodeIds": [ "I4944:351;1480:74525", "I4944:351;1480:76742" ], "description": null, "componentSetId": "4943:7310", "componentPropertyReferences": null }, { "id": "4943:7261", "name": "direction=vertical, style=number, state=active", "type": "COMPONENT", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "h": 68, "w": 140, "x": 11620, "y": 733, "pH": null, "pV": null, "pR": null, "pB": null, "gap": 12, "r": null, "layoutMode": "HORIZONTAL", "primaryAxisAlignItems": null, "counterAxisAlignItems": null, "fills": [], "strokes": [], "strokeWeight": 1, "effects": [], "text": { "characters": "2", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "size": 16, "fontFamily": "Roboto", "fontWeight": 600, "lineHeightPx": 24, "letterSpacing": 0, "textCase": null, "textDecoration": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#ffffff", "v": "VariableID:VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/3010:115", "token": { "cssVar": "--text-primary-btn", "figmaName": null, "variableId": "VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/3010:115", "strategy": "direct-variable-id-map" } } ], "v": null, "compositeToken": null }, "vectorNodeIds": [], "description": null, "componentSetId": "4943:7310", "componentPropertyReferences": null }, { "id": "4943:7255", "name": "direction=vertical, style=number, state=pending", "type": "COMPONENT", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "h": 68, "w": 140, "x": 11820, "y": 733, "pH": null, "pV": null, "pR": null, "pB": null, "gap": 12, "r": null, "layoutMode": "HORIZONTAL", "primaryAxisAlignItems": null, "counterAxisAlignItems": null, "fills": [], "strokes": [], "strokeWeight": 1, "effects": [], "text": { "characters": "3", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "size": 16, "fontFamily": "Roboto", "fontWeight": 600, "lineHeightPx": 24, "letterSpacing": 0, "textCase": null, "textDecoration": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:2611:57611", "token": { "cssVar": "--text-placeholder", "figmaName": "Color Type/Text/Placeholder & Button", "variableId": "VariableID:2611:57611", "strategy": "normalized-variable-id" } } ], "v": null, "compositeToken": null }, "vectorNodeIds": [], "description": null, "componentSetId": "4943:7310", "componentPropertyReferences": null } ], "tokenizedAt": "2026-05-08T04:02:55.947Z", "tokenizationStrategy": "variable-id-first-then-hex-fallback", "source": { "sourceLayer": "figma-data/raw/components", "sourceFile": "figma-data/raw/components/step_item__4943_7310.json", "rawExtractedAt": "2026-05-08T03:56:19.859Z", "rawNodeId": "4943:7310", "rawSha256": "615bd3a0f1d3767cd33dc8fc4bf4c98f47bd2d989b17780af43508d12607d27c" } }