Styling options

In case you are using the "Edit layers" feature by applying tags like <a> or <button>, you should make sure to include a proper CSS reset somewhere in your code to unset margins, paddings and other browser defaults.

Classic CSS

This setting converts your design layer by layer, adding CSS classes reflecting the names of your layers in kebab-case. If layers share the same styling, it consolidates them into a single class. In cases where layers share the same name but have different styling, a numerical suffix is added to maintain readability and prevent style conflicts.

BEM

The "Block Element Modifier" naming convention is applied similarly to Classic CSS, but with classes prefixed by the name of your current selection, like button__label. This convention helps prevent styling conflicts in HTML components.

Tailwind

Tailwind, a widely-used CSS framework, is also supported. Figma styles or variables are converted and integrated into the Tailwind config for seamless usage.

Currently only styles & variables within your selection are added to the tailwind.config.

Inline Styles

Opting for this setting means including styling directly on each element. If you prefer having individual styles applied directly to each element, this option is for you.

Code options No Edit Rights