ThemeBuilder Plugin for Figma Overview
Updated on May 5, 2026
ThemeBuilder provides a plugin that integrates into Figma and enables UI and UX designers to export design styles and variables to Sass or CSS variables and to generate icon fonts.
With the ThemeBuilder plugin, you can export the following from Figma:
- Styles, such as colors, typographies, and effects. They are exported as Sass or CSS tokens that developers can use in ThemeBuilder.
- Color and number variables. They are exported along with their modes and mapped to the corresponding color or metrics modes in ThemeBuilder.
- Custom icons from Figma. They are exported and converted to font icons that developers can use in ThemeBuilder. For details, see Exporting Icons from Figma.
- Components. You can export components from Figma to a ThemeBuilder project by turning them into HTML components.
The plugin provides guided export workflows that you can start as soon as you are ready to share styles, variables, icons, or components with developers.
Dev Mode Support
Starting with version 2024 Q4, the ThemeBuilder plugin for Figma is also available in Dev Mode.
Next Steps
- Installing the ThemeBuilder Plugin for Figma
- Logging into ThemeBuilder from the ThemeBuilder Plugin for Figma