Export Code

<p>Export any vector asset to React or Vue components, Sass (or plain CSS), TailwindCSS, or an Android Archive (beta) or iOS Asset Catalog (beta). Edit the code templates to tailor the output to your preferences and development dependencies. For React and Vue, convert related assets to single components with custom props.</p><p><br></p><p><strong>Note</strong>: <strong>Export Code is now completely free!</strong> A license key used to be required for unlimited exports, but now there are no restrictions. Read more about the plugin below.</p><p><br></p><h2>Component Variants</h2><p><br></p><p>With component exports (React and Vue), asset families can be combined into a single component with auto-created variants to pass as props. (e.g. up, right, down, and left arrow icons can be converted to a single Arrow component). There is no limit to the amount of variant types and setup is easy: all that’s required is a specific layer-naming scheme. <em>Note that variants are based on a specific layer-naming scheme, not Figma’s official variant feature.</em></p><p><br></p><p><a href="https://oombla.com/documentation/component-variants" rel="noreferrer noopener nofollow" target="_blank">More</a></p><p><br></p><h2>Customizable Templates</h2><p><br></p><p>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.</p><p><br></p><p><a href="https://oombla.com/documentation/templates" rel="noreferrer noopener nofollow" target="_blank">More</a></p><p><br></p><h2>Asset Manifest</h2><p><br></p><p>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.</p><p><br></p><h2>Easy to Use</h2><p><br></p><p>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.</p><p><br></p><p>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.</p><p><br></p><p>The best way to experiment is to just install the plugin and give it a go.</p><p><br></p><p><a href="https://oombla.com/documentation/basic-operation" rel="noreferrer noopener nofollow" target="_blank">More details on how the plugin operates</a></p><p><br></p><h2>Support</h2><p><br></p><p>Running into trouble? Email: [email protected]</p>