SVG Export

Save time exporting sets of SVGs by creating and assigning presets to optimize your exports. Works great for making icon libraries use clean and consistent SVG code. Optimization uses svgo (https://github.com/svg/svgo) under the hood.

1. Reduce SVG file sizes
2. See how options affect the code and appearance of icons in real time
3. Use currentColor css property for icons that automatically inherit text color
4. Use layer names as classes
5. Create and manage presets for different types e.g. single color icons, illustrations, layers for animation
6. Export to a .zip file or svg sprite sheet containing all of your selected layers
7. Anyone on your team can see and modify presets on a file

Comes with 3 pre-made presets

1. Default: Just reduces file size, shouldn't break anything.
2. Monochrome: Strips out all fills and strokes, uses currentColor as fill on the SVG element.
3. Layer Names -> Classes: Uses your layer names in Figma as classes in the SVG code.

Creating your own presets

1. Click Edit presets
2. Click the plus button in the top right
3. Name and configure the options for your preset

Sharing presets

By default, all presets on a file can be seen and used by anyone with access to the file. Presets are saved on the file, so don't carry across if you create or edit a different file. To keep your presets, click the ... more icon in the presets panel and export your presets from one file, open up your new file, and choose the import presets option from the same menu.