Vector Path Editor

Select a vector object to start.

Take full control of your vector object paths with this comprehensive plugin. Edit fill rules, set first nodes, and preview changes in real-time.

Tips: If you don’t have access to your shape’s path, you need to flatten it.

Features:

Edit fill rules and preview of changes (non-zero vs. even-odd)Reverse path orientationsSet the first node for each pathUsage: Select a vector object, Modify fill rules: Click on a fill to toggle between non-zero and even-odd.

Adjust path orientation: Click on a loop to reverse it (helps with hole appearance).

Set first node: Click on any node to designate it as the first (appears as a small diamond)Benefits: Ensure compatibility with formats like TrueType fonts and Android VectorDrawable (non-zero fill rule only). Optimize designs for variable fonts (e.g., SF Symbols) by controlling first node placement. Fine-tune complex vector shapes for precise control over fill behavior.

This plugin empowers designers to manipulate vector paths with precision, improving compatibility and enabling advanced design techniques.

Acknowledgment: Special thanks to Evan Wallace for the original "Fill Rule Editor" plugin on which this work is based.

Stay ConnectedFor updates and more information:

Follow me on X: @Autre_planeteContact me: AnotherPlanet.ioSupporthttps://github.com/thierryc/figma-fill-rule-editor/issuesLinkshttps://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule\https://www.sitepoint.com/understanding-svg-fill-rule-property/https://oreillymedia.github.io/Using_SVG/extras/ch06-fill-rule.htmlThis project is an open source plugins.