3:I[9275,[],""]
5:I[1343,[],""]
6:I[8700,["231","static/chunks/231-42eeaa612179830e.js","837","static/chunks/837-29ccadcc1eaf8d5e.js","185","static/chunks/app/layout-4689815b234f48f7.js"],"ThemeProviders"]
7:I[4080,["231","static/chunks/231-42eeaa612179830e.js","837","static/chunks/837-29ccadcc1eaf8d5e.js","185","static/chunks/app/layout-4689815b234f48f7.js"],""]
8:I[9032,["231","static/chunks/231-42eeaa612179830e.js","837","static/chunks/837-29ccadcc1eaf8d5e.js","185","static/chunks/app/layout-4689815b234f48f7.js"],"KBarSearchProvider"]
9:I[231,["231","static/chunks/231-42eeaa612179830e.js","173","static/chunks/173-af5b99c330035292.js","797","static/chunks/app/blog/%5B...slug%5D/page-c1896e7910e189aa.js"],""]
a:I[509,["231","static/chunks/231-42eeaa612179830e.js","837","static/chunks/837-29ccadcc1eaf8d5e.js","185","static/chunks/app/layout-4689815b234f48f7.js"],"KBarButton"]
b:I[1398,["231","static/chunks/231-42eeaa612179830e.js","837","static/chunks/837-29ccadcc1eaf8d5e.js","185","static/chunks/app/layout-4689815b234f48f7.js"],"default"]
c:I[8976,["231","static/chunks/231-42eeaa612179830e.js","837","static/chunks/837-29ccadcc1eaf8d5e.js","185","static/chunks/app/layout-4689815b234f48f7.js"],"default"]
4:["slug","builder-io","c"]
0:["X5bocbsvtsRLAPTmoOG9E",[[["",{"children":["blog",{"children":[["slug","builder-io","c"],{"children":["__PAGE__?{\"slug\":[\"builder-io\"]}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["blog",{"children":[["slug","builder-io","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/8666460c05bbe3a0.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},[["$","html",null,{"lang":"vi-VN","className":"__variable_587f35 scroll-smooth","suppressHydrationWarning":true,"children":[["$","link",null,{"rel":"manifest","href":"/static/favicons/site.webmanifest"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"32x32","href":"/static/favicons/favicon.png"}],["$","meta",null,{"name":"msapplication-TileColor","content":"#000000"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: light)","content":"#fff"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: dark)","content":"#000"}],["$","link",null,{"rel":"alternate","type":"application/rss+xml","href":"/feed.xml"}],["$","body",null,{"className":"bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white","children":["$","$L6",null,{"children":[["$undefined","$undefined","$undefined",["$","$L7",null,{"async":true,"defer":true,"data-website-id":"$undefined","src":"https://analytics.umami.is/script.js"}],"$undefined","$undefined"],["$","section",null,{"className":"mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0","children":[["$","$L8",null,{"kbarConfig":{"searchDocumentsPath":"/search.json"},"children":[["$","header",null,{"className":"flex items-center w-full bg-white dark:bg-gray-950 justify-between py-10","children":[["$","$L9",null,{"className":"break-words","href":"/","aria-label":"ducdh.com","children":["$","div",null,{"className":"flex items-center justify-between","children":[["$","div",null,{"className":"mr-3","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":26,"height":26,"fill":"currentColor","className":"logo_svg__bi logo_svg__bi-boxes logo_svg__mb-1","viewBox":"0 0 16 16","children":["$","path",null,{"d":"M7.752.066a.5.5 0 0 1 .496 0l3.75 2.143a.5.5 0 0 1 .252.434v3.995l3.498 2A.5.5 0 0 1 16 9.07v4.286a.5.5 0 0 1-.252.434l-3.75 2.143a.5.5 0 0 1-.496 0l-3.502-2-3.502 2.001a.5.5 0 0 1-.496 0l-3.75-2.143A.5.5 0 0 1 0 13.357V9.071a.5.5 0 0 1 .252-.434L3.75 6.638V2.643a.5.5 0 0 1 .252-.434zM4.25 7.504 1.508 9.071l2.742 1.567 2.742-1.567zM7.5 9.933l-2.75 1.571v3.134l2.75-1.571zm1 3.134 2.75 1.571v-3.134L8.5 9.933zm.508-3.996 2.742 1.567 2.742-1.567-2.742-1.567zm2.242-2.433V3.504L8.5 5.076V8.21zM7.5 8.21V5.076L4.75 3.504v3.134zM5.258 2.643 8 4.21l2.742-1.567L8 1.076zM15 9.933l-2.75 1.571v3.134L15 13.067zM3.75 14.638v-3.134L1 9.933v3.134z"}]}]}],["$","div",null,{"className":"hidden h-6 text-2xl font-semibold sm:block","children":"ducdh.com"}]]}]}],["$","div",null,{"className":"flex items-center space-x-4 leading-5 sm:space-x-6","children":[["$","div",null,{"className":"no-scrollbar hidden max-w-40 items-center space-x-4 overflow-x-auto sm:flex sm:space-x-6 md:max-w-72 lg:max-w-96","children":[["$","$L9",null,{"className":"block font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400","href":"/blog","children":"Blog"}],["$","$L9",null,{"className":"block font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400","href":"/tags","children":"Tags"}],["$","$L9",null,{"className":"block font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400","href":"/about","children":"About"}]]}],["$","$La",null,{"aria-label":"Search","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","strokeWidth":1.5,"stroke":"currentColor","className":"h-6 w-6 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400","children":["$","path",null,{"strokeLinecap":"round","strokeLinejoin":"round","d":"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"}]}]}],["$","$Lb",null,{}],["$","$Lc",null,{}]]}]]}],["$","main",null,{"className":"mb-auto","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6","children":[["$","div",null,{"className":"space-x-2 pb-8 pt-6 md:space-y-5","children":["$","h1",null,{"className":"text-6xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:text-8xl md:leading-14","children":"404"}]}],["$","div",null,{"className":"max-w-md","children":[["$","p",null,{"className":"mb-4 text-xl font-bold leading-normal md:text-2xl","children":"Sorry we couldn't find this page."}],["$","p",null,{"className":"mb-8","children":"But dont worry, you can find plenty of other things on our homepage."}],["$","$L9",null,{"className":"focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-blue-700 focus:outline-none dark:hover:bg-blue-500","href":"/","children":"Back to homepage"}]]}]]}],"notFoundStyles":[],"styles":null}]}]]}],["$","footer",null,{"children":["$","div",null,{"className":"mt-16 flex flex-col items-center","children":[["$","div",null,{"className":"mb-3 flex space-x-4","children":[["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"mailto:huuduc.uneti@gmail.com","children":[["$","span",null,{"className":"sr-only","children":"mail"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 20 20","className":"fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-6 w-6","children":[["$","title",null,{"children":"Mail"}],["$","path",null,{"d":"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"}],["$","path",null,{"d":"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"}]]}]]}],["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"https://github.com/dhduc","children":[["$","span",null,{"className":"sr-only","children":"github"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-6 w-6","children":[["$","title",null,{"children":"GitHub"}],["$","path",null,{"d":"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"}]]}]]}],["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"https://facebook.com/huuduc.a7","children":[["$","span",null,{"className":"sr-only","children":"facebook"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-6 w-6","children":[["$","title",null,{"children":"Facebook"}],["$","path",null,{"d":"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"}]]}]]}],null,["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"https://www.linkedin.com/in/ducdh","children":[["$","span",null,{"className":"sr-only","children":"linkedin"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-6 w-6","children":[["$","title",null,{"children":"Linkedin"}],["$","path",null,{"d":"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"}]]}]]}],null,["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"https://twitter.com/_ducdh","children":[["$","span",null,{"className":"sr-only","children":"x"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-6 w-6","children":[["$","title",null,{"children":"X"}],["$","path",null,{"d":"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"}]]}]]}],null,null]}],["$","div",null,{"className":"mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400","children":[["$","div",null,{"children":"Duc Dao"}],["$","div",null,{"children":" • "}],["$","div",null,{"children":"© 2024"}],["$","div",null,{"children":" • "}],["$","$L9",null,{"className":"break-words","href":"/","children":"Homepage | ducdh.com"}]]}]]}]}]]}]]}]}]]}],null],null],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/12667d03f03df565.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/68d903e7b242758d.css","precedence":"next","crossOrigin":"$undefined"}]],"$Ld"]]]]
e:I[4347,["231","static/chunks/231-42eeaa612179830e.js","173","static/chunks/173-af5b99c330035292.js","797","static/chunks/app/blog/%5B...slug%5D/page-c1896e7910e189aa.js"],"default"]
f:I[8173,["231","static/chunks/231-42eeaa612179830e.js","173","static/chunks/173-af5b99c330035292.js","797","static/chunks/app/blog/%5B...slug%5D/page-c1896e7910e189aa.js"],"Image"]
10:I[9629,["231","static/chunks/231-42eeaa612179830e.js","173","static/chunks/173-af5b99c330035292.js","797","static/chunks/app/blog/%5B...slug%5D/page-c1896e7910e189aa.js"],"default"]
2:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"headline\":\"Builder.io Visual Copilot Figma to HTML plugin\",\"datePublished\":\"2024-02-10T00:00:00.000Z\",\"dateModified\":\"2024-02-10T00:00:00.000Z\",\"description\":\"Cutting your time with Figma to HTML plugin by Builder.io Visual Copilot\",\"image\":\"\",\"url\":\"https://ducdh.com/blog/builder-io\",\"author\":[{\"@type\":\"Person\",\"name\":\"Duc Dao\"}]}"}}],["$","section",null,{"className":"mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0","children":[["$","$Le",null,{}],["$","article",null,{"children":["$","div",null,{"className":"xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700","children":[["$","header",null,{"className":"pt-6 xl:pb-6","children":["$","div",null,{"className":"space-y-1 text-center","children":[["$","dl",null,{"className":"space-y-10","children":["$","div",null,{"children":[["$","dt",null,{"className":"sr-only","children":"Published on"}],["$","dd",null,{"className":"text-base font-medium leading-6 text-gray-500 dark:text-gray-400","children":["$","time",null,{"dateTime":"2024-02-10T00:00:00.000Z","children":"Thứ Bảy, 10 tháng 2, 2024"}]}]]}]}],["$","div",null,{"children":["$","h1",null,{"className":"text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14","children":"Builder.io Visual Copilot Figma to HTML plugin"}]}]]}]}],["$","div",null,{"className":"grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0","children":[["$","dl",null,{"className":"pb-10 pt-6 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700","children":[["$","dt",null,{"className":"sr-only","children":"Authors"}],["$","dd",null,{"children":["$","ul",null,{"className":"flex flex-wrap justify-center gap-4 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8","children":[["$","li","Duc Dao",{"className":"flex items-center space-x-2","children":[["$","$Lf",null,{"src":"/static/images/avatar.jpg","width":38,"height":38,"alt":"avatar","className":"h-10 w-10 rounded-full"}],["$","dl",null,{"className":"whitespace-nowrap text-sm font-medium leading-5","children":[["$","dt",null,{"className":"sr-only","children":"Name"}],["$","dd",null,{"className":"text-gray-900 dark:text-gray-100","children":"Duc Dao"}],["$","dt",null,{"className":"sr-only","children":"Twitter"}],["$","dd",null,{"children":["$","a",null,{"className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","target":"_blank","rel":"noopener noreferrer","href":"https://twitter.com/_ducdh","children":"@_ducdh"}]}]]}]]}]]}]}]]}],["$","div",null,{"className":"divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0","children":[["$","div",null,{"className":"prose max-w-none pb-8 pt-10 dark:prose-invert","children":[["$","p",null,{"children":["Trong thời kỳ ngày nay, quá trình phát triển web đòi hỏi sự linh hoạt và hiệu quả để tạo ra các giao diện hấp dẫn và dễ tương tác. Một công cụ khá hữu ích giúp giảm bớt thời gian cho FE developer là tiện ích chuyển đổi từ Figma sang code HTML của ",["$","a",null,{"className":"break-words","target":"_blank","rel":"noopener noreferrer","href":"https://www.builder.io/","children":"https://www.builder.io/"}]," với tên gọi Visual Copilot. Đây không chỉ là một giải pháp tiện lợi, mà còn mang lại nhiều lợi ích khác nhau."]}],["$","p",null,{"children":["$","strong",null,{"children":"Generate code chỉ với 1 click"}]}],["$","p",null,{"children":"Một trong những ưu điểm lớn nhất của tiện ích này là khả năng chuyển đổi chỉ với một click. Quá trình này không chỉ tiết kiệm thời gian mà còn giảm nguy cơ phát sinh lỗi. Developer có thể dễ dàng chuyển đổi từ giao diện đã thiết kế trên Figma sang code HTML chỉ với một thao tác đơn giản."}],["$","p",null,{"children":[["$","strong",null,{"children":"Tự động responsive trên mobile"}]," Khả năng tự động đáp ứng responsive trên mobile là một tính năng khá tốt giúp tiện ích này nổi bật. Khi generating, code HTML sẽ được tự động điều chỉnh để đáp ứng responsive. Điều này đảm bảo rằng trang web sẽ hiển thị đúng trên nhiều loại thiết bị và kích thước màn hình khác nhau, giúp cải thiện trải nghiệm người dùng."]}],["$","p",null,{"children":[["$","strong",null,{"children":"Hỗ trợ nền tảng và thư viện mạnh mẽ"}]," Tiện ích này cũng hỗ trợ nhiều framework và thư viện phổ biến như Bootstrap, Tailwind CSS, React, và nhiều hơn nữa. Điều này mang lại sự linh hoạt cho developer để tích hợp trực tiếp vào dự án sử dụng các công nghệ đã quen thuộc trong dự án."]}],["$","p",null,{"children":[["$","strong",null,{"children":"Source code có thể tùy chỉnh"}]," Với tiện ích này, mã nguồn HTML được tạo ra có thể dễ dàng tùy chỉnh để đáp ứng yêu cầu cụ thể của dự án. Developer có thể điều chỉnh và thay đổi code theo nhu cầu cụ thể của họ mà không làm ảnh hưởng đến cấu trúc chung."]}],["$","p",null,{"children":[["$","strong",null,{"children":"Hoàn toàn miễn phí"}]," Tiện ích đang được sử dụng miễn phí"]}],["$","h2",null,{"className":"content-header","id":"bắt-đầu-với-visual-copilot-hướng-dẫn-cơ-bản","children":[["$","a",null,{"className":"break-words","href":"#bắt-đầu-với-visual-copilot-hướng-dẫn-cơ-bản","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Bắt đầu với Visual Copilot: Hướng dẫn cơ bản"]}],["$","ul",null,{"children":[["$","li",null,{"children":"Mở plugin Visual Copilot trong Figma."}],["$","li",null,{"children":"Chọn một layer trong file Figma."}],["$","li",null,{"children":"Nhấp vào nút Generate code."}],["$","li",null,{"children":"Code sẽ được tự động tạo ra và tích hợp vào website editor trên ứng dụng builder.io trên 1 tab mới được mở ra."}],["$","li",null,{"children":"Copy code HTML được tạo ra vào dự án."}],["$","li",null,{"children":"Tùy chỉnh code để hỗ trợ animation, font chữ cho phù hợp."}]]}],["$","p",null,{"children":"Một số vấn đề và thách thức mà người sử dụng có thể gặp phải"}],["$","ul",null,{"children":[["$","li",null,{"children":"Khó xử lý với những file Figma file có sự phức tạp cao, hoặc khi sử dụng các tính năng đặc biệt mà tiện ích chưa hỗ trợ, hoặc khi có yêu cầu điều chỉnh phức tạp."}],["$","li",null,{"children":"Source code được tạo có thể không tối ưu, developer cần phải thực hiện tối ưu hóa thêm, ví dụ như tái cấu trúc component, bổ sung thêm các chức năng cần Javascript."}],["$","li",null,{"children":"Việc chuyển đổi thông tin từ Figma có thể gây ra lo ngại về an ninh và quyền riêng tư, khi design này được convert sang hệ thống của Builder.IO"}],["$","li",null,{"children":"Tiện ích có thể không tương thích tốt với mọi nền tảng và môi trường phát triển."}],["$","li",null,{"children":"Code được generate sẽ không phù hợp với các tiêu chuẩn về code base của công ty, hoặc theo ý muốn của Developer."}]]}],["$","p",null,{"children":"Kết hợp ưu nhược điểm của tiện ích thì nên áp dụng khi nào:"}],["$","ul",null,{"children":[["$","li",null,{"children":"hỗ trợ việc xây dựng UI"}],["$","li",null,{"children":"xây dựng các demo, POC, MVP"}],["$","li",null,{"children":"áp dụng cho các dự án có design không quá phức tạp"}]]}],["$","p",null,{"children":"Cuối cùng, tiện ích chỉ hỗ trợ quá trình cắt giao diện, giúp giảm bớt một phần nào thời gian thực hiện việc xây dựng giao diện. Việc áp dụng tiện ích này vẫn phụ thuộc vào đánh giá của từng developer trong dự án, phù hợp với yêu cầu của từng dự án."}]]}],["$","div",null,{"className":"pb-6 pt-6 text-center text-gray-700 dark:text-gray-300","id":"comment","children":["$","$L10",null,{"slug":"builder-io"}]}]]}],["$","footer",null,{"children":[["$","div",null,{"className":"divide-gray-200 text-sm font-medium leading-5 dark:divide-gray-700 xl:col-start-1 xl:row-start-2 xl:divide-y","children":[["$","div",null,{"className":"py-4 xl:py-8","children":[["$","h2",null,{"className":"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400","children":"Tags"}],["$","div",null,{"className":"flex flex-wrap","children":[["$","$L9",null,{"href":"/tags/web","className":"mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":"Web"}],["$","$L9",null,{"href":"/tags/nocode","className":"mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":"nocode"}],["$","$L9",null,{"href":"/tags/ai","className":"mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":"AI"}]]}]]}],["$","div",null,{"className":"flex justify-between py-4 xl:block xl:space-y-8 xl:py-8","children":[["$","div",null,{"children":[["$","h2",null,{"className":"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400","children":"Previous Article"}],["$","div",null,{"className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":["$","$L9",null,{"className":"break-words","href":"/blog/aws-best-practice","children":"AWS Best Practice for Beginner"}]}]]}],"$undefined"]}]]}],["$","div",null,{"className":"pt-4 xl:pt-8","children":["$","$L9",null,{"className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","href":"/blog","aria-label":"Back to the blog","children":"← Back to the blog"}]}]]}]]}]]}]}]]}]]
d:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Builder.io Visual Copilot Figma to HTML plugin | Homepage | ducdh.com"}],["$","meta","3",{"name":"description","content":"Cutting your time with Figma to HTML plugin by Builder.io Visual Copilot"}],["$","meta","4",{"name":"robots","content":"index, follow"}],["$","meta","5",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","6",{"rel":"canonical","href":"https://ducdh.com/blog/builder-io"}],["$","link","7",{"rel":"alternate","type":"application/rss+xml","href":"https://ducdh.com/feed.xml"}],["$","meta","8",{"property":"og:title","content":"Builder.io Visual Copilot Figma to HTML plugin"}],["$","meta","9",{"property":"og:description","content":"Cutting your time with Figma to HTML plugin by Builder.io Visual Copilot"}],["$","meta","10",{"property":"og:url","content":"https://ducdh.com/blog/builder-io"}],["$","meta","11",{"property":"og:site_name","content":"Homepage | ducdh.com"}],["$","meta","12",{"property":"og:locale","content":"en_US"}],["$","meta","13",{"property":"og:image","content":"https://ducdh.com/"}],["$","meta","14",{"property":"og:type","content":"article"}],["$","meta","15",{"property":"article:published_time","content":"2024-02-10T00:00:00.000Z"}],["$","meta","16",{"property":"article:modified_time","content":"2024-02-10T00:00:00.000Z"}],["$","meta","17",{"property":"article:author","content":"Duc Dao"}],["$","meta","18",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","19",{"name":"twitter:title","content":"Builder.io Visual Copilot Figma to HTML plugin"}],["$","meta","20",{"name":"twitter:description","content":"Cutting your time with Figma to HTML plugin by Builder.io Visual Copilot"}],["$","meta","21",{"name":"next-size-adjust"}]]
1:null