Figma to HTML: what to prepare

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.

1. Text and colour styles

All headings, paragraphs and captions go through Text styles, and all colours through 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.

2. Components and their states

Buttons, fields and cards should be components with variants for their states:

• default, hover, pressed, disabled;
• for fields: focus, error, filled;
• for cards: with and without an image, with long and short text.

If a state is missing from the design, the developer will invent it. It is better if you design it yourself.

3. Auto Layout and spacing

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.

4. At least two screen sizes

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.

5. Real texts

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.

6. Images and icons

• photos in the best quality, with no text built into the image;
• icons as vectors (SVG), on the same grid size;
• illustrations in separate frames, so they can be exported.

7. Fonts and licences

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.

8. Interactivity and animations

What opens, what appears on scroll, how the menu behaves on a phone. A Figma prototype or a short text description is enough.

Checklist before sending

• text and colour styles
• components with states
• Auto Layout and a spacing scale
• desktop and mobile versions
• real texts
• quality images, icons in SVG
• licensed fonts
• a description of interactivity

You can send me a finished design, and I'll turn it into HTML with a responsive layout and clean code: Figma to HTML.