Getting Started

There are different possibilities to use AutoHTML in Figma. It is available in Dev Mode as well as Design Mode.

Installation

Like any other Figma plugin, AutoHTML can be found in the Figma Community. To use it in a file in Design Mode you need to click the Actions button in the Figma toolbar, select the plugins bar and type autohtml to search for it.

In Dev Mode you need to search for it in the right panel, after selecting the plugin tab.

Plugin Window

The Plugin Window can be accessed from Dev Mode and Design Mode. AutoHTML starts code conversion by selecting a layer. The preview tab allows you to visually assess the accuracy of the design conversion. What you are seeing there is already the generated HTML. 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

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

Inside VSCode Figma Plugin

The plugin is also accessible directly from VSCode. To use it, install the Figma Plugin in VSCode, then search for the AutoHTML Plugin within it. The plugin's appearance and functionality will be identical to its behavior in the previously mentioned locations.