https://www.builder.io/assets/website-redesign.design-to-code-CkIQjZsz.js

1import{w as r,j as n,a as e,F as o}from"./components-B1hUkot5.js";import{B as d}from"./builder-brand-token-styles-A69Pi-kk.js";import{S as c}from"./site-nav-BAlskVRS.js";import{SiteFooter as l}from"./site-footer-BXmm4ubk.js";import{b as p}from"./build-seo-head-NuHg0cWd.js";import{U as m,a as u,b as g,c as h}from"./UseCaseIntegrations-EVhziO0n.js";import{P as b}from"./PartnerLogos-BEj9cS_u.js";import{U as f}from"./UseCaseEnterprise-171DknKe.js";import{T as i,R as y,N as w,V as v,S as I,A as S,G as C,a as x,B as k,b as F,c as B,e as A,d as T,k as z,f as U}from"./Integrations-CsF4h3_6.js";import{E as R}from"./EngineeringTestimonials-9QkkE2t8.js";import{a}from"./FusionFeatureSections-BmYcOxFH.js";import{W as E,w as t}from"./WebsiteRedesignFAQSection-BLm6Za-n.js";import{F as G}from"./FusionFinalCTA-DseAHWWL.js";import{a as H,I as L,b as N}from"./IconVectorBezier-Co-E4hBm.js";import{I as D}from"./IconHierarchy-BpRNVL_0.js";import{I as P}from"./IconComponents-QwqdLyMc.js";import{I as j,a as q,b as M}from"./IconIcons-aPpdrK6g.js";import{a as V}from"./IconShieldLock-Di020o8p.js";import{I as Y}from"./IconLockAccess-DMJzfbeY.js";import{I as O}from"./IconCertificate-B587V3Tq.js";function J(){return n("svg",{width:"12",height:"18",viewBox:"0 0 12 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",css:{width:12,height:18},children:[e("path",{d:"M6 9.00212C6 8.20643 6.31609 7.44332 6.87873 6.88068C7.44137 6.31804 8.20447 6.00195 9.00016 6.00195C9.79586 6.00195 10.559 6.31804 11.1216 6.88068C11.6842 7.44332 12.0003 8.20643 12.0003 9.00212C12.0003 9.79782 11.6842 10.5609 11.1216 11.1236C10.559 11.6862 9.79586 12.0023 9.00016 12.0023C8.20447 12.0023 7.44137 11.6862 6.87873 11.1236C6.31609 10.5609 6 9.79782 6 9.00212Z",fill:"#1ABCFE"}),e("path",{d:"M0 15.0002C0 14.2045 0.316088 13.4414 0.878727 12.8787C1.44137 12.3161 2.20447 12 3.00016 12H6.00033V15.0002C6.00033 15.7959 5.68424 16.559 5.1216 17.1216C4.55896 17.6843 3.79586 18.0003 3.00016 18.0003C2.20447 18.0003 1.44137 17.6843 0.878727 17.1216C0.316088 16.559 0 15.7959 0 15.0002H0Z",fill:"#0ACF83"}),e("path",{d:"M6 0V6.00034H9.00016C9.79586 6.00034 10.559 5.68425 11.1216 5.12161C11.6842 4.55897 12.0003 3.79586 12.0003 3.00017C12.0003 2.20448 11.6842 1.44137 11.1216 0.878729C10.559 0.316088 9.79586 0 9.00016 0L6 0Z",fill:"#FF7262"}),e("path",{d:"M0 9.00212C0 9.79782 0.316088 10.5609 0.878727 11.1236C1.44137 11.6862 2.20447 12.0023 3.00016 12.0023H6.00033V6.00195H3.00016C2.20447 6.00195 1.44137 6.31804 0.878727 6.88068C0.316088 7.44332 0 8.20643 0 9.00212H0Z",fill:"#A259FF"}),e("path",{d:"M0 3.00017C0 3.79586 0.316088 4.55897 0.878727 5.12161C1.44137 5.68425 2.20447 6.00034 3.00016 6.00034H6.00033V0H3.00016C2.20447 0 1.44137 0.316088 0.878727 0.878729C0.316088 1.44137 0 2.20448 0 3.00017H0Z",fill:"#F24E1E"})]})}function W(s){return p(null,{title:"Design to Code — Builder.io",description:"Turn designs into production-ready code your team can ship, using your components, tokens, and design system.",path:s,image:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Ff12d10468b934a53a5e276b537c74dfd"}).meta}const he=()=>W("/website-redesign/design-to-code"),Z=[{question:"How does Builder turn Figma designs into code?",answer:e("p",{css:{...t,margin:0},children:"Use Smart Export in the Builder Figma plugin, paste the export into a Project with implementation instructions, then refine the generated UI before sending it for review."})},{question:"Will Builder use our design system?",answer:e("p",{css:{...t,margin:0},children:"Yes. Design System Intelligence works from your indexed components, tokens, icons, and patterns so generated UI follows the system your team already ships."})},{question:"How is Builder different from Figma Make or other Figma-to-code tools?",answer:e("p",{css:{...t,margin:0},children:"Builder works from your indexed components, tokens, and repo context, then sends the implementation into your branch and pull request workflow. That keeps generated UI closer to the system your team actually ships."})},{question:"Will the output match the design exactly?",answer:e("p",{css:{...t,margin:0},children:"Builder works best when Figma files use Auto Layout, clear components, and annotations. Your team can refine spacing, layout, copy, states, and interaction before engineering review."})},{question:"Does Builder replace Figma?",answer:e("p",{css:{...t,margin:0},children:"No. Figma remains where many teams design and maintain their system. Builder turns those designs into implementation work your team can refine, review, and ship."})},{question:"How do engineers stay in control?",answer:e("p",{css:{...t,margin:0},children:"Work moves through branches, pull requests, previews, checks, and approvals. Engineers review the code and decide what ships."})},{question:"Can Builder update existing screens from revised Figma designs?",answer:e("p",{css:{...t,margin:0},children:"Yes. Export the revised frames from Figma, paste them into the existing Project, and ask Builder to update the implementation in place."})}],be=r(function(){return n("div",{className:"builder-brand-tokens",css:{minHeight:"100vh",background:"var(--b-bg-page)",color:"var(--b-text-primary)",fontFamily:"var(--b-font-sans)",display:"flex",flexDirection:"column"},children:[e(d,{}),e(c,{}),n("main",{id:"main-content",css:{flex:1,display:"flex",flexDirection:"column"},children:[e(m,{eyebrow:"Builder for Design to Code",heading:n(o,{children:["Turn designs into code",e("br",{}),e("span",{css:{color:"var(--b-text-secondary)"},children:"your team can ship"})]}),description:"Create responsive UI with your components and tokens, refine every detail, and take it through to production.",ctaLabel:"START CONVERTING"}),e(b,{}),e(u,{sections:[{title:"Convert designs into your components",description:"Builder generates the UI from your components and tokens, so the starting point is true to your design system.",imageAlt:"Agent building a feature in an existing codebase",imageSrc:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F6176250152cd417cafcdbf170f2ff398",imageRight:!0},{title:"Polish every pixel",description:"Adjust spacing, motion, interaction, and states visually, so the product experience is exactly as designed.",imageAlt:"Team collaborating on a feature branch preview",imageSrc:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F4d4f8af70ffe4e759bd5eb173cacea7c",imageRight:!1,mobileTextFirst:!0},{title:"Turn handoff into review",description:"The UI arrives as working code connected to your repo, so the team can review and finish instead of rebuilding it.",imageAlt:"Pull request review and approval workflow",imageSrc:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Ff12d10468b934a53a5e276b537c74dfd",imageRight:!0}]}),e(g,{eyebrow:"Cross-functional app development",heading:"Each team owns the part they know best",tabs:[{id:"designers",label:"DESIGNERS",icon:H,title:`Keep the approved
2design intact`,description:"Bring your designs into Builder, then refine layout, interaction, copy, and states with your product components until the UI matches the approved design.",imageAlt:"Designer comparing generated UI against the Figma file",imageSrc:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F6011b317cb844f5d8638945592282a13",href:"/for/designers"},{id:"product",label:"PRODUCT",icon:D,title:`Act on user needs
3faster`,description:"Turn customer feedback, support tickets, and stakeholder requests into reviewable fixes or UI updates.",imageAlt:"Customer feedback turned into a reviewable UI update",imageSrc:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fa799a753735b4f7d9136b84fbe17f052",href:"/for/product-managers"},{id:"engineers",label:"ENGINEERS",icon:L,title:`Spend less time
4rebuilding screens`,description:"Start from generated UI that follows your repo, components, tokens, and architecture, so your time goes into API wiring, data states, and edge cases.",imageAlt:"Engineer working on architecture while PMs refine UI on the branch",imageSrc:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd77f8249dae849c2829a7d68116d6956",href:"/for/engineers"}]}),e(a,{height:160}),e(h,{heading:"Convert designs with the systems your team already uses",cards:[{title:"Designs and design systems",description:"Use Smart Export, annotations, and your indexed components, tokens, icons, and patterns so Figma work lands closer to the UI your team ships.",chips:[e(i,{icon:e(J,{}),label:"Figma",boxSize:34},"figma"),e(i,{icon:e(P,{size:18,stroke:1.75}),label:"Components",boxSize:34},"components"),e(i,{icon:e(j,{size:18,stroke:1.75}),label:"Design tokens",boxSize:34},"tokens"),e(i,{icon:e(q,{size:18,stroke:1.75}),label:"Icons",boxSize:34},"icons"),e(i,{icon:e(M,{size:18,stroke:1.75}),label:"Patterns",boxSize:34},"patterns")]},{title:"Use your framework",description:"Turn designs into UI for the frontend your product already runs on, with the routes, styling approach, and patterns that decide what can ship.",chips:[e(i,{icon:e(y,{}),label:"React",boxSize:34},"react"),e(i,{icon:e(w,{}),label:"Next.js",boxSize:34},"next"),e(i,{icon:e(v,{}),label:"Vue",boxSize:34},"vue"),e(i,{icon:e(I,{}),label:"Svelte",boxSize:34},"svelte"),e(i,{icon:e(S,{}),label:"Angular",boxSize:34},"angular")]},{title:"Keep your Git workflow",description:"Move design implementation into the branch, pull request, and review process your engineering team already trusts.",chips:[e(i,{icon:e(C,{}),label:"GitHub",boxSize:34},"github"),e(i,{icon:e(x,{}),label:"GitLab",boxSize:34},"gitlab"),e(i,{icon:e(k,{}),label:"Bitbucket",boxSize:34},"bitbucket"),e(i,{icon:e(F,{}),label:"Azure DevOps",boxSize:34},"azure")]},{title:"Extend with MCP connectors",description:"Connect tickets, docs, and internal tools so Builder can pull in the context around the design.",chips:[e(i,{icon:e(B,{}),label:"Supabase",boxSize:34},"supabase"),e(i,{icon:e(A,{}),label:"Linear",boxSize:34},"linear"),e(i,{icon:e(T,{}),label:"Contentful",boxSize:34},"contentful"),e(i,{icon:e(z,{}),label:"Sanity",boxSize:34},"sanity"),e(i,{icon:e(U,{}),label:"Netlify",boxSize:34},"netlify")]}]}),e(f,{title:n(o,{children:["Security your platform team",e("br",{}),e("span",{css:{color:"var(--b-text-secondary)"},children:"can sign off on"})]}),items:[{icon:V,label:"No training on your data",body:"Third-party LLMs never train on your data. On Enterprise plans, Builder doesn't either."},{icon:Y,label:"Private connectivity",body:"Run behind your firewall. Builder connects to internal Git, registries, and APIs over a private link."},{icon:N,label:"Access controls and governance",body:"SSO, roles, and permissions control who can create, edit, and share prototypes."},{icon:O,label:"SOC 2 Type II",body:"Compliant and audited, with enterprise rollout support when you need it."}]}),e(R,{eyebrow:"Customer stories",heading:"Designs that shipped as designed",paddingTop:"200px"}),e(a,{height:160}),e(E,{items:Z,hideSpacer:!0}),e(G,{title:n(o,{children:["Turn design intent into"," ",e("span",{css:{color:"var(--b-text-secondary)"},children:"shippable UI"})]}),description:"Move from design to code with your components, your workflow, and your team in the loop.",ctaLabel:"START CONVERTING",titleMaxWidth:424,paddingTop:"200px"})]}),e(l,{})]})});export{W as b,he as m,be as w};