figma2html

About this plugin

Export Figma frames to responsive HTML and CSS. A Figma version of ai2html, with additional features. Created by The DataFace.

Learn more about this plugin on GitHub.

Instructions

1. Create your artwork

• Size frames according to the desired breakpoints. (note: breakpoints are based on width and not height).
• Name frames using the following format: #[width]px (e.g. #640px).
• If you're using a Google Font that's built in to Figma, you'll have the option to automatically include the appropriate Google Fonts tag in your exported HTML. Otherwise, you can add your webfonts to your project yourself or include a custom script or link any custom CSS in the Page settings panel.'

2. Run the plugin and configure your settings

• In the plugin dialog, you can you load your preconfigured settings from a YAML text node named f2h-settings on the current page in your Figma doc, or you can write your current settings to a YAML text node.

3. Click Export and voila, you can save your exported images and HTML file as a zipped folder.

How it Works

• The plugin grabs all frames named #[width]px on your current page, unframes all children (turns frames into groups to get positions relative to the parent frame), hides all text layers, and exports as a PNG, JPG, or SVG, at a specified scale.
• All text elements are added via absolutely positioned divs.
• Text is rendered as <p> (or header) elements. A style is applied based on the most frequently used style within that frame, with inline styles applied to text that differs. This should match what you see in Figma.
• Text frames with auto widths are rendered with width=auto, while text frames with set widths include that width as inline css.
• Text is rendered with any visible drop shadows and layer blurs as inline css.
• The plugin supports rotated text, as well as left/right/center-aligned text.
• If Include Resizer Script is turned on, the outputted HTML will include JS to show and hide the correct image at the appropriate size, based on the named width of the frame.

Contributing + Feedback

We welcome feedback, bug reports and feature requests in the form of GitHub Issues or PRs. Alternatively, comments can be left on the Figma plugin community page.

Further information on contributing can be found in CONTRIBUTING.md.

Acknowledgements

Figma2html is not possible without ai2html, created by Archie Tse at The New York Times. Figma2html sprung from the same codebase, modified in time to add additional features specific to the Figma API. The plugin was inspired by Thomas Lowry's Figma Plugin DS Svelte library.

The core team from The DataFace features Sam Vickars, Sawyer Click, and Michael Hester.