How to control the HTML of a Figma website

Sometimes you need control over the generated HTML, or to add HTML and CSS directly to a page. Layer names and text style names do both.

Layer names → HTML

When a layer’s name contains an HTML tag, figma.to.website uses it to generate that layer’s HTML. For example:

• A layer named <input type="text" id="name" name="name" required> is published as an HTML input field.
• A layer named <nav> is marked up as the page’s navigation.

<input type="text" id="name" name="name" required>

Any valid HTML tag and attribute works: see the MDN HTML elements reference for the full list.

Text style names → HTML

When a text style’s name contains an HTML tag, every text layer using that style gets it. For example:

• Text layers using a style with <h1> in its name are published as <h1>.
• Text layers using a style with <p class="myclass"> in its name are published as <p> with the class myclass.

Setting it once on the text style tags every heading or paragraph of the site.

Why it matters

Semantic tags — headings, navigation, lists, labels — greatly improve accessibility and SEO: screen readers and search engines understand the structure of the page. See Accessibility.

For larger blocks of HTML, such as a widget or a third-party form, use the Embed component.