Really Flatten Vectors
Plugin link: https://www.figma.com/community/plugin/1099596352042014853/Really-Flatten-Vectors
Figma plugin that flattens a vector into as few paths as possible. Overlapping paths will be simplified so only the outer shape is defined. The flattening happens in-place and "deletes" the old layers, so be careful!
Usage
- Select some layers
- Run the plugin by going to
Plugins > Really Flatten Vectors
or pressing⌘/
and searching forReally Flatten Vectors
.
How does it work?
Flattening vectors in Figma isn't entirely straightforward. Generally, Figma
simplifies paths when using the built-in flatten ⌘E
on a union layer. This
plugin simplifies the setup needed to get a pretty flatten output.
- Deeply ungroup/unframe the selection. This keeps positioning simple for some of the later operations.
- Outline all strokes. Since this plugin merges everything into one path, strokes cannot be preserved. All strokes and text are outlined.
- Use the first valid fill paint data to use as the output fill.
- Use Figma's built-in flatten to merge the layers. Figma is pretty intelligent and will place the resulting layer in the correct spot in the layer hierarchy.
- Create a union layer that contains the resulting layer from the previous step, and a clone of that same layer. This is because running the built-in flatten on a union with just one layer won't simplify the paths. If there is an exact replica inside the union, then the resulting layer will have simplified paths.
- Run the built-in flatten against the union.
Development instructions
Check the plugin docs first for details on how to load a plugin in development mode.
# Development mode
npm run watch
# Push to production
npm run build