[{"data":1,"prerenderedAt":310},["ShallowReactive",2],{"blog-uk-figma-to-html-checklist":3,"published":217},{"doc":4,"versions":200,"related":203},{"id":5,"title":6,"body":7,"description":186,"draft":187,"extension":188,"lang":189,"lead":190,"meta":191,"minutes":175,"modified":192,"navigation":119,"path":193,"price":190,"published":192,"seo":194,"seoTitle":195,"services":196,"stem":198,"__hash__":199},"blog\u002Fuk\u002Fblog\u002Ffigma-to-html-checklist.md","Верстка сайту з Figma: що підготувати",{"type":8,"value":9,"toc":173},"minimark",[10,14,19,31,35,38,51,54,58,61,65,68,72,75,79,90,94,97,101,104,108,164],[11,12,13],"p",{},"Хороший макет скорочує верстку на дні: менше питань, менше правок, менше розбіжностей між дизайном і сайтом. Ось що варто перевірити у Figma, перш ніж надсилати посилання розробнику.",[15,16,18],"h2",{"id":17},"_1-стилі-тексту-ікольорів","1. Стилі тексту і кольорів",[11,20,21,22,26,27,30],{},"Усі заголовки, абзаци, підписи — через ",[23,24,25],"strong",{},"Text styles",", усі кольори — через ",[23,28,29],{},"Color styles"," або змінні. Тоді в коді з'являться ті самі токени, і зміна кольору кнопки не перетвориться на пошук по сотні шарів.",[15,32,34],{"id":33},"_2-компоненти-іїхні-стани","2. Компоненти і їхні стани",[11,36,37],{},"Кнопки, поля, картки — компонентами з варіантами станів:",[39,40,41,45,48],"ul",{},[42,43,44],"li",{},"звичайний, наведення, натискання, неактивний;",[42,46,47],{},"для полів — фокус, помилка, заповнене;",[42,49,50],{},"для карток — з картинкою і без, з довгим і коротким текстом.",[11,52,53],{},"Якщо стану немає в макеті, розробник його вигадає. Краще, щоб вигадали ви.",[15,55,57],{"id":56},"_3-auto-layout-івідступи","3. Auto Layout і відступи",[11,59,60],{},"Auto Layout показує, як блоки поводяться у разі зміни тексту: що розтягується, що переноситься. Відступи — з однієї шкали (наприклад, 4, 8, 12, 16, 24, 32…), а не 13 і 27 пікселів.",[15,62,64],{"id":63},"_4-хоча-бдва-розміри-екрана","4. Хоча б два розміри екрана",[11,66,67],{},"Мінімум — десктоп і телефон. Ще краще — планшет або вузький ноутбук для складних блоків: таблиць, меню, багатоколонкових сіток. Проміжні розміри розробник доробить, але ключові рішення мають бути вашими.",[15,69,71],{"id":70},"_5-реальні-тексти","5. Реальні тексти",[11,73,74],{},"Lorem ipsum ховає проблеми: українські слова довші за англійські, а заголовки з реального життя не вміщаються в один рядок. Покладіть у макет справжні тексти або хоча б наближені за довжиною.",[15,76,78],{"id":77},"_6-зображення-йіконки","6. Зображення й іконки",[39,80,81,84,87],{},[42,82,83],{},"фото — у найкращій якості, без вбудованих у картинку текстів;",[42,85,86],{},"іконки — векторні (SVG), однакового розміру сітки;",[42,88,89],{},"ілюстрації — окремими фреймами, щоб їх можна було експортувати.",[15,91,93],{"id":92},"_7-шрифти-іліцензії","7. Шрифти і ліцензії",[11,95,96],{},"Вкажіть, звідки шрифт і чи можна використовувати його на сайті. Google Fonts — безкоштовно; комерційні шрифти потребують вебліцензії.",[15,98,100],{"id":99},"_8-інтерактив-іанімації","8. Інтерактив і анімації",[11,102,103],{},"Що відкривається, що з'являється під час прокрутки, як поводиться меню на телефоні. Прототип у Figma або короткий опис текстом — підійде будь-який із двох варіантів.",[15,105,107],{"id":106},"чекліст-перед-надсиланням","Чекліст перед надсиланням",[39,109,112,122,128,134,140,146,152,158],{"className":110},[111],"contains-task-list",[42,113,116,121],{"className":114},[115],"task-list-item",[117,118],"input",{"disabled":119,"type":120},true,"checkbox"," стилі тексту і кольорів",[42,123,125,127],{"className":124},[115],[117,126],{"disabled":119,"type":120}," компоненти зі станами",[42,129,131,133],{"className":130},[115],[117,132],{"disabled":119,"type":120}," Auto Layout і шкала відступів",[42,135,137,139],{"className":136},[115],[117,138],{"disabled":119,"type":120}," десктоп і мобільна версія",[42,141,143,145],{"className":142},[115],[117,144],{"disabled":119,"type":120}," реальні тексти",[42,147,149,151],{"className":148},[115],[117,150],{"disabled":119,"type":120}," зображення в якості, іконки в SVG",[42,153,155,157],{"className":154},[115],[117,156],{"disabled":119,"type":120}," шрифти з ліцензією",[42,159,161,163],{"className":160},[115],[117,162],{"disabled":119,"type":120}," опис інтерактиву",[11,165,166,167,172],{},"Готовий макет можна надіслати мені — зроблю ",[168,169,171],"a",{"href":170},"\u002Fservices\u002Ffigma-to-html\u002F","верстку сайту з Figma"," з адаптивом і чистим кодом.",{"title":174,"searchDepth":175,"depth":175,"links":176},"",2,[177,178,179,180,181,182,183,184,185],{"id":17,"depth":175,"text":18},{"id":33,"depth":175,"text":34},{"id":56,"depth":175,"text":57},{"id":63,"depth":175,"text":64},{"id":70,"depth":175,"text":71},{"id":77,"depth":175,"text":78},{"id":92,"depth":175,"text":93},{"id":99,"depth":175,"text":100},{"id":106,"depth":175,"text":107},"Чекліст для дизайнера й замовника: стилі, компоненти, Auto Layout, адаптив, експорт зображень і шрифтів. Що перевірити у Figma перед версткою.",false,"md","uk",null,{},"2026-11-01","\u002Fuk\u002Fblog\u002Ffigma-to-html-checklist",{"title":6,"description":186},"Верстка з Figma: як підготувати макет без проблем",[197],"figma-to-html","uk\u002Fblog\u002Ffigma-to-html-checklist","Gj5YD97K8UMLS7nmuJS3M8mo-AZxHBvkyPKIxK3anKI",[201,202,189],"en","ru",[204,209,213],{"path":205,"title":206,"description":207,"draft":187,"short":208},"\u002Fuk\u002Fservices\u002Ffigma-to-html","Верстка сайту з Figma","Верстка макета з Figma у живий сайт: точно за дизайном, HTML, SCSS, Vue, Nuxt чи React, швидка, зручна на телефоні. Беру верстку окремо від розробки сайту.","Ваш макет із Figma стає живим сайтом із чистим кодом. Верстка окремо.",{"path":210,"title":211,"description":212,"draft":187},"\u002Fuk\u002Fblog\u002Fbusiness-card-site-price","Сайт-візитка: ціна і що входить","Що таке сайт-візитка, з яких сторінок складається, скільки коштує і від чого залежить ціна. Чекліст, що підготувати перед замовленням.",{"path":214,"title":215,"description":216,"draft":187},"\u002Fuk\u002Fblog\u002Fcatalog-or-online-store","Сайт-каталог чи інтернет-магазин: що обрати","Сайт-каталог чи інтернет-магазин: у чому різниця, що простіше й дешевше, кому що підходить і як перейти від каталогу до магазину, коли бізнес зросте.",[218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,170,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,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309],"\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\u002Fcorporate-site\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\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\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",1793567720619]