[{"data":1,"prerenderedAt":284},["ShallowReactive",2],{"services-en-figma-to-html":3,"published":194},{"doc":4,"versions":175,"related":178},{"id":5,"title":6,"body":7,"description":158,"draft":159,"extension":160,"lang":161,"lead":162,"meta":163,"minutes":151,"modified":164,"navigation":165,"order":166,"path":167,"price":168,"published":169,"seo":170,"seoTitle":171,"short":172,"stem":173,"__hash__":174},"services\u002Fen\u002Fservices\u002Ffigma-to-html.md","Figma to HTML",{"type":8,"value":9,"toc":149},"minimark",[10,14,17,22,57,61,72,76,85,88,92,95,112,116,131],[11,12,13],"p",{},"You can order the markup separately, without ordering the whole site.",[11,15,16],{},"You send the design, and I hand over finished code.",[18,19,21],"h2",{"id":20},"what-you-get","What you get",[23,24,25,33,39,45,51],"ul",{},[26,27,28,32],"li",{},[29,30,31],"strong",{},"Pixel-accurate to the design:"," spacing, fonts, colours and element states (hover, pressed, error).",[26,34,35,38],{},[29,36,37],{},"Responsive layout:"," the site looks good on a phone, a tablet and a computer. If the design only has desktop and phone, I work out the in-between screens myself so nothing breaks.",[26,40,41,44],{},[29,42,43],{},"Clean code:"," a component approach and the BEM methodology; the code is easy to maintain and to hand to another developer.",[26,46,47,50],{},[29,48,49],{},"Speed:"," optimised images and fonts, as little extra JavaScript as possible.",[26,52,53,56],{},[29,54,55],{},"Accessibility:"," semantic markup, keyboard support, text contrast.",[18,58,60],{"id":59},"what-ideliver","What I deliver",[23,62,63,66,69],{},[26,64,65],{},"static HTML and SCSS: for landing pages and simple sites;",[26,67,68],{},"Vue 3 or React components, or Nuxt pages, if your project uses that stack;",[26,70,71],{},"markup built into your current project or WordPress theme.",[18,73,75],{"id":74},"how-to-prepare-the-design","How to prepare the design",[11,77,78,79,84],{},"The article ",[80,81,83],"a",{"href":82},"\u002Fen\u002Fblog\u002Ffigma-to-html-checklist\u002F","Figma to HTML: what to prepare"," explains what to do in Figma before we start, so the markup goes faster and with fewer questions.",[11,86,87],{},"In short: text and colour styles, components with states, Auto Layout, at least two screen sizes.",[18,89,91],{"id":90},"what-the-cost-depends-on","What the cost depends on",[11,93,94],{},"I quote after reviewing the design, with a price and timeline. These affect it:",[23,96,97,100,103,106,109],{},[26,98,99],{},"the number of unique pages and blocks;",[26,101,102],{},"whether there is a mobile version of the design;",[26,104,105],{},"animations and non-standard interactions;",[26,107,108],{},"the stack: static markup, Vue\u002FNuxt, React or WordPress;",[26,110,111],{},"deadlines.",[18,113,115],{"id":114},"how-the-work-goes","How the work goes",[117,118,119,122,125,128],"ol",{},[26,120,121],{},"You send a link to the design.",[26,123,124],{},"I review it and ask questions about anything unclear.",[26,126,127],{},"I build the markup and show interim results on a test link.",[26,129,130],{},"Edits, checking on real devices, handing over the code or publishing.",[11,132,133,134,138,139,143,144,148],{},"Need not just markup but the whole site? See ",[80,135,137],{"href":136},"\u002Fen\u002Fservices\u002Flanding-page\u002F","landing page",", ",[80,140,142],{"href":141},"\u002Fen\u002Fservices\u002Fcorporate-site\u002F","corporate website"," or ",[80,145,147],{"href":146},"\u002Fen\u002Fservices\u002Ffull-stack\u002F","full-stack development",".",{"title":150,"searchDepth":151,"depth":151,"links":152},"",2,[153,154,155,156,157],{"id":20,"depth":151,"text":21},{"id":59,"depth":151,"text":60},{"id":74,"depth":151,"text":75},{"id":90,"depth":151,"text":91},{"id":114,"depth":151,"text":115},"A Figma design turned into a live site: pixel-accurate, fast, mobile-friendly. HTML, SCSS, Vue, Nuxt or React. Markup can be ordered separately.",false,"md","en","Your Figma design becomes a site that looks the same, works on any screen and opens fast.",{},"2026-11-01",true,10,"\u002Fen\u002Fservices\u002Ffigma-to-html","from $100 to $500","2026-10-31",{"title":6,"description":158},"Figma to HTML: responsive layout from your design","Your Figma design becomes a live site with clean code. Markup only.","en\u002Fservices\u002Ffigma-to-html","G1C4xkoUVBYXEbKjweVWqLrLDQ1IrNdor-7rzMJZUZM",[161,176,177],"ru","uk",[179,184,189],{"path":180,"title":181,"description":182,"draft":159,"short":183},"\u002Fen\u002Fservices\u002Fbusiness-card-site","Business card website","A business card website for a business or specialist: services, contacts, basic SEO, mobile-friendly. Guide price: from $250 to $600.","A few pages about you, your services and contacts. From $250 to $600.",{"path":185,"title":186,"description":187,"draft":159,"short":188},"\u002Fen\u002Fservices\u002Fcatalog-site","Catalogue website","A catalogue website without a cart or payment: sections, cards, filters, search, enquiry form. For manufacturers, B2B and services. Price depends on size.","A catalogue of products or services with filters and an enquiry form, no payment on the site.",{"path":190,"title":191,"description":192,"draft":159,"short":193},"\u002Fen\u002Fservices\u002Fcorporate-site","Corporate website development","A corporate website: sections, news, case studies, several languages, forms and integrations. Guide price: from $600 to $1,500.","A company website with sections, news and case studies. From $600 to $1,500.",[195,196,141,197,198,146,136,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,82,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283],"\u002Fen\u002Fservices\u002Fbusiness-card-site\u002F","\u002Fen\u002Fservices\u002Fcatalog-site\u002F","\u002Fen\u002Fservices\u002Ffigma-to-html\u002F","\u002Fen\u002Fservices\u002Fflutter-apps\u002F","\u002Fen\u002Fservices\u002Fonline-store\u002F","\u002Fen\u002Fservices\u002Fportal\u002F","\u002Fen\u002Fservices\u002Fredesign\u002F","\u002Fen\u002Fservices\u002Fsite-speed\u002F","\u002Fen\u002Fservices\u002Fsite-support\u002F","\u002Fen\u002Fservices\u002Fweb-apps\u002F","\u002Fen\u002Fservices\u002Fwordpress\u002F","\u002Fru\u002Fservices\u002Fbusiness-card-site\u002F","\u002Fru\u002Fservices\u002Fcatalog-site\u002F","\u002Fru\u002Fservices\u002Fcorporate-site\u002F","\u002Fru\u002Fservices\u002Ffigma-to-html\u002F","\u002Fru\u002Fservices\u002Fflutter-apps\u002F","\u002Fru\u002Fservices\u002Ffull-stack\u002F","\u002Fru\u002Fservices\u002Flanding-page\u002F","\u002Fru\u002Fservices\u002Fonline-store\u002F","\u002Fru\u002Fservices\u002Fportal\u002F","\u002Fru\u002Fservices\u002Fredesign\u002F","\u002Fru\u002Fservices\u002Fsite-speed\u002F","\u002Fru\u002Fservices\u002Fsite-support\u002F","\u002Fru\u002Fservices\u002Fweb-apps\u002F","\u002Fru\u002Fservices\u002Fwordpress\u002F","\u002Fservices\u002Fbusiness-card-site\u002F","\u002Fservices\u002Fcatalog-site\u002F","\u002Fservices\u002Fcorporate-site\u002F","\u002Fservices\u002Ffigma-to-html\u002F","\u002Fservices\u002Fflutter-apps\u002F","\u002Fservices\u002Ffull-stack\u002F","\u002Fservices\u002Flanding-page\u002F","\u002Fservices\u002Fonline-store\u002F","\u002Fservices\u002Fportal\u002F","\u002Fservices\u002Fredesign\u002F","\u002Fservices\u002Fsite-speed\u002F","\u002Fservices\u002Fsite-support\u002F","\u002Fservices\u002Fweb-apps\u002F","\u002Fservices\u002Fwordpress\u002F","\u002Fservices\u002F","\u002Fen\u002Fservices\u002F","\u002Fru\u002Fservices\u002F","\u002Fen\u002Fblog\u002Fbusiness-card-site-price\u002F","\u002Fen\u002Fblog\u002Fcatalog-or-online-store\u002F","\u002Fen\u002Fblog\u002Fcorporate-site-cost\u002F","\u002Fen\u002Fblog\u002Ffull-stack-vs-team\u002F","\u002Fen\u002Fblog\u002Flanding-page-cost\u002F","\u002Fen\u002Fblog\u002Fmobile-app-cost\u002F","\u002Fen\u002Fblog\u002Fonline-store-cost\u002F","\u002Fen\u002Fblog\u002Fpersonal-account-guide\u002F","\u002Fen\u002Fblog\u002Fportal-where-to-start\u002F","\u002Fen\u002Fblog\u002Fredesign-without-losing-seo\u002F","\u002Fen\u002Fblog\u002Fsite-support-guide\u002F","\u002Fen\u002Fblog\u002Fslow-site-checklist\u002F","\u002Fen\u002Fblog\u002Fwordpress-or-custom-code\u002F","\u002Fru\u002Fblog\u002Fbusiness-card-site-price\u002F","\u002Fru\u002Fblog\u002Fcatalog-or-online-store\u002F","\u002Fru\u002Fblog\u002Fcorporate-site-cost\u002F","\u002Fru\u002Fblog\u002Ffigma-to-html-checklist\u002F","\u002Fru\u002Fblog\u002Ffull-stack-vs-team\u002F","\u002Fru\u002Fblog\u002Flanding-page-cost\u002F","\u002Fru\u002Fblog\u002Fmobile-app-cost\u002F","\u002Fru\u002Fblog\u002Fonline-store-cost\u002F","\u002Fru\u002Fblog\u002Fpersonal-account-guide\u002F","\u002Fru\u002Fblog\u002Fportal-where-to-start\u002F","\u002Fru\u002Fblog\u002Fredesign-without-losing-seo\u002F","\u002Fru\u002Fblog\u002Fsite-support-guide\u002F","\u002Fru\u002Fblog\u002Fslow-site-checklist\u002F","\u002Fru\u002Fblog\u002Fwordpress-or-custom-code\u002F","\u002Fblog\u002Fbusiness-card-site-price\u002F","\u002Fblog\u002Fcatalog-or-online-store\u002F","\u002Fblog\u002Fcorporate-site-cost\u002F","\u002Fblog\u002Ffigma-to-html-checklist\u002F","\u002Fblog\u002Ffull-stack-vs-team\u002F","\u002Fblog\u002Flanding-page-cost\u002F","\u002Fblog\u002Fmobile-app-cost\u002F","\u002Fblog\u002Fonline-store-cost\u002F","\u002Fblog\u002Fpersonal-account-guide\u002F","\u002Fblog\u002Fportal-where-to-start\u002F","\u002Fblog\u002Fredesign-without-losing-seo\u002F","\u002Fblog\u002Fsite-support-guide\u002F","\u002Fblog\u002Fslow-site-checklist\u002F","\u002Fblog\u002Fwordpress-or-custom-code\u002F","\u002Fblog\u002F","\u002Fen\u002Fblog\u002F","\u002Fru\u002Fblog\u002F","\u002Fbrief\u002F","\u002Fen\u002Fbrief\u002F","\u002Fru\u002Fbrief\u002F",1793567720840]