Issues with Variants

It can be challenging to convert readable code out of Figma variants. In AutoHTML, variants are handled differently depending on what exactly you select and what your settings are.

Selecting a Component Set

If you use React, Vue or Svelte with Styling option Default, BEM or CSS modules, a Component Set (a component consisting of multiple Variants) will be converted as a single component with all its variants represented with conditionals and modifying CSS classes. As in Figma all variants are actually unique components, AutoHTML converts all variants and compares each layer as a second step. The comparison of these layers is made mostly through layer names. This means: If you want to have readable code you should keep the layer structure and naming consistent throughout the variants. As a basic rule of thumb you should keep the variants as minimal & clean as possible and prefer component properties like Boolean, Text and Instance Swaps over variants wherever it makes sense.

Selecting a Variant Inside a Component Set

If you select a variant inside a component set directly, then only the variant itself will be converted without all the other variants. While this is likely not your desired final component, it can still be useful to use this component as a starting point and develop the rest inside the code editor.

Selecting an Instance

In case you selected an instance, it will be converted with Boolean, Text, and Instance Swap component properties but without additional variants. The default properties may differ from the original component to match what you see.