{ "extractedAt": "2026-06-09T09:35:48.751Z", "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", "layoutSizingHorizontal": "FIXED", "layoutSizingVertical": "HUG", "primaryAxisSizingMode": null, "counterAxisSizingMode": "FIXED", "subnodeCount": 2, "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" ], "children": [ { "id": "4943:7245", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 120, "h": 28, "x": 11420, "y": 523, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 0, "blendMode": "NORMAL", "hex": "#000000" } ], "strokes": [], "children": [ { "id": "4943:7246", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 40, "h": 2, "x": 11426, "y": 536, "r": 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" } } ], "strokes": [] }, { "id": "4943:7247", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 28, "h": 28, "x": 11466, "y": 523, "r": 14, "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" } } ], "strokes": [], "children": [ { "id": "4943:7248", "name": "icon/Edit/Selected", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 16, "h": 16, "x": 11472, "y": 529, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#f8f8f8", "v": "VariableID:VariableID:4263:102", "token": { "cssVar": "--text-primary-btn", "figmaName": "Color Type/Text/Primary Button", "variableId": "VariableID:4263:102", "strategy": "normalized-variable-id" } } ], "strokes": [], "componentId": "1128:23193" } ] }, { "id": "4943:7253", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 40, "h": 2, "x": 11494, "y": 536, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] } ] }, { "id": "4943:7254", "name": "Step Title", "type": "TEXT", "visible": true, "opacity": 1, "w": 120, "h": 21, "x": 11420, "y": 557, "r": 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" } } ], "strokes": [], "characters": "Step Title" } ], "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", "layoutSizingHorizontal": "FIXED", "layoutSizingVertical": "HUG", "primaryAxisSizingMode": null, "counterAxisSizingMode": "FIXED", "subnodeCount": 2, "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": "#f8f8f8", "v": "VariableID:VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/5774:2" } ], "v": null, "compositeToken": null }, "vectorNodeIds": [], "children": [ { "id": "4943:7238", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 120, "h": 28, "x": 11600, "y": 523, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 0, "blendMode": "NORMAL", "hex": "#000000" } ], "strokes": [], "children": [ { "id": "4943:7239", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 40, "h": 2, "x": 11606, "y": 536, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] }, { "id": "4943:7240", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 28, "h": 28, "x": 11646, "y": 523, "r": 14, "fills": [ { "type": "SOLID", "visible": true, "opacity": 0, "blendMode": "NORMAL", "hex": "#000000" } ], "strokes": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#f8f8f8", "v": "VariableID:VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/5774:2" } ], "children": [ { "id": "4943:7241", "name": "2", "type": "TEXT", "visible": true, "opacity": 1, "w": 10, "h": 24, "x": 11655, "y": 525, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#f8f8f8", "v": "VariableID:VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/5774:2", "token": { "cssVar": "--bg-layer2", "figmaName": "Color Type/Background/Layer_2", "variableId": "VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/5774:2", "strategy": "hex-fallback" } } ], "strokes": [], "characters": "2" } ] }, { "id": "4943:7242", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 40, "h": 2, "x": 11674, "y": 536, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] } ] }, { "id": "4943:7243", "name": "Step Title", "type": "TEXT", "visible": true, "opacity": 1, "w": 120, "h": 16, "x": 11600, "y": 557, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#f8f8f8", "v": "VariableID:VariableID:2611:57509", "token": { "cssVar": "--text-body", "figmaName": "Color Type/Text/Text_1", "variableId": "VariableID:2611:57509", "strategy": "normalized-variable-id" } } ], "strokes": [], "characters": "Step Title" } ], "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", "layoutSizingHorizontal": "FIXED", "layoutSizingVertical": "HUG", "primaryAxisSizingMode": null, "counterAxisSizingMode": "FIXED", "subnodeCount": 2, "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": [], "children": [ { "id": "4943:7231", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 120, "h": 28, "x": 11780, "y": 523, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 0, "blendMode": "NORMAL", "hex": "#000000" } ], "strokes": [], "children": [ { "id": "4943:7232", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 40, "h": 2, "x": 11786, "y": 536, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] }, { "id": "4943:7233", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 28, "h": 28, "x": 11826, "y": 523, "r": 14, "fills": [ { "type": "SOLID", "visible": true, "opacity": 0, "blendMode": "NORMAL", "hex": "#000000" } ], "strokes": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "children": [ { "id": "4943:7234", "name": "3", "type": "TEXT", "visible": true, "opacity": 1, "w": 10, "h": 24, "x": 11835, "y": 525, "r": 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" } } ], "strokes": [], "characters": "3" } ] }, { "id": "4943:7235", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 40, "h": 2, "x": 11854, "y": 536, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] } ] }, { "id": "4943:7236", "name": "Step Title", "type": "TEXT", "visible": true, "opacity": 1, "w": 120, "h": 21, "x": 11780, "y": 557, "r": 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" } } ], "strokes": [], "characters": "Step Title" } ], "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", "layoutSizingHorizontal": "FIXED", "layoutSizingVertical": "HUG", "primaryAxisSizingMode": null, "counterAxisSizingMode": "FIXED", "subnodeCount": 2, "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" ], "children": [ { "id": "4943:7300", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 120, "h": 32, "x": 11420, "y": 626, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 0, "blendMode": "NORMAL", "hex": "#000000" } ], "strokes": [], "children": [ { "id": "4943:7301", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 40, "h": 2, "x": 11420, "y": 641, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] }, { "id": "4944:355", "name": "icon/Feature/Recently used", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 32, "h": 32, "x": 11464, "y": 626, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#2fb54e", "v": "VariableID:VariableID:1626:104889", "token": { "cssVar": "--brand", "figmaName": "UX/Brand/Brand", "variableId": "VariableID:1626:104889", "strategy": "normalized-variable-id" } } ], "strokes": [], "componentId": "1355:27755" }, { "id": "4943:7308", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 40, "h": 2, "x": 11500, "y": 641, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] } ] }, { "id": "4943:7309", "name": "Step Title", "type": "TEXT", "visible": true, "opacity": 1, "w": 120, "h": 21, "x": 11420, "y": 664, "r": 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" } } ], "strokes": [], "characters": "Step Title" } ], "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", "layoutSizingHorizontal": "FIXED", "layoutSizingVertical": "HUG", "primaryAxisSizingMode": null, "counterAxisSizingMode": "FIXED", "subnodeCount": 2, "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": "#f8f8f8", "v": "VariableID:VariableID:2611:57509", "token": { "cssVar": "--text-body", "figmaName": "Color Type/Text/Text_1", "variableId": "VariableID:2611:57509", "strategy": "normalized-variable-id" } } ], "v": null, "compositeToken": null }, "vectorNodeIds": [ "I4944:372;1355:28788", "I4944:372;1355:28791", "I4944:372;1355:28794", "I4944:372;1355:28810" ], "children": [ { "id": "4943:7289", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 120, "h": 32, "x": 11600, "y": 626, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 0, "blendMode": "NORMAL", "hex": "#000000" } ], "strokes": [], "children": [ { "id": "4943:7290", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 40, "h": 2, "x": 11600, "y": 641, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] }, { "id": "4944:372", "name": "icon/Feature/Demo", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 32, "h": 32, "x": 11644, "y": 626, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#f8f8f8", "v": "VariableID:VariableID:2611:57615", "token": { "cssVar": "--icon-active", "figmaName": "Color Type/Icon/Active & Hover", "variableId": "VariableID:2611:57615", "strategy": "normalized-variable-id" } } ], "strokes": [], "componentId": "1355:28811" }, { "id": "4943:7297", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 40, "h": 2, "x": 11680, "y": 641, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] } ] }, { "id": "4943:7298", "name": "Step Title", "type": "TEXT", "visible": true, "opacity": 1, "w": 120, "h": 16, "x": 11600, "y": 664, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#f8f8f8", "v": "VariableID:VariableID:2611:57509", "token": { "cssVar": "--text-body", "figmaName": "Color Type/Text/Text_1", "variableId": "VariableID:2611:57509", "strategy": "normalized-variable-id" } } ], "strokes": [], "characters": "Step Title" } ], "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", "layoutSizingHorizontal": "FIXED", "layoutSizingVertical": "HUG", "primaryAxisSizingMode": null, "counterAxisSizingMode": "FIXED", "subnodeCount": 2, "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" ], "children": [ { "id": "4943:7278", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 120, "h": 32, "x": 11780, "y": 626, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 0, "blendMode": "NORMAL", "hex": "#000000" } ], "strokes": [], "children": [ { "id": "4943:7279", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 40, "h": 2, "x": 11780, "y": 641, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] }, { "id": "4944:414", "name": "icon/Feature/AI frame interpolation", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 32, "h": 32, "x": 11824, "y": 626, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [], "componentId": "1352:27437" }, { "id": "4943:7286", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 40, "h": 2, "x": 11860, "y": 641, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] } ] }, { "id": "4943:7287", "name": "Step Title", "type": "TEXT", "visible": true, "opacity": 1, "w": 120, "h": 21, "x": 11780, "y": 664, "r": 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" } } ], "strokes": [], "characters": "Step Title" } ], "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", "layoutSizingHorizontal": "FIXED", "layoutSizingVertical": "HUG", "primaryAxisSizingMode": "FIXED", "counterAxisSizingMode": null, "subnodeCount": 2, "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" ], "children": [ { "id": "4943:7268", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 28, "h": 68, "x": 11420, "y": 733, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 0, "blendMode": "NORMAL", "hex": "#000000" } ], "strokes": [], "children": [ { "id": "4943:7269", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 28, "h": 28, "x": 11420, "y": 733, "r": 14, "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" } } ], "strokes": [], "children": [ { "id": "4944:351", "name": "icon/Edit/Selected", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 16, "h": 16, "x": 11426, "y": 739, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#f8f8f8", "v": "VariableID:VariableID:4263:102", "token": { "cssVar": "--text-primary-btn", "figmaName": "Color Type/Text/Primary Button", "variableId": "VariableID:4263:102", "strategy": "normalized-variable-id" } } ], "strokes": [], "componentId": "1128:23193" } ] }, { "id": "4943:7275", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 2, "h": 40, "x": 11433, "y": 761, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] } ] }, { "id": "4943:7276", "name": "Step Title", "type": "TEXT", "visible": true, "opacity": 1, "w": 59, "h": 21, "x": 11460, "y": 733, "r": 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" } } ], "strokes": [], "characters": "Step Title" } ], "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", "layoutSizingHorizontal": "FIXED", "layoutSizingVertical": "HUG", "primaryAxisSizingMode": "FIXED", "counterAxisSizingMode": null, "subnodeCount": 2, "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": "#f8f8f8", "v": "VariableID:VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/5774:2" } ], "v": null, "compositeToken": null }, "vectorNodeIds": [], "children": [ { "id": "4943:7262", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 28, "h": 68, "x": 11620, "y": 733, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 0, "blendMode": "NORMAL", "hex": "#000000" } ], "strokes": [], "children": [ { "id": "4943:7263", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 28, "h": 28, "x": 11620, "y": 733, "r": 14, "fills": [ { "type": "SOLID", "visible": true, "opacity": 0, "blendMode": "NORMAL", "hex": "#000000" } ], "strokes": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#f8f8f8", "v": "VariableID:VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/5774:2" } ], "children": [ { "id": "4943:7264", "name": "2", "type": "TEXT", "visible": true, "opacity": 1, "w": 10, "h": 24, "x": 11629, "y": 735, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#f8f8f8", "v": "VariableID:VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/5774:2", "token": { "cssVar": "--bg-layer2", "figmaName": "Color Type/Background/Layer_2", "variableId": "VariableID:232edb81f02d2364a26e91c1f07d229c2a311b26/5774:2", "strategy": "hex-fallback" } } ], "strokes": [], "characters": "2" } ] }, { "id": "4943:7265", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 2, "h": 40, "x": 11633, "y": 761, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] } ] }, { "id": "4943:7266", "name": "Step Title", "type": "TEXT", "visible": true, "opacity": 1, "w": 60, "h": 16, "x": 11660, "y": 733, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#f8f8f8", "v": "VariableID:VariableID:2611:57509", "token": { "cssVar": "--text-body", "figmaName": "Color Type/Text/Text_1", "variableId": "VariableID:2611:57509", "strategy": "normalized-variable-id" } } ], "strokes": [], "characters": "Step Title" } ], "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", "layoutSizingHorizontal": "FIXED", "layoutSizingVertical": "HUG", "primaryAxisSizingMode": "FIXED", "counterAxisSizingMode": null, "subnodeCount": 2, "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": [], "children": [ { "id": "4943:7256", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 28, "h": 68, "x": 11820, "y": 733, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 0, "blendMode": "NORMAL", "hex": "#000000" } ], "strokes": [], "children": [ { "id": "4943:7257", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 28, "h": 28, "x": 11820, "y": 733, "r": 14, "fills": [ { "type": "SOLID", "visible": true, "opacity": 0, "blendMode": "NORMAL", "hex": "#000000" } ], "strokes": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "children": [ { "id": "4943:7258", "name": "3", "type": "TEXT", "visible": true, "opacity": 1, "w": 10, "h": 24, "x": 11829, "y": 735, "r": 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" } } ], "strokes": [], "characters": "3" } ] }, { "id": "4943:7259", "name": "Frame", "type": "FRAME", "visible": true, "opacity": 1, "w": 2, "h": 40, "x": 11833, "y": 761, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:4264:16525", "token": { "cssVar": "--icon-placeholder", "figmaName": "Color Type/Icon/Placeholder", "variableId": "VariableID:4264:16525", "strategy": "normalized-variable-id" } } ], "strokes": [] } ] }, { "id": "4943:7260", "name": "Step Title", "type": "TEXT", "visible": true, "opacity": 1, "w": 59, "h": 21, "x": 11860, "y": 733, "r": 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" } } ], "strokes": [], "characters": "Step Title" } ], "description": null, "componentSetId": "4943:7310", "componentPropertyReferences": null } ], "tokenizedAt": "2026-06-09T09:35:48.785Z", "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-06-09T09:35:48.751Z", "rawNodeId": "4943:7310", "rawSha256": "ec89d8adfc4f0a4a8cab20170b2563c487142bda1aac27c28b991316dd975cc3" } }