[{"data":1,"prerenderedAt":286},["ShallowReactive",2],{"services-uk-figma-to-html":3,"published":196},{"doc":4,"versions":177,"related":180},{"id":5,"title":6,"body":7,"description":160,"draft":161,"extension":162,"lang":163,"lead":164,"meta":165,"minutes":153,"modified":166,"navigation":167,"order":168,"path":169,"price":170,"published":171,"seo":172,"seoTitle":173,"short":174,"stem":175,"__hash__":176},"services\u002Fuk\u002Fservices\u002Ffigma-to-html.md","Верстка сайту з Figma",{"type":8,"value":9,"toc":151},"minimark",[10,14,17,22,57,61,75,79,88,91,95,98,115,119,134],[11,12,13],"p",{},"Верстку можна замовити окремо, без розробки сайту під ключ.",[11,15,16],{},"Ви надсилаєте макет, а я віддаю готовий код.",[18,19,21],"h2",{"id":20},"що-ви-отримуєте","Що ви отримуєте",[23,24,25,33,39,45,51],"ul",{},[26,27,28,32],"li",{},[29,30,31],"strong",{},"Точність до макета:"," Відступи, шрифти, кольори і стани елементів: наведення, натискання, помилки у формах.",[26,34,35,38],{},[29,36,37],{},"Адаптив:"," Сайт добре виглядає на телефоні, планшеті й комп'ютері. Якщо в макеті є лише десктоп і телефон, проміжні екрани допрацьовую сам, щоб нічого не з'їжджало.",[26,40,41,44],{},[29,42,43],{},"Чистий код:"," Компонентний підхід і методологія BEM: код легко підтримувати і передати іншому розробнику.",[26,46,47,50],{},[29,48,49],{},"Швидкість:"," Оптимізовані зображення і шрифти, мінімум зайвого JavaScript.",[26,52,53,56],{},[29,54,55],{},"Доступність:"," Семантична розмітка, робота з клавіатури, контраст тексту.",[18,58,60],{"id":59},"уякому-вигляді-віддаю","У якому вигляді віддаю",[23,62,63,66,69,72],{},[26,64,65],{},"статичний HTML і SCSS: для лендінгів і простих сайтів;",[26,67,68],{},"компоненти Vue 3 або сторінки Nuxt, якщо проєкт на цьому стеку;",[26,70,71],{},"компоненти React, якщо у вас React;",[26,73,74],{},"верстку, вбудовану у ваш поточний проєкт чи тему WordPress.",[18,76,78],{"id":77},"як-підготувати-макет","Як підготувати макет",[11,80,81,82,87],{},"Що варто зробити у Figma до початку, щоб верстка пройшла швидше і без питань, — у статті ",[83,84,86],"a",{"href":85},"\u002Fblog\u002Ffigma-to-html-checklist\u002F","верстка сайту з Figma: що підготувати",".",[11,89,90],{},"Коротко: стилі тексту і кольорів, компоненти зі станами, Auto Layout, хоча б два розміри екрана.",[18,92,94],{"id":93},"від-чого-залежить-вартість","Від чого залежить вартість",[11,96,97],{},"Рахую від макета: подивлюся його і назву ціну та терміни. Впливають:",[23,99,100,103,106,109,112],{},[26,101,102],{},"кількість унікальних сторінок і блоків;",[26,104,105],{},"чи є мобільна версія макета;",[26,107,108],{},"анімації й нестандартні взаємодії;",[26,110,111],{},"стек: статична верстка, Vue\u002FNuxt, React чи WordPress;",[26,113,114],{},"терміни.",[18,116,118],{"id":117},"як-проходить-робота","Як проходить робота",[120,121,122,125,128,131],"ol",{},[26,123,124],{},"Ви надсилаєте посилання на макет.",[26,126,127],{},"Я переглядаю його й ставлю питання щодо неочевидних місць.",[26,129,130],{},"Верстаю, показую проміжний результат на тестовому посиланні.",[26,132,133],{},"Правки, перевірка на реальних пристроях, передача коду або публікація.",[11,135,136,137,141,142,146,147,87],{},"Потрібна не лише верстка, а й сайт цілком? Дивіться ",[83,138,140],{"href":139},"\u002Fservices\u002Flanding-page\u002F","лендінг",", ",[83,143,145],{"href":144},"\u002Fservices\u002Fcorporate-site\u002F","корпоративний сайт"," чи ",[83,148,150],{"href":149},"\u002Fservices\u002Ffull-stack\u002F","full-stack розробку",{"title":152,"searchDepth":153,"depth":153,"links":154},"",2,[155,156,157,158,159],{"id":20,"depth":153,"text":21},{"id":59,"depth":153,"text":60},{"id":77,"depth":153,"text":78},{"id":93,"depth":153,"text":94},{"id":117,"depth":153,"text":118},"Верстка макета з Figma у живий сайт: точно за дизайном, HTML, SCSS, Vue, Nuxt чи React, швидка, зручна на телефоні. Беру верстку окремо від розробки сайту.",false,"md","uk","Ваш макет у Figma стає сайтом, який виглядає так само, працює на будь-якому екрані й швидко відкривається.",{},"2026-11-01",true,10,"\u002Fuk\u002Fservices\u002Ffigma-to-html","від $100 до $500","2026-10-31",{"title":6,"description":160},"Верстка сайту з Figma: адаптивна верстка макета","Ваш макет із Figma стає живим сайтом із чистим кодом. Верстка окремо.","uk\u002Fservices\u002Ffigma-to-html","IL1q8zyveXo26cRBXVgJ9lFp6M058NwEq1Q1d9V5wRk",[178,179,163],"en","ru",[181,186,191],{"path":182,"title":183,"description":184,"draft":161,"short":185},"\u002Fuk\u002Fservices\u002Fbusiness-card-site","Сайт-візитка під ключ","Сайт-візитка для бізнесу чи спеціаліста: послуги, контакти, базове SEO, зручно на телефоні. Орієнтир за ціною: від $250 до $600.","Кілька сторінок про вас, послуги і контакти. Від $250 до $600.",{"path":187,"title":188,"description":189,"draft":161,"short":190},"\u002Fuk\u002Fservices\u002Fcatalog-site","Сайт-каталог товарів і послуг","Сайт-каталог без кошика й оплати: розділи, картки, фільтри, пошук, заявка. Для виробників, B2B і сфери послуг. Ціна залежить від обсягу каталогу.","Каталог товарів чи послуг з фільтрами й заявкою, без оплати на сайті.",{"path":192,"title":193,"description":194,"draft":161,"short":195},"\u002Fuk\u002Fservices\u002Fcorporate-site","Розробка корпоративного сайту","Корпоративний сайт: розділи, новини, кейси, кілька мов, форми й інтеграції. Орієнтир за ціною: від $600 до $1 500.","Сайт компанії з розділами, новинами і кейсами. Від $600 до $1 500.",[197,198,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,144,227,228,149,139,229,230,231,232,233,234,235,236,237,238,239,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,85,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285],"\u002Fen\u002Fservices\u002Fbusiness-card-site\u002F","\u002Fen\u002Fservices\u002Fcatalog-site\u002F","\u002Fen\u002Fservices\u002Fcorporate-site\u002F","\u002Fen\u002Fservices\u002Ffigma-to-html\u002F","\u002Fen\u002Fservices\u002Fflutter-apps\u002F","\u002Fen\u002Fservices\u002Ffull-stack\u002F","\u002Fen\u002Fservices\u002Flanding-page\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\u002Ffigma-to-html\u002F","\u002Fservices\u002Fflutter-apps\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\u002Ffigma-to-html-checklist\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\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",1793567720963]