[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_696":697},"routes/hub.$",{"_9":10},"builderPage",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":39,"_41":42},"folders",[],"createdDate",1738879632611,"id","3ff278d489ac4d109e9d607e287fad94","name","Watch Now: Builder Labs | How to build an app dashboard with AI powered Figma-to-code","modelId","8652a3c9d70a4f02bce5775f0032df93","published","meta",{"_159":160,"_167":692,"_163":44,"_161":693,"_694":695},"query",[685],"data",{"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"variations",{},"lastUpdated",1740417926132,"firstPublished",1738880005380,"testRatio",1,"screenshot","https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fc4c2418e3dd6463880cde54917d09bb8","createdBy","BlivRGEJV2YNikTDOeFW3ge3Fyx1","lastUpdatedBy","rev","dy4nkohhisr","addNoIndex",true,"themeId",false,"customFonts",[681],"title","Builder Labs: How to build an app dashboard","description","We'll show you how to turn a complex Figma design into production-ready code for a web app dashboard using our Figma-to-code product, Develop.","blocks",[71,72],"url","/hub/webinars/builder-labs-app-dashboard/watch-now","state",{"_59":60,"_61":62},"deviceSize","large","location",{"_63":56,"_64":65,"_24":66},"pathname","path",[67,68,69,70],{},"hub","webinars","builder-labs-app-dashboard","watch-now",{"_74":75,"_101":102,"_103":104,"_15":105,"_106":107,"_80":108},{"_15":73,"_74":75,"_76":77,"_78":79,"_80":81},"builder-pixel-q9i2k0g232","@type","@builder.io/sdk:Element","tagName","img","properties",{"_93":94,"_95":96,"_97":98,"_99":100,"_85":84,"_83":84},"responsiveStyles",{"_60":82},{"_83":84,"_85":84,"_86":87,"_88":84,"_89":90,"_91":92},"height","0","width","display","block","opacity","overflow","hidden","pointerEvents","none","src","https://cdn.builder.io/api/v1/pixel?apiKey=YJIGb4i01jvw0SRdL5Bt","aria-hidden","true","alt","","role","presentation","@version",2,"layerName","Webinar Watch Now ","builder-2158c9cde9c54935b9c9b890b44c1809","children",[118,119,120],{"_60":109},{"_86":110,"_111":112,"_113":114,"_115":84,"_116":117},"flex","flexDirection","column","position","relative","flexShrink","boxSizing","border-box",{"_74":75,"_101":102,"_15":291,"_123":627,"_80":628},{"_74":75,"_101":102,"_15":292,"_22":293,"_123":294,"_106":295,"_80":296},{"_74":75,"_101":102,"_15":121,"_22":122,"_123":124,"_80":125},"builder-24397bb0e71541d9a9577287e5c590e0",{"_290":291},"component",{"_17":129,"_130":131},{"_60":126},{"_86":110,"_111":112,"_113":114,"_115":84,"_116":117,"_127":128},"marginTop","0px","Symbol","options",{"_132":46,"_133":46,"_134":46,"_135":136},"dataOnly","inheritState","renderToLiquid","symbol",{"_137":135,"_138":139,"_26":140,"_141":142,"_143":144},"model","entry","8ddc0f312749403482df5bd966e48ef0",{},"ownerId","YJIGb4i01jvw0SRdL5Bt","content",{"_13":145,"_15":139,"_17":146,"_19":147,"_21":21,"_148":46,"_24":149,"_26":150,"_28":151,"_30":152,"_32":153,"_34":35,"_38":39,"_40":39,"_11":154,"_22":155,"_41":156},1680299939339,"Footer Dark","f9962951c48f4a349f6a86310a0053a4","stageModifiedSincePublish",[],{"_176":177,"_178":179,"_47":180,"_181":182,"_183":184,"_53":185,"_57":186},{},1781123009761,1680530357654,[],{"_157":158,"_159":160,"_161":162,"_163":46,"_164":165,"_166":46,"_167":123,"_168":169,"_170":46},"hqhsvip4elp","dataSources",[],"shopifyDomain","builderio.myshopify.com","lastPreviewUrl","https://builder.io/c/edit?modelName=symbol&apiKey=YJIGb4i01jvw0SRdL5Bt&builder.space=YJIGb4i01jvw0SRdL5Bt&builder.user.permissions=read%2Ccreate%2Cpublish%2CeditCode%2CeditDesigns%2Cadmin%2CeditLayouts%2CeditLayers%2CeditContentPriority%2CeditFolders%2CeditProjects%2CmodifyMcpServers%2CmodifyProjectSettings%2CconnectCodeRepository%2CcreateProjects%2CsendPullRequests&builder.user.role.name=Admin&builder.user.role.id=admin&builder.cachebust=true&builder.preview=symbol&builder.noCache=true&builder.allowTextEdit=true&__builder_editing__=true&builder.overrides.symbol=8ddc0f312749403482df5bd966e48ef0&builder.overrides.8ddc0f312749403482df5bd966e48ef0=8ddc0f312749403482df5bd966e48ef0&builder.options.locale=Default","hasLinks","breakpoints",{"_172":173,"_174":175},"hasErrors","kind","componentsUsed",{"_171":35},"hasAutosaves","SiteFooter","small",767,"medium",1023,"inputs",[261],"cssCode",".builder-heading-1{font-size:2em;margin:.67em 0}.builder-heading-2{font-size:1.5em;margin:.75em 0}.builder-heading-3{font-size:1.17em;margin:.83em 0}.builder-heading-4,.builder-paragraph{margin:1.12em 0}.builder-heading-5{font-size:.83em;margin:1.5em 0}.builder-heading-6{font-size:.75em;margin:1.67em 0}.builder-heading-1,.builder-heading-2,.builder-heading-3,.builder-heading-4,.builder-heading-5,.builder-heading-6{font-weight:bolder}\n\n.m-text * {\n font-weight: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: unset!important;\n}\n\n.ot-close-icon{\n filter: brightness(2.5)\n}\n.ot-pc-footer-logo > a:focus {\n outline: 1px solid black!important;\n}\n\n#onetrust-consent-sdk #onetrust-pc-sdk button:not(#clear-filters-handler):not(.ot-close-icon):not(#filter-btn-handler):not(.ot-remove-objection-handler):not(.ot-obj-leg-btn-handler):not([aria-expanded]):not(.ot-link-btn), #onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-active-leg-btn {\n color: black!important;\n}",[204],"httpRequests",{},"jsCode","var __awaiter=function(e,t,n,r){return new(n||(n=Promise))((function(a,o){function i(e){try{l(r.next(e))}catch(e){o(e)}}function u(e){try{l(r.throw(e))}catch(e){o(e)}}function l(e){var t;e.done?a(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,u)}l((r=r.apply(e,t||[])).next())}))},__generator=function(e,t){var n,r,a,o,i={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return o={next:u(0),throw:u(1),return:u(2)},\"function\"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function u(o){return function(u){return function(o){if(n)throw new TypeError(\"Generator is already executing.\");for(;i;)try{if(n=1,r&&(a=2&o[0]?r.return:o[0]?r.throw||((a=r.return)&&a.call(r),0):r.next)&&!(a=a.call(r,o[1])).done)return a;switch(r=0,a&&(o=[2&o[0],a.value]),o[0]){case 0:case 1:a=o;break;case 4:return i.label++,{value:o[1],done:!1};case 5:i.label++,r=o[1],o=[0];continue;case 7:o=i.ops.pop(),i.trys.pop();continue;default:if(!(a=(a=i.trys).length>0&&a[a.length-1])&&(6===o[0]||2===o[0])){i=0;continue}if(3===o[0]&&(!a||o[1]>a[0]&&o[1]Connect to learn how our AI-Powered Visual Development Platform can accelerate your entire digital organization.

","builder-cd3c58546a5d4401b22c2daee3289121","builder-ae33e81d0f7e44fdaf70f6e5c3b5fe14",{"_290":511},{"_17":492,"_130":509,"_203":-5},{"_60":500,"_172":501},{"_86":110,"_111":112,"_113":114,"_115":84,"_116":117,"_127":504,"_489":490,"_83":391,"_419":505,"_422":506,"_421":235,"_414":507,"_85":376,"_487":488,"_418":508,"_411":410},{"_489":502,"_422":503},"2rem","1.5rem","6px","Poppins, sans-serif","24px","left","10px",{"_431":510},"

Your next steps

","builder-0203097fb8b74c5d8f2051acc75272ad",{"_167":215,"_213":214,"_207":513,"_216":217,"_205":514,"_218":515,"_209":210,"_211":212,"_220":221},[225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242],{"_225":243,"_227":244,"_229":245,"_233":246,"_235":247,"_237":248,"_239":249,"_241":250,"_242":256,"_231":252,"_240":255,"_226":254,"_230":251,"_238":260,"_232":253,"_234":257,"_236":259,"_228":258},[222,223,224],[518],66.667,{"_74":75,"_101":102,"_15":519,"_106":520,"_80":521},"builder-17938f98dc564dc383f8d44bdb2f9c3f",[526,527,528],{"_60":522,"_172":523},{"_86":110,"_111":112,"_113":114,"_115":84,"_116":117,"_524":525,"_395":415,"_127":391},{"_85":376,"_377":378,"_390":391,"_392":391},"justifyContent","flex-start",{"_74":75,"_101":102,"_15":548,"_402":403,"_123":549,"_80":550},{"_74":75,"_101":102,"_15":541,"_402":403,"_123":542,"_80":543},{"_74":75,"_101":102,"_15":529,"_22":530,"_123":531,"_80":532},"builder-af71a27b870e492f9b7d25c529601946",{"_290":540},{"_17":536,"_130":537},{"_60":533},{"_86":110,"_111":112,"_113":114,"_115":84,"_116":117,"_127":128,"_85":376,"_377":534,"_390":391,"_392":391,"_413":535,"_89":90},"1070px","8px","Embed",{"_55":538,"_143":539},"https://www.youtube.com/embed/d_7L5XuNidE?si=mziGfwBWR6Ng52FL","

","builder-ad731b4f4a1d4a3c99a789dec203963f","builder-ee1dc934d70849758165a0d43c1f4dfd",{"_17":492,"_130":546},{"_60":544,"_172":545},{"_86":110,"_111":112,"_113":114,"_115":84,"_116":117,"_127":504,"_489":490,"_83":391,"_419":420,"_422":502,"_421":237,"_414":507,"_85":376,"_487":488,"_418":304,"_411":410},{"_489":502,"_422":503},{"_431":547},"

How to build an app dashboard with AI powered Figma-to-code

","builder-2b08e32d1e864c648b4d89e677be1739",{"_17":492,"_130":557},{"_60":551,"_174":552,"_172":553},{"_86":110,"_111":112,"_113":114,"_115":84,"_116":117,"_127":128,"_489":490,"_83":391,"_422":556,"_421":237,"_414":507,"_85":376,"_411":410},{"_127":84},{"_127":554,"_422":555,"_487":488},"13px","1rem","1.2rem",{"_431":558},"

Builder Labs

","builder-3ea805f86b184d4d83058a7ee52622a4","builder-7049d4dcc7394b3ca6afe984299f089a",{"_290":621},[569],{"_60":564,"_172":565},{"_86":110,"_111":567,"_113":114,"_115":84,"_116":117,"_393":535,"_418":568},{"_418":566,"_85":376,"_377":378,"_390":391,"_392":391},"7px","row","50px",{"_74":75,"_101":102,"_570":571,"_76":572,"_15":573,"_22":574,"_106":575,"_80":576},"bindings",{"_619":620},"a","builder-122007b07f664c17b99ffc186f2b2b70",{"_290":618},[582,583],{"_60":577,"_172":578},{"_86":110,"_111":567,"_113":114,"_115":84,"_116":117,"_416":417,"_91":391,"_300":201,"_302":579,"_303":508,"_306":508,"_424":92,"_426":427,"_413":535,"_428":580,"_393":566,"_390":581},{"_302":201,"_300":508,"_303":409,"_306":504},"35px","#d0d0d0","-20px",{"_74":75,"_101":102,"_15":593,"_22":594,"_123":595,"_80":596},{"_74":75,"_101":102,"_15":584,"_402":403,"_22":585,"_123":586,"_80":587},"builder-ab358ad5f20a423fba577ded03017584",{"_290":592},{"_17":492,"_130":590},{"_60":588,"_172":589},{"_86":110,"_111":112,"_113":114,"_115":84,"_116":117,"_489":490,"_83":391,"_411":410,"_91":391,"_421":235,"_392":391,"_127":128,"_418":128},{"_392":391,"_422":423},{"_431":591},"

Back

","builder-b0594165e385453e9d4a6650496e35a0","builder-bd3eda1f91964660988bec5959ab745e",{"_290":617},{"_17":602,"_130":603},{"_60":597,"_172":598},{"_86":110,"_111":112,"_113":114,"_115":84,"_116":117,"_127":128,"_85":376,"_308":201,"_599":201,"_89":90,"_377":506,"_600":601},{"_377":201},"minWidth","filter","invert(1)","Image",{"_604":605,"_606":607,"_608":415,"_609":46,"_610":44,"_611":35,"_612":46,"_83":613,"_85":613,"_614":44,"_615":616},"image","https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F9627ff684e354d7b95a6589ce71e59a2?width=24","backgroundSize","contain","backgroundPosition","lazy","fitContent","aspectRatio","lockAspectRatio",24,"noWebp","sizes","(max-width: 638px) 4vw, (max-width: 998px) 3vw, 2vw","builder-bc1f22fe9f7b40a6bdd7144301cbe8f9","builder-af3c362dba384965b55cdac2b524b6e6","href","var str,url=\"\",category=\"\",tag=\"\",urlParams=new URLSearchParams(window.location.search);urlParams.get(\"resource-type\")&&(category=(str=urlParams.get(\"resource-type\"))[0].toUpperCase()+str.slice(1));urlParams.get(\"topic\")&&(state.selectedTag=urlParams.get(\"topic\"),tag=(str=urlParams.get(\"topic\"))[0].toUpperCase()+str.slice(1));var url$1=url=\"/hub/home\".concat(category.length||tag.length?\"?\":\"\").concat(category.length?\"resource-type=\"+category:\"\").concat(tag.length?\"&topic=\"+tag:\"\");return url$1","builder-a01afb958c9c4e3595574f02aacbd4ce","Core:Section",{"_377":624,"_625":46},1200,"lazyLoad","builder-89323f1bffb34ffdb1a02ba0fe3e91e2",{"_17":129,"_130":630},{"_60":629},{"_86":110,"_111":112,"_113":114,"_115":84,"_116":117,"_127":128},{"_132":46,"_133":46,"_134":46,"_135":631},{"_137":135,"_138":632,"_26":633,"_141":142,"_143":634},"0f881171a3454d26b55d6e8f579f7b20",{"_678":44},{"_13":635,"_15":632,"_17":636,"_19":147,"_21":21,"_148":46,"_24":637,"_26":638,"_28":639,"_30":640,"_32":641,"_34":35,"_36":642,"_38":39,"_40":39,"_11":643,"_22":644,"_41":645},1738686116403,"Nav Bar Header",[],{"_176":650,"_178":651,"_183":652,"_47":653,"_53":654,"_57":655},{},1781122992212,1738791481174,"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F9eb0a85a4de040e8b609dfeff1584587",[],{"_163":46,"_164":646,"_166":46,"_161":647,"_159":160,"_167":123,"_168":648,"_170":46},"pm7ib5dxgih",{"_172":173,"_174":175},"https://builder.io/c/edit?modelName=symbol&apiKey=YJIGb4i01jvw0SRdL5Bt&builder.space=YJIGb4i01jvw0SRdL5Bt&builder.user.permissions=read%2Ccreate%2Cpublish%2CeditCode%2CeditDesigns%2Cadmin%2CeditLayouts%2CeditLayers%2CeditContentPriority%2CeditFolders%2CeditProjects%2CmodifyMcpServers%2CmodifyProjectSettings%2CconnectCodeRepository%2CcreateProjects%2CsendPullRequests&builder.user.role.name=Admin&builder.user.role.id=admin&builder.cachebust=true&builder.preview=symbol&builder.noCache=true&builder.allowTextEdit=true&__builder_editing__=true&builder.overrides.symbol=0f881171a3454d26b55d6e8f579f7b20&builder.overrides.0f881171a3454d26b55d6e8f579f7b20=0f881171a3454d26b55d6e8f579f7b20&builder.options.locale=Default",{"_649":35},"SiteNav",[676],".interactive{\r\n transition: .2s ease-in-out;\r\n}\r\n\r\n.interactive:hover{\r\n opacity:1;\r\n}\r\n\r\n.interactive:active{\r\n transform: scale(.97);\r\n}\r\n\r\n.m-text * {\r\n font-weight: inherit;\r\n font-size: inherit;\r\n line-height: inherit;\r\n margin: unset!important;\r\n}\r\n\r\n.skip:focus{\r\n opacity: 1;\r\n transform: translateY(0px);\r\n}\r\n\r\n.interactive-button {\r\n transition: .3s cubic-bezier(.37, .01, 0, .98)!important;\r\n}\r\n\r\n.interactive-button:hover {\r\n transform: scale(1.05);\r\n filter: brightness(1.1);\r\n}\r\n\r\n.interactive-button:active {\r\n transform: scale(.95);\r\n filter: brightness(1.2);\r\n}\r\n\r\n.nav-list-item, .go-to-app, .contact-sales{\r\n transition: background-color .3s cubic-bezier(.37,.01,0,.98);\r\n}\r\n\r\n.nav-list-item:hover,\r\n.nav-list-item:focus {\r\n background-color: #1E2023;\r\n}\r\n\r\n#nav-list-item-light:hover,\r\n#nav-list-item-light:focus {\r\n background-color: #FBFBFB!important;\r\n}\r\n\r\n/* Shared Underline */\r\n.nav-underline {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n height: 3px;\r\n background-color: #18B6F6;\r\n width: 0;\r\n transition: left 0.3s ease, width 0.3s ease;\r\n}\r\n\r\n.hide-scrollbars {\r\n /* Ensures the element is scrollable */\r\n overflow: auto; /* or overflow: scroll; as needed */\r\n\r\n /* Firefox */\r\n scrollbar-width: none;\r\n\r\n /* IE 10+ */\r\n -ms-overflow-style: none;\r\n}\r\n\r\n/* Chrome, Safari, and Opera */\r\n.hide-scrollbars::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n\r\n.no-invert{\r\n filter: invert(0)!important;\r\n}\r\n\r\n\r\n","var __awaiter=function(t,e,n,r){return new(n||(n=Promise))((function(o,i){function u(t){try{l(r.next(t))}catch(t){i(t)}}function a(t){try{l(r.throw(t))}catch(t){i(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(u,a)}l((r=r.apply(t,e||[])).next())}))},__generator=function(t,e){var n,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:a(0),throw:a(1),return:a(2)},\"function\"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function a(i){return function(a){return function(i){if(n)throw new TypeError(\"Generator is already executing.\");for(;u;)try{if(n=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return u.label++,{value:i[1],done:!1};case 5:u.label++,r=i[1],i=[0];continue;case 7:i=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){u=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]992&&(state.mobileMenu=!1)},e=100,function(){for(var r=this,o=[],i=0;i