{ "extractedAt": "2026-06-15T04:00:09.067Z", "figmaFileKey": "YbsPRUVmNdsbN40NNwh1Gn", "figmaName": "Top bar", "nodeId": "4771:7173", "type": "COMPONENT_SET", "pageId": "4265:5942", "pageName": "— — Other Components", "description": "", "key": "918b928e4541f1573de5c98c32b408af663d7f2f", "variants": [ { "id": "4771:7174", "name": "Tag=After Login", "type": "COMPONENT", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "h": 64, "w": 1920, "x": 7532, "y": 1028, "pH": 16, "pV": 8, "pR": 16, "pB": 8, "gap": 80, "r": null, "layoutMode": "HORIZONTAL", "layoutSizingHorizontal": "FIXED", "layoutSizingVertical": "FIXED", "primaryAxisSizingMode": "FIXED", "counterAxisSizingMode": "FIXED", "subnodeCount": 3, "primaryAxisAlignItems": null, "counterAxisAlignItems": "CENTER", "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#000000", "v": "VariableID:VariableID:2611:57623", "token": { "cssVar": "--bg-topbar", "figmaName": "Color Type/Background/Top Bar", "variableId": "VariableID:2611:57623", "strategy": "normalized-variable-id" } } ], "strokes": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#353535", "v": "VariableID:VariableID:2611:57629", "token": { "cssVar": "--line-deep", "figmaName": "Color Type/Line/Deep Divider", "variableId": "VariableID:2611:57629", "strategy": "normalized-variable-id" } } ], "strokeWeight": 1, "effects": [], "text": { "characters": "Product Name", "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:2611:56882", "token": { "cssVar": "--text-heading", "figmaName": "Color Type/Text/Heading & Button", "variableId": "VariableID:2611:56882", "strategy": "normalized-variable-id" } } ], "v": null, "compositeToken": null }, "vectorNodeIds": [ "I4771:7176;1136:3248", "I4771:7176;1136:3249", "I4771:7176;1136:3250", "I4771:7176;1136:3251", "I4771:7176;1136:3252", "I4771:7176;1136:3253", "I4771:7176;1136:3255", "I4771:7176;1136:3256", "I4771:7176;1136:3257", "I4771:7176;1136:3258", "I4771:7176;1136:3260", "I4771:7176;1136:3261", "I4771:7176;1136:3262", "I4771:7176;1136:3263", "I4771:7176;1136:3264", "I4771:7176;1136:3265", "I4771:7176;1833:92002", "I4771:7179;1818:8161;1277:159", "I4771:7179;1818:8161;1845:17670", "I4771:7191;2004:2830", "I4771:7191;2004:2836", "I4771:7191;2004:2839", "I4771:7191;2005:2967", "I4771:7200;2004:2830", "I4771:7200;2004:2836", "I4771:7200;2004:2839", "I4771:7200;2005:2967", "I4771:7209;2004:2830", "I4771:7209;2004:2836", "I4771:7209;2004:2839", "I4771:7209;2005:2967", "I4771:7215;1517:128", "I4771:7215;1517:134", "I4771:7217;1211:3982", "I4771:7217;1211:3983", "I4771:7217;1211:3988", "I4771:7217;1844:115", "I4771:7219;1850:37481" ], "children": [ { "id": "4771:7175", "name": "Logo & Service Name", "type": "FRAME", "visible": true, "opacity": 1, "w": 151, "h": 32, "x": 7548, "y": 1044, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7176", "name": "icon/logo/TVU", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 32, "h": 32, "x": 7548, "y": 1044, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#56af31" } ], "strokes": [], "componentId": "1136:3266" }, { "id": "4771:7177", "name": "Product Name", "type": "TEXT", "visible": true, "opacity": 1, "w": 103, "h": 24, "x": 7596, "y": 1048, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#ffffff", "v": "VariableID:VariableID:2611:56882", "token": { "cssVar": "--text-heading", "figmaName": "Color Type/Text/Heading & Button", "variableId": "VariableID:2611:56882", "strategy": "normalized-variable-id" } } ], "strokes": [], "characters": "Product Name" } ] }, { "id": "5170:21353", "name": "Frame 2672", "type": "FRAME", "visible": true, "opacity": 1, "w": 1377, "h": 27, "x": 7779, "y": 1046.5, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7179", "name": "input box/line", "type": "INSTANCE", "visible": false, "opacity": 1, "w": 480, "h": 32, "x": 7779, "y": 1046.5, "r": 4, "fills": [], "strokes": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#595959", "v": "VariableID:VariableID:1558:94787", "token": { "cssVar": "--color-grey-8", "figmaName": "UX/Grey/grey-8 #595959", "variableId": "VariableID:1558:94787", "strategy": "normalized-variable-id" } } ], "componentId": "1818:8160" }, { "id": "4771:7180", "name": "Menu", "type": "SLOT", "visible": false, "opacity": 1, "w": 1253, "h": 27, "x": 7779, "y": 1046.5, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7181", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8088, "y": 1046.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#f8f8f8", "v": "VariableID:VariableID:422926b10f1edce88bb96d6588733cea5fccc4fa/3010:116", "token": { "cssVar": "--bg-layer2", "figmaName": "Color Type/Background/Layer_2", "variableId": "VariableID:422926b10f1edce88bb96d6588733cea5fccc4fa/3010:116", "strategy": "hex-fallback" } } ], "strokes": [], "componentId": "4771:7142" }, { "id": "4771:7182", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8181, "y": 1046.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#9e9e9e", "v": "VariableID:VariableID:b3b5983a60f92902d446e8e25d3445fb4711eb16/3010:118" } ], "strokes": [], "componentId": "4771:7140" }, { "id": "4771:7183", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8274, "y": 1046.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#9e9e9e", "v": "VariableID:VariableID:b3b5983a60f92902d446e8e25d3445fb4711eb16/3010:118" } ], "strokes": [], "componentId": "4771:7140" }, { "id": "4771:7184", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8367, "y": 1046.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#9e9e9e", "v": "VariableID:VariableID:b3b5983a60f92902d446e8e25d3445fb4711eb16/3010:118" } ], "strokes": [], "componentId": "4771:7140" }, { "id": "4771:7185", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8460, "y": 1046.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#9e9e9e", "v": "VariableID:VariableID:b3b5983a60f92902d446e8e25d3445fb4711eb16/3010:118" } ], "strokes": [], "componentId": "4771:7140" }, { "id": "4771:7186", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8553, "y": 1046.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#9e9e9e", "v": "VariableID:VariableID:b3b5983a60f92902d446e8e25d3445fb4711eb16/3010:118" } ], "strokes": [], "componentId": "4771:7140" }, { "id": "4771:7187", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8646, "y": 1046.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#9e9e9e", "v": "VariableID:VariableID:b3b5983a60f92902d446e8e25d3445fb4711eb16/3010:118" } ], "strokes": [], "componentId": "4771:7140" } ] } ] }, { "id": "4771:7188", "name": "Right_content", "type": "SLOT", "visible": true, "opacity": 1, "w": 200, "h": 48, "x": 9236, "y": 1036, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7189", "name": "Time Zone", "type": "FRAME", "visible": true, "opacity": 1, "w": 128, "h": 48, "x": 9236, "y": 1036, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7190", "name": "Frame 2052", "type": "FRAME", "visible": true, "opacity": 1, "w": 119, "h": 48, "x": 9236, "y": 1036, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7191", "name": "icon/message/notification 1", "type": "INSTANCE", "visible": false, "opacity": 1, "w": 24, "h": 24, "x": 9244, "y": 1044, "r": null, "fills": [], "strokes": [], "componentId": "93:177" }, { "id": "4771:7192", "name": "Asia / Shanghai", "type": "TEXT", "visible": true, "opacity": 1, "w": 85, "h": 14, "x": 9253, "y": 1039, "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": "Asia / Shanghai" }, { "id": "4771:7193", "name": "Frame 2668", "type": "FRAME", "visible": true, "opacity": 1, "w": 103, "h": 21, "x": 9244, "y": 1061, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7194", "name": "13:39:43", "type": "TEXT", "visible": true, "opacity": 1, "w": 103, "h": 21, "x": 9244, "y": 1061, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#d39f39", "v": "VariableID:VariableID:2986:79742", "token": { "cssVar": "--orange-tz", "figmaName": "UX/Orange/Time Zone", "variableId": "VariableID:2986:79742", "strategy": "normalized-variable-id" } } ], "strokes": [], "characters": "13:39:43" }, { "id": "4771:7195", "name": "PM", "type": "TEXT", "visible": false, "opacity": 1, "w": 19, "h": 14, "x": 9349, "y": 1068, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:1608:170962", "token": { "cssVar": "--color-grey-7", "figmaName": "UX/Grey/grey-7 #7B7B7B", "variableId": "VariableID:1608:170962", "strategy": "normalized-variable-id" } } ], "strokes": [], "characters": "PM" } ] } ] }, { "id": "4771:7196", "name": "Frame 2053", "type": "FRAME", "visible": true, "opacity": 1, "w": 9, "h": 40, "x": 9355, "y": 1040, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7197", "name": "Rectangle 1053", "type": "RECTANGLE", "visible": true, "opacity": 1, "w": 1, "h": 24, "x": 9359, "y": 1048, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#434343", "v": "VariableID:VariableID:2611:57630", "token": { "cssVar": "--line-light", "figmaName": "Color Type/Line/Light Divider", "variableId": "VariableID:2611:57630", "strategy": "normalized-variable-id" } } ], "strokes": [] } ] } ] }, { "id": "4771:7198", "name": "Tokens Remaining", "type": "FRAME", "visible": false, "opacity": 1, "w": 124, "h": 48, "x": 9364, "y": 1036, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7199", "name": "Frame 2052", "type": "FRAME", "visible": true, "opacity": 1, "w": 115, "h": 48, "x": 9364, "y": 1036, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7200", "name": "icon/message/notification 1", "type": "INSTANCE", "visible": false, "opacity": 1, "w": 24, "h": 24, "x": 9372, "y": 1044, "r": null, "fills": [], "strokes": [], "componentId": "93:177" }, { "id": "4771:7201", "name": "Asia / Shanghai", "type": "TEXT", "visible": true, "opacity": 1, "w": 99, "h": 14, "x": 9372, "y": 1039, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:1608:170962", "token": { "cssVar": "--color-grey-7", "figmaName": "UX/Grey/grey-7 #7B7B7B", "variableId": "VariableID:1608:170962", "strategy": "normalized-variable-id" } } ], "strokes": [], "characters": "Tokens Remaining" }, { "id": "4771:7202", "name": "Frame 2668", "type": "FRAME", "visible": true, "opacity": 1, "w": 45, "h": 23, "x": 9399, "y": 1061, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7203", "name": "13:39:43", "type": "TEXT", "visible": true, "opacity": 1, "w": 45, "h": 23, "x": 9399, "y": 1061, "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": [], "characters": "1028" }, { "id": "4771:7204", "name": "PM", "type": "TEXT", "visible": false, "opacity": 1, "w": 19, "h": 14, "x": 9504, "y": 1068, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:1608:170962", "token": { "cssVar": "--color-grey-7", "figmaName": "UX/Grey/grey-7 #7B7B7B", "variableId": "VariableID:1608:170962", "strategy": "normalized-variable-id" } } ], "strokes": [], "characters": "PM" } ] } ] }, { "id": "4771:7205", "name": "Frame 2050", "type": "FRAME", "visible": true, "opacity": 1, "w": 9, "h": 40, "x": 9479, "y": 1040, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7206", "name": "Rectangle 1053", "type": "RECTANGLE", "visible": true, "opacity": 1, "w": 1, "h": 24, "x": 9483, "y": 1048, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#444444" } ], "strokes": [] } ] } ] }, { "id": "4771:7207", "name": "Network Delay", "type": "FRAME", "visible": false, "opacity": 1, "w": 109, "h": 48, "x": 9488, "y": 1036, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7208", "name": "Frame 2051", "type": "FRAME", "visible": true, "opacity": 1, "w": 100, "h": 48, "x": 9488, "y": 1036, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7209", "name": "icon/message/notification 1", "type": "INSTANCE", "visible": false, "opacity": 1, "w": 24, "h": 24, "x": 9496, "y": 1044, "r": null, "fills": [], "strokes": [], "componentId": "93:177" }, { "id": "4771:7210", "name": "Network Delay", "type": "TEXT", "visible": true, "opacity": 1, "w": 78, "h": 14, "x": 9499, "y": 1039, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#7b7b7b", "v": "VariableID:VariableID:1608:170962", "token": { "cssVar": "--color-grey-7", "figmaName": "UX/Grey/grey-7 #7B7B7B", "variableId": "VariableID:1608:170962", "strategy": "normalized-variable-id" } } ], "strokes": [], "characters": "Network Delay" }, { "id": "4771:7211", "name": "40ms", "type": "TEXT", "visible": true, "opacity": 1, "w": 43, "h": 23, "x": 9516.5, "y": 1061, "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": [], "characters": "40ms" } ] }, { "id": "4771:7212", "name": "Frame 2050", "type": "FRAME", "visible": true, "opacity": 1, "w": 9, "h": 40, "x": 9588, "y": 1040, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7213", "name": "Rectangle 1053", "type": "RECTANGLE", "visible": true, "opacity": 1, "w": 1, "h": 24, "x": 9592, "y": 1048, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#444444" } ], "strokes": [] } ] } ] }, { "id": "4771:7214", "name": "ShutDown", "type": "FRAME", "visible": false, "opacity": 1, "w": 40, "h": 40, "x": 9488, "y": 1040, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7215", "name": "icon/Setting/Switch", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 24, "h": 24, "x": 9496, "y": 1048, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#ec5050" } ], "strokes": [], "componentId": "1114:24139" } ] }, { "id": "4771:7216", "name": "Icons", "type": "FRAME", "visible": false, "opacity": 1, "w": 40, "h": 40, "x": 9488, "y": 1040, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7217", "name": "icon/file/log", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 24, "h": 24, "x": 9496, "y": 1048, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#dbdbdb" } ], "strokes": [], "componentId": "1211:4001" } ] }, { "id": "4771:7218", "name": "Settings", "type": "FRAME", "visible": false, "opacity": 1, "w": 40, "h": 40, "x": 9488, "y": 1040, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7219", "name": "icon/Setting/Setting 1", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 24, "h": 24, "x": 9496, "y": 1048, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#dbdbdb", "v": "VariableID:VariableID:1558:94784", "token": { "cssVar": "--color-grey-4", "figmaName": "UX/Grey/grey-4 #DBDBDB", "variableId": "VariableID:1558:94784", "strategy": "normalized-variable-id" } } ], "strokes": [], "componentId": "1228:3993" } ] }, { "id": "4771:7220", "name": "Account Name", "type": "FRAME", "visible": true, "opacity": 1, "w": 40, "h": 40, "x": 9364, "y": 1040, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7221", "name": "Rectangle 1051", "type": "RECTANGLE", "visible": true, "opacity": 1, "w": 32, "h": 32, "x": 9364, "y": 1040, "r": null, "fills": [], "strokes": [] }, { "id": "4771:7222", "name": "椭圆形", "type": "ELLIPSE", "visible": true, "opacity": 1, "w": 28, "h": 28, "x": 9370, "y": 1046, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#5250ec" } ], "strokes": [] }, { "id": "4771:7223", "name": "Ti", "type": "TEXT", "visible": true, "opacity": 1, "w": 9, "h": 14, "x": 9379.5, "y": 1053, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#ffffff", "v": "VariableID:VariableID:2611:56882", "token": { "cssVar": "--text-heading", "figmaName": "Color Type/Text/Heading & Button", "variableId": "VariableID:2611:56882", "strategy": "normalized-variable-id" } } ], "strokes": [], "characters": "T" } ] }, { "id": "4771:7225", "name": "icon/menu/3", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 32, "h": 32, "x": 9404, "y": 1044, "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": "93:4364" } ] } ], "description": null, "componentSetId": "4771:7173", "componentPropertyReferences": null }, { "id": "4771:7226", "name": "Tag=Before Login", "type": "COMPONENT", "visible": true, "opacity": 1, "blendMode": "PASS_THROUGH", "h": 64, "w": 1920, "x": 7532, "y": 1149, "pH": 16, "pV": 8, "pR": 16, "pB": 8, "gap": 80, "r": null, "layoutMode": "HORIZONTAL", "layoutSizingHorizontal": "FIXED", "layoutSizingVertical": "FIXED", "primaryAxisSizingMode": "FIXED", "counterAxisSizingMode": "FIXED", "subnodeCount": 3, "primaryAxisAlignItems": null, "counterAxisAlignItems": "CENTER", "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#000000", "v": "VariableID:VariableID:2611:57623", "token": { "cssVar": "--bg-topbar", "figmaName": "Color Type/Background/Top Bar", "variableId": "VariableID:2611:57623", "strategy": "normalized-variable-id" } } ], "strokes": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#353535", "v": "VariableID:VariableID:2611:57629", "token": { "cssVar": "--line-deep", "figmaName": "Color Type/Line/Deep Divider", "variableId": "VariableID:2611:57629", "strategy": "normalized-variable-id" } } ], "strokeWeight": 1, "effects": [], "text": { "characters": "Product Name", "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:2611:56882", "token": { "cssVar": "--text-heading", "figmaName": "Color Type/Text/Heading & Button", "variableId": "VariableID:2611:56882", "strategy": "normalized-variable-id" } } ], "v": null, "compositeToken": null }, "vectorNodeIds": [ "I4771:7228;1136:3248", "I4771:7228;1136:3249", "I4771:7228;1136:3250", "I4771:7228;1136:3251", "I4771:7228;1136:3252", "I4771:7228;1136:3253", "I4771:7228;1136:3255", "I4771:7228;1136:3256", "I4771:7228;1136:3257", "I4771:7228;1136:3258", "I4771:7228;1136:3260", "I4771:7228;1136:3261", "I4771:7228;1136:3262", "I4771:7228;1136:3263", "I4771:7228;1136:3264", "I4771:7228;1136:3265", "I4771:7228;1833:92002", "I4771:7231;11:2932;91:2248", "I4771:7231;11:2932;91:2249", "I4771:7231;11:2934;91:1520", "I4771:7231;11:2934;91:1521", "I4771:7231;11:2934;91:1522", "I4771:7231;11:2934;91:1523", "I4771:7231;11:2934;91:1524", "I4771:7231;11:2936;363:2356", "I4771:7231;11:2936;363:2357", "I4771:7231;11:2936;363:2358" ], "children": [ { "id": "4771:7227", "name": "Logo & Service Name", "type": "FRAME", "visible": true, "opacity": 1, "w": 151, "h": 32, "x": 7548, "y": 1165, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7228", "name": "icon/logo/TVU", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 32, "h": 32, "x": 7548, "y": 1165, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#56af31" } ], "strokes": [], "componentId": "1136:3266" }, { "id": "4771:7229", "name": "Product Name", "type": "TEXT", "visible": true, "opacity": 1, "w": 103, "h": 24, "x": 7596, "y": 1169, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#ffffff", "v": "VariableID:VariableID:2611:56882", "token": { "cssVar": "--text-heading", "figmaName": "Color Type/Text/Heading & Button", "variableId": "VariableID:2611:56882", "strategy": "normalized-variable-id" } } ], "strokes": [], "characters": "Product Name" } ] }, { "id": "4771:7230", "name": "Menu", "type": "SLOT", "visible": true, "opacity": 1, "w": 1457, "h": 27, "x": 7779, "y": 1167.5, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7231", "name": "searchbox", "type": "INSTANCE", "visible": false, "opacity": 1, "w": 480, "h": 32, "x": 7779, "y": 1167.5, "r": 20, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#414345" } ], "strokes": [], "componentId": "158:21516" }, { "id": "4771:7232", "name": "Menu List", "type": "FRAME", "visible": false, "opacity": 1, "w": 1429, "h": 27, "x": 7779, "y": 1167.5, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7233", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8176, "y": 1167.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#f8f8f8", "v": "VariableID:VariableID:422926b10f1edce88bb96d6588733cea5fccc4fa/3010:116", "token": { "cssVar": "--bg-layer2", "figmaName": "Color Type/Background/Layer_2", "variableId": "VariableID:422926b10f1edce88bb96d6588733cea5fccc4fa/3010:116", "strategy": "hex-fallback" } } ], "strokes": [], "componentId": "4771:7142" }, { "id": "4771:7234", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8269, "y": 1167.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#9e9e9e", "v": "VariableID:VariableID:b3b5983a60f92902d446e8e25d3445fb4711eb16/3010:118" } ], "strokes": [], "componentId": "4771:7140" }, { "id": "4771:7235", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8362, "y": 1167.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#9e9e9e", "v": "VariableID:VariableID:b3b5983a60f92902d446e8e25d3445fb4711eb16/3010:118" } ], "strokes": [], "componentId": "4771:7140" }, { "id": "4771:7236", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8455, "y": 1167.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#9e9e9e", "v": "VariableID:VariableID:b3b5983a60f92902d446e8e25d3445fb4711eb16/3010:118" } ], "strokes": [], "componentId": "4771:7140" }, { "id": "4771:7237", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8548, "y": 1167.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#9e9e9e", "v": "VariableID:VariableID:b3b5983a60f92902d446e8e25d3445fb4711eb16/3010:118" } ], "strokes": [], "componentId": "4771:7140" }, { "id": "4771:7238", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8641, "y": 1167.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#9e9e9e", "v": "VariableID:VariableID:b3b5983a60f92902d446e8e25d3445fb4711eb16/3010:118" } ], "strokes": [], "componentId": "4771:7140" }, { "id": "4771:7239", "name": "Menu", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 77, "h": 27, "x": 8734, "y": 1167.5, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#9e9e9e", "v": "VariableID:VariableID:b3b5983a60f92902d446e8e25d3445fb4711eb16/3010:118" } ], "strokes": [], "componentId": "4771:7140" } ] } ] }, { "id": "4771:7240", "name": "Right_content", "type": "SLOT", "visible": true, "opacity": 1, "w": 120, "h": 48, "x": 9316, "y": 1157, "r": null, "fills": [], "strokes": [], "children": [ { "id": "4771:7241", "name": "Sign Up", "type": "TEXT", "visible": false, "opacity": 1, "w": 56, "h": 24, "x": 9316, "y": 1169, "r": null, "fills": [ { "type": "SOLID", "visible": true, "opacity": 1, "blendMode": "NORMAL", "hex": "#9e9e9e", "v": "VariableID:VariableID:2611:57610", "token": { "cssVar": "--text-tips", "figmaName": "Color Type/Text/Tips", "variableId": "VariableID:2611:57610", "strategy": "normalized-variable-id" } } ], "strokes": [], "characters": "Sign Up" }, { "id": "4771:7242", "name": "Sign In", "type": "TEXT", "visible": false, "opacity": 1, "w": 50, "h": 24, "x": 9396, "y": 1169, "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": "Sign In" }, { "id": "4771:7243", "name": "Elements/Button/Big", "type": "INSTANCE", "visible": true, "opacity": 1, "w": 120, "h": 40, "x": 9316, "y": 1161, "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": "4771:7169" } ] } ], "description": null, "componentSetId": "4771:7173", "componentPropertyReferences": null } ], "tokenizedAt": "2026-06-15T04:00:16.623Z", "tokenizationStrategy": "variable-id-first-then-hex-fallback", "source": { "sourceLayer": "figma-data/raw/components", "sourceFile": "figma-data/raw/components/top_bar__4771_7173.json", "rawExtractedAt": "2026-06-15T04:00:09.067Z", "rawNodeId": "4771:7173", "rawSha256": "3684f22844704b4e3992d720758a1f5bf39513f61c238b3bbf08498b8b71b64f" } }