Submit
Go to Plugin PageExport any asset¹ to React, Vue, Sass or TailwindCSS and customize the code output to match your preferences and development environment. Also, create single components from multiple assets with variants.²
Note: The plugin is fully functional but you are restricted to exporting 7 assets per day. A license key is required for unlimited exports and can be purchased for $25.
More features are covered below. Development is active, feel free and encouraged to submit feature requests.
¹ The plugin is optimized for vector graphics, but raster graphics do work.
² Variants are based on a specific layer-naming scheme, not Figma’s official variant feature.
Component Variants
With component exports (React and Vue), asset families can be combined into a single component with auto-created variants to pass as props. There is no limit to the number of variant types and setup is easy — all that’s required is a specific layer-naming scheme.
Customizable Templates
The exported code works entirely as-is without any modifications required. But if desired, you have the ability to customize the code output to your liking. The templates are powered by lodash’s templating system are extremely flexible.
Asset Manifest
Preview the exported assets’ generated code, variant props, vector/raster check, and if they are a single color before downloading. Great for quality control when it comes to large asset sets like icons and perfect for quickly grabbing the code for a single asset.
Easy to Use
Programs like this can quickly become complicated to use. I’ve done my best to structure it in a way to where a normal asset setup can be exported without having to make a bunch of structural changes. If you have an organized page of assets (like a collection of icons for example) chances are you will need to make minimal changes in order to export the assets.
The main prerequisite is that all of your assets need to be collected into a single Frame (or Component or Instance). You can then select this Frame and all of the child nodes (basically anything besides Text layers) will be exported as individual assets.
The best way to experiment is to just install the plugin and give it a go.
