[{"data":1,"prerenderedAt":315},["ShallowReactive",2],{"blog-en-figma-to-html-checklist":3,"published":216},{"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\u002Fen\u002Fblog\u002Ffigma-to-html-checklist.md","Figma to HTML: what to prepare",{"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",{},"A good design cuts days off the markup: fewer questions, fewer edits, fewer differences between the design and the site. Here is what to check in Figma before you send the link to a developer.",[15,16,18],"h2",{"id":17},"_1-text-and-colour-styles","1. Text and colour styles",[11,20,21,22,26,27,30],{},"All headings, paragraphs and captions go through ",[23,24,25],"strong",{},"Text styles",", and all colours through ",[23,28,29],{},"Color styles"," or variables. Then the same tokens appear in the code, and changing a button colour doesn't turn into a hunt through a hundred layers.",[15,32,34],{"id":33},"_2-components-and-their-states","2. Components and their states",[11,36,37],{},"Buttons, fields and cards should be components with variants for their states:",[39,40,41,45,48],"ul",{},[42,43,44],"li",{},"default, hover, pressed, disabled;",[42,46,47],{},"for fields: focus, error, filled;",[42,49,50],{},"for cards: with and without an image, with long and short text.",[11,52,53],{},"If a state is missing from the design, the developer will invent it. It is better if you design it yourself.",[15,55,57],{"id":56},"_3-auto-layout-and-spacing","3. Auto Layout and spacing",[11,59,60],{},"Auto Layout shows how blocks behave when the text changes: what stretches and what wraps. Use spacing from one scale (for example 4, 8, 12, 16, 24, 32...), not 13 and 27 pixels.",[15,62,64],{"id":63},"_4-at-least-two-screen-sizes","4. At least two screen sizes",[11,66,67],{},"At a minimum: desktop and phone. Better still, a tablet or a narrow laptop for complex blocks: tables, menus, multi-column grids. The developer will work out the in-between sizes, but the key decisions should be yours.",[15,69,71],{"id":70},"_5-real-texts","5. Real texts",[11,73,74],{},"Lorem ipsum hides problems: Ukrainian words are longer than English ones, and real-life headings don't fit on one line. Put real texts in the design, or at least texts of a similar length.",[15,76,78],{"id":77},"_6-images-and-icons","6. Images and icons",[39,80,81,84,87],{},[42,82,83],{},"photos in the best quality, with no text built into the image;",[42,85,86],{},"icons as vectors (SVG), on the same grid size;",[42,88,89],{},"illustrations in separate frames, so they can be exported.",[15,91,93],{"id":92},"_7-fonts-and-licences","7. Fonts and licences",[11,95,96],{},"Say where the font comes from and whether it can be used on a website. Google Fonts are free; commercial fonts need a web licence.",[15,98,100],{"id":99},"_8-interactivity-and-animations","8. Interactivity and animations",[11,102,103],{},"What opens, what appears on scroll, how the menu behaves on a phone. A Figma prototype or a short text description is enough.",[15,105,107],{"id":106},"checklist-before-sending","Checklist before sending",[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"," text and colour styles",[42,123,125,127],{"className":124},[115],[117,126],{"disabled":119,"type":120}," components with states",[42,129,131,133],{"className":130},[115],[117,132],{"disabled":119,"type":120}," Auto Layout and a spacing scale",[42,135,137,139],{"className":136},[115],[117,138],{"disabled":119,"type":120}," desktop and mobile versions",[42,141,143,145],{"className":142},[115],[117,144],{"disabled":119,"type":120}," real texts",[42,147,149,151],{"className":148},[115],[117,150],{"disabled":119,"type":120}," quality images, icons in SVG",[42,153,155,157],{"className":154},[115],[117,156],{"disabled":119,"type":120}," licensed fonts",[42,159,161,163],{"className":160},[115],[117,162],{"disabled":119,"type":120}," a description of interactivity",[11,165,166,167,172],{},"You can send me a finished design, and I'll turn it into HTML with a responsive layout and clean code: ",[168,169,171],"a",{"href":170},"\u002Fen\u002Fservices\u002Ffigma-to-html\u002F","Figma to HTML",".",{"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},"A checklist for designers and clients: styles, components, Auto Layout, responsive sizes, image and font export. What to check in Figma before markup.",false,"md","en",null,{},"2026-11-01","\u002Fen\u002Fblog\u002Ffigma-to-html-checklist",{"title":6,"description":186},"Figma to HTML: how to prepare a design properly",[197],"figma-to-html","en\u002Fblog\u002Ffigma-to-html-checklist","Z3JytlPvRgOAS3LaOt5iIqoThCh0ynA-E6eCVHFc0Z0",[189,201,202],"ru","uk",[204,208,212],{"path":205,"title":171,"description":206,"draft":187,"short":207},"\u002Fen\u002Fservices\u002Ffigma-to-html","A Figma design turned into a live site: pixel-accurate, fast, mobile-friendly. HTML, SCSS, Vue, Nuxt or React. Markup can be ordered separately.","Your Figma design becomes a live site with clean code. Markup only.",{"path":209,"title":210,"description":211,"draft":187},"\u002Fen\u002Fblog\u002Fbusiness-card-site-price","Business card website: price and what's included","What a business card website is, which pages it has, what it costs and what drives the price. Plus a checklist of what to prepare before you order.",{"path":213,"title":214,"description":215,"draft":187},"\u002Fen\u002Fblog\u002Fcatalog-or-online-store","Catalogue website or online store: which to choose","Catalogue website or online store: the difference, which is simpler and cheaper, who each suits and how to move from a catalogue to a store as you grow.",[217,218,219,170,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,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,310,311,312,313,314],"\u002Fen\u002Fservices\u002Fbusiness-card-site\u002F","\u002Fen\u002Fservices\u002Fcatalog-site\u002F","\u002Fen\u002Fservices\u002Fcorporate-site\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\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\u002Fcases\u002Fbudgetra\u002F","\u002Fru\u002Fcases\u002Fbudgetra\u002F","\u002Fcases\u002Fbudgetra\u002F","\u002Fcases\u002F","\u002Fen\u002Fcases\u002F","\u002Fru\u002Fcases\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",1793579960036]