Designer’s Guide

Custom HTML

Sometimes, you may need to have control over the generated HTML or to embed some HTML/CSS directly in the pages.

Layer -> HTML

If a Layer name contains an HTML tag, figma.to.website will use it when generating the HTML code of the page.

Examples:

  • A Layer name with “<input type="text" id="name" name="name" required>” will generate an HTML input field.
  • A Layer name with “<nav>” will semantically mark the layer as “navigation”.

Any valid HTML tags and attributes can be used. Please refer to
MDN HTML Reference for the full list.
This technique can greatly improve accessibility and SEO.
See the
Accessibility chapter for more details.

Text styles -> HTML

If a Text style name contains an HTML tag, figma.to.website will use it when generating the HTML code of the page.

Examples:

  • Given a Text style with “<h1>” in its name, Text layers using this style will generate a “<h1>” tag.
  • Given a Text style with “<p class="myclass">” in its name, Text layers using this style will generate a “<p>” tag and add the class attribute "myclass".

Any valid HTML tags and attributes can be used. Please refer to
MDN HTML Reference for the full list.
This technique can greatly improve accessibility and SEO.
See the
Accessibility chapter for more details.
Made
with