[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_697":698},"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,"_43":44},"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",{"_160":161,"_168":693,"_164":46,"_162":694,"_695":696},"query",[686],"data",{"_45":46,"_47":48,"_49":55,"_51":52,"_53":54,"_56":57,"_58":59,"_60":61},"variations",{},"lastUpdated",1740417926132,"firstPublished",1738880005380,"testRatio",1,"screenshot","https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fc4c2418e3dd6463880cde54917d09bb8","createdBy","BlivRGEJV2YNikTDOeFW3ge3Fyx1","lastUpdatedBy","indexedScalars",{"_45":46,"_47":48,"_49":50,"_51":52,"_53":54},"rev","54o7xwsc7mo","addNoIndex",true,"themeId",false,"customFonts","__unindexed__","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.",[682],"blocks",[74,75],"url","/hub/webinars/builder-labs-app-dashboard/watch-now","state",{"_62":63,"_64":65},"deviceSize","large","location",{"_66":59,"_67":68,"_24":69},"pathname","path",[70,71,72,73],{},"hub","webinars","builder-labs-app-dashboard","watch-now",{"_77":78,"_102":103,"_104":105,"_15":106,"_107":108,"_83":109},{"_15":76,"_77":78,"_79":80,"_81":82,"_83":84},"builder-pixel-3pi0gbjtnrx","@type","@builder.io/sdk:Element","tagName","img","properties",{"_96":97,"_98":99,"_100":101,"_88":87,"_86":87},"responsiveStyles",{"_63":85},{"_86":87,"_88":87,"_89":90,"_91":87,"_92":93,"_94":95},"height","0","width","display","block","opacity","overflow","hidden","pointerEvents","none","src","https://cdn.builder.io/api/v1/pixel?apiKey=YJIGb4i01jvw0SRdL5Bt","aria-hidden","true","alt","","@version",2,"layerName","Webinar Watch Now ","builder-2158c9cde9c54935b9c9b890b44c1809","children",[119,120,121],{"_63":110},{"_89":111,"_112":113,"_114":115,"_116":87,"_117":118},"flex","flexDirection","column","position","relative","flexShrink","boxSizing","border-box",{"_77":78,"_102":103,"_15":292,"_124":628,"_83":629},{"_77":78,"_102":103,"_15":293,"_22":294,"_124":295,"_107":296,"_83":297},{"_77":78,"_102":103,"_15":122,"_22":123,"_124":125,"_83":126},"builder-24397bb0e71541d9a9577287e5c590e0",{"_291":292},"component",{"_17":130,"_131":132},{"_63":127},{"_89":111,"_112":113,"_114":115,"_116":87,"_117":118,"_128":129},"marginTop","0px","Symbol","options",{"_133":48,"_134":48,"_135":48,"_136":137},"dataOnly","inheritState","renderToLiquid","symbol",{"_138":136,"_139":140,"_26":141,"_142":143,"_144":145},"model","entry","8ddc0f312749403482df5bd966e48ef0",{},"ownerId","YJIGb4i01jvw0SRdL5Bt","content",{"_13":146,"_15":140,"_17":147,"_19":148,"_21":21,"_149":48,"_24":150,"_26":151,"_28":152,"_30":153,"_32":154,"_34":35,"_38":39,"_40":39,"_11":155,"_22":156,"_43":157},1680299939339,"Footer Dark","f9962951c48f4a349f6a86310a0053a4","stageModifiedSincePublish",[],{"_177":178,"_179":180,"_49":181,"_182":183,"_184":185,"_56":186,"_60":187},{},1781123009761,1680530357654,[],{"_158":159,"_160":161,"_162":163,"_164":48,"_165":166,"_167":48,"_168":124,"_169":170,"_171":48},"wicmfnkm13","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",{"_173":174,"_175":176},"hasErrors","kind","componentsUsed",{"_172":35},"hasAutosaves","SiteFooter","small",767,"medium",1023,"inputs",[262],"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}",[205],"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 with us to see how teams and agents build and ship software together in one place, on your real code, with Builder.

","builder-cd3c58546a5d4401b22c2daee3289121","builder-ae33e81d0f7e44fdaf70f6e5c3b5fe14",{"_291":512},{"_17":493,"_131":510,"_204":-5},{"_63":501,"_173":502},{"_89":111,"_112":113,"_114":115,"_116":87,"_117":118,"_128":505,"_490":491,"_86":392,"_420":506,"_423":507,"_422":236,"_415":508,"_88":377,"_488":489,"_419":509,"_412":411},{"_490":503,"_423":504},"2rem","1.5rem","6px","Poppins, sans-serif","24px","left","10px",{"_432":511},"

Your next steps

","builder-0203097fb8b74c5d8f2051acc75272ad",{"_208":514,"_212":213,"_221":222,"_210":211,"_217":218,"_206":515,"_168":216,"_214":215,"_219":516},[226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243],{"_226":244,"_228":245,"_230":246,"_234":247,"_236":248,"_238":249,"_240":250,"_242":251,"_235":258,"_229":259,"_233":254,"_243":257,"_231":252,"_239":261,"_227":255,"_237":260,"_241":256,"_232":253},[223,224,225],[519],66.667,{"_77":78,"_102":103,"_15":520,"_107":521,"_83":522},"builder-17938f98dc564dc383f8d44bdb2f9c3f",[527,528,529],{"_63":523,"_173":524},{"_89":111,"_112":113,"_114":115,"_116":87,"_117":118,"_525":526,"_396":416,"_128":392},{"_88":377,"_378":379,"_391":392,"_393":392},"justifyContent","flex-start",{"_77":78,"_102":103,"_15":549,"_403":404,"_124":550,"_83":551},{"_77":78,"_102":103,"_15":542,"_403":404,"_124":543,"_83":544},{"_77":78,"_102":103,"_15":530,"_22":531,"_124":532,"_83":533},"builder-af71a27b870e492f9b7d25c529601946",{"_291":541},{"_17":537,"_131":538},{"_63":534},{"_89":111,"_112":113,"_114":115,"_116":87,"_117":118,"_128":129,"_88":377,"_378":535,"_391":392,"_393":392,"_414":536,"_92":93},"1070px","8px","Embed",{"_58":539,"_144":540},"https://www.youtube.com/embed/d_7L5XuNidE?si=mziGfwBWR6Ng52FL","

","builder-ad731b4f4a1d4a3c99a789dec203963f","builder-ee1dc934d70849758165a0d43c1f4dfd",{"_17":493,"_131":547},{"_63":545,"_173":546},{"_89":111,"_112":113,"_114":115,"_116":87,"_117":118,"_128":505,"_490":491,"_86":392,"_420":421,"_423":503,"_422":238,"_415":508,"_88":377,"_488":489,"_419":305,"_412":411},{"_490":503,"_423":504},{"_432":548},"

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

","builder-2b08e32d1e864c648b4d89e677be1739",{"_17":493,"_131":558},{"_63":552,"_175":553,"_173":554},{"_89":111,"_112":113,"_114":115,"_116":87,"_117":118,"_128":129,"_490":491,"_86":392,"_423":557,"_422":238,"_415":508,"_88":377,"_412":411},{"_128":87},{"_128":555,"_423":556,"_488":489},"13px","1rem","1.2rem",{"_432":559},"

Builder Labs

","builder-3ea805f86b184d4d83058a7ee52622a4","builder-7049d4dcc7394b3ca6afe984299f089a",{"_291":622},[570],{"_63":565,"_173":566},{"_89":111,"_112":568,"_114":115,"_116":87,"_117":118,"_394":536,"_419":569},{"_419":567,"_88":377,"_378":379,"_391":392,"_393":392},"7px","row","50px",{"_77":78,"_102":103,"_571":572,"_79":573,"_15":574,"_22":575,"_107":576,"_83":577},"bindings",{"_620":621},"a","builder-122007b07f664c17b99ffc186f2b2b70",{"_291":619},[583,584],{"_63":578,"_173":579},{"_89":111,"_112":568,"_114":115,"_116":87,"_117":118,"_417":418,"_94":392,"_301":202,"_303":580,"_304":509,"_307":509,"_425":95,"_427":428,"_414":536,"_429":581,"_394":567,"_391":582},{"_303":202,"_301":509,"_304":410,"_307":505},"35px","#d0d0d0","-20px",{"_77":78,"_102":103,"_15":594,"_22":595,"_124":596,"_83":597},{"_77":78,"_102":103,"_15":585,"_403":404,"_22":586,"_124":587,"_83":588},"builder-ab358ad5f20a423fba577ded03017584",{"_291":593},{"_17":493,"_131":591},{"_63":589,"_173":590},{"_89":111,"_112":113,"_114":115,"_116":87,"_117":118,"_490":491,"_86":392,"_412":411,"_94":392,"_422":236,"_393":392,"_128":129,"_419":129},{"_393":392,"_423":424},{"_432":592},"

Back

","builder-b0594165e385453e9d4a6650496e35a0","builder-bd3eda1f91964660988bec5959ab745e",{"_291":618},{"_17":603,"_131":604},{"_63":598,"_173":599},{"_89":111,"_112":113,"_114":115,"_116":87,"_117":118,"_128":129,"_88":377,"_309":202,"_600":202,"_92":93,"_378":507,"_601":602},{"_378":202},"minWidth","filter","invert(1)","Image",{"_605":606,"_607":608,"_609":416,"_610":48,"_611":46,"_612":35,"_613":48,"_86":614,"_88":614,"_615":46,"_616":617},"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",{"_378":625,"_626":48},1200,"lazyLoad","builder-89323f1bffb34ffdb1a02ba0fe3e91e2",{"_17":130,"_131":631},{"_63":630},{"_89":111,"_112":113,"_114":115,"_116":87,"_117":118,"_128":129},{"_133":48,"_134":48,"_135":48,"_136":632},{"_138":136,"_139":633,"_26":634,"_142":143,"_144":635},"0f881171a3454d26b55d6e8f579f7b20",{"_679":46},{"_13":636,"_15":633,"_17":637,"_19":148,"_21":21,"_149":48,"_24":638,"_26":639,"_28":640,"_30":641,"_32":642,"_34":35,"_36":643,"_38":39,"_40":39,"_11":644,"_22":645,"_43":646},1738686116403,"Nav Bar Header",[],{"_177":651,"_179":652,"_184":653,"_49":654,"_56":655,"_60":656},{},1781122992212,1738791481174,"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F9eb0a85a4de040e8b609dfeff1584587",[],{"_164":48,"_165":647,"_167":48,"_162":648,"_160":161,"_168":124,"_169":649,"_171":48},"gb6gw4b4e3j",{"_173":174,"_175":176},"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",{"_650":35},"SiteNav",[677],".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