[{"data":1,"prerenderedAt":286},["ShallowReactive",2],{"services-ru-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\u002Fru\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],{},"Чистый код:"," Компонентный подход и методология БЭМ: код легко поддерживать и передать другому разработчику.",[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},"\u002Fru\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},"\u002Fru\u002Fservices\u002Flanding-page\u002F","лендинг",", ",[83,143,145],{"href":144},"\u002Fru\u002Fservices\u002Fcorporate-site\u002F","корпоративный сайт"," или ",[83,148,150],{"href":149},"\u002Fru\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","ru","Ваш макет в Figma становится сайтом, который выглядит так же, работает на любом экране и быстро открывается.",{},"2026-11-01",true,10,"\u002Fru\u002Fservices\u002Ffigma-to-html","от $100 до $500","2026-10-31",{"title":6,"description":160},"Вёрстка сайта из Figma: адаптивно и по макету","Ваш макет из Figma становится живым сайтом с чистым кодом. Вёрстка отдельно.","ru\u002Fservices\u002Ffigma-to-html","ZvTB5nmSbq3BtzuBdpIggRJtpmufoZcm4HQZYJ8rWyM",[178,163,179],"en","uk",[181,186,191],{"path":182,"title":183,"description":184,"draft":161,"short":185},"\u002Fru\u002Fservices\u002Fbusiness-card-site","Сайт-визитка под ключ","Сайт-визитка для бизнеса или специалиста: услуги, контакты, базовое SEO, удобно на телефоне. Ориентир по цене: от $250 до $600.","Несколько страниц о вас, услугах и контактах. От $250 до $600.",{"path":187,"title":188,"description":189,"draft":161,"short":190},"\u002Fru\u002Fservices\u002Fcatalog-site","Сайт-каталог товаров и услуг","Сайт-каталог без корзины и оплаты: разделы, карточки, фильтры, поиск, заявка. Для производителей, B2B и сферы услуг. Цена зависит от объёма каталога.","Каталог товаров или услуг с фильтрами и заявкой, без оплаты на сайте.",{"path":192,"title":193,"description":194,"draft":161,"short":195},"\u002Fru\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,144,213,214,149,139,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,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,85,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],"\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\u002Ffigma-to-html\u002F","\u002Fru\u002Fservices\u002Fflutter-apps\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\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\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",1793567721094]