Figma to HTML

You can order the markup separately, without ordering the whole site.

You send the design, and I hand over finished code.

What you get

• Pixel-accurate to the design: spacing, fonts, colours and element states (hover, pressed, error).
• Responsive layout: the site looks good on a phone, a tablet and a computer. If the design only has desktop and phone, I work out the in-between screens myself so nothing breaks.
• Clean code: a component approach and the BEM methodology; the code is easy to maintain and to hand to another developer.
• Speed: optimised images and fonts, as little extra JavaScript as possible.
• Accessibility: semantic markup, keyboard support, text contrast.

What I deliver

• static HTML and SCSS: for landing pages and simple sites;
• Vue 3 or React components, or Nuxt pages, if your project uses that stack;
• markup built into your current project or WordPress theme.

How to prepare the design

The article Figma to HTML: what to prepare explains what to do in Figma before we start, so the markup goes faster and with fewer questions.

In short: text and colour styles, components with states, Auto Layout, at least two screen sizes.

What the cost depends on

I quote after reviewing the design, with a price and timeline. These affect it:

• the number of unique pages and blocks;
• whether there is a mobile version of the design;
• animations and non-standard interactions;
• the stack: static markup, Vue/Nuxt, React or WordPress;
• deadlines.

How the work goes

1. You send a link to the design.
2. I review it and ask questions about anything unclear.
3. I build the markup and show interim results on a test link.
4. Edits, checking on real devices, handing over the code or publishing.

Need not just markup but the whole site? See landing page, corporate website or full-stack development.