Getting Started

Plugin Window

AutoHTML Plugin Window

The Plugin Window can be accessed from Dev Mode and Design Mode. AutoHTML facilitates code conversion by selecting a layer. The preview tab allows you to visually assess the accuracy of the design conversion. Within the code tab, you can inspect all the converted files inside a code editor like view. The code is displayed with a readonly version of Monaco editor, which is the same UI that is used by VSCode, making it possible to collapse areas and search for variables in case you need to.

For standard HTML, you'll find a <layer-name>.html file containing only the HTML markup, a style.css file, and an index.html file serving as a design preview. If you opt for React or other frameworks, the plugin may generate folders containing your components, depending on your chosen settings.

Dev Mode Code Section

AutoHTML Plugin Codegen Settings

If you choose to run AutoHTML as a codegen plugin you can get useful code snippets along with other information that Figma gives you.

When AutoHTML is run as a codegen plugin it does automatically detect nested components when used with React, Vue or Svelte. When run inside the classic window you would need to enable it in the settings.

Introduction Responsive design