[{"data":1,"prerenderedAt":310},["ShallowReactive",2],{"blog-ru-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\u002Fru\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},"\u002Fru\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","ru",null,{},"2026-11-01","\u002Fru\u002Fblog\u002Ffigma-to-html-checklist",{"title":6,"description":186},"Вёрстка из Figma: как подготовить макет без проблем",[197],"figma-to-html","ru\u002Fblog\u002Ffigma-to-html-checklist","2V0B00DE-5c9dKZqVTSEEdQObSTZJovIHTy9rrtF1Ag",[201,189,202],"en","uk",[204,209,213],{"path":205,"title":206,"description":207,"draft":187,"short":208},"\u002Fru\u002Fservices\u002Ffigma-to-html","Вёрстка сайта из Figma","Вёрстка макета из Figma в готовый сайт: точно по дизайну, адаптивно, на HTML, SCSS, Vue, Nuxt или React. Беру вёрстку отдельно от разработки сайта.","Ваш макет из Figma становится живым сайтом с чистым кодом. Вёрстка отдельно.",{"path":210,"title":211,"description":212,"draft":187},"\u002Fru\u002Fblog\u002Fbusiness-card-site-price","Сайт-визитка: цена и что входит","Что такое сайт-визитка, из каких страниц состоит, сколько стоит и от чего зависит цена. Чек-лист: что подготовить перед заказом.",{"path":214,"title":215,"description":216,"draft":187},"\u002Fru\u002Fblog\u002Fcatalog-or-online-store","Сайт-каталог или интернет-магазин: что выбрать","Сайт-каталог или интернет-магазин: в чём разница, что проще и дешевле, кому что подходит и как перейти от каталога к магазину, когда бизнес вырастет.",[218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,170,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,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\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\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",1793567721186]