Plugin design + development / 2026
SVG Path Splitter.
Small tool. More control.
I designed and developed a Figma plugin that breaks complex SVG paths into manageable parts, making icon editing easier.
A focused utility for refining shapes, fixing alignment, and preparing consistent UI assets.
View plugin on Figma- My role
- Product Designer &
Plugin Developer - Focus
- SVG editing · Iconography
Design system assets - Built for
- Figma
JavaScript plugin - Release
- Version 1
01 / The project
A focused utility for a recurring design task.
SVG Path Splitter is a Figma plugin for separating complex SVG paths into manageable segments. It helps designers work on individual parts of an icon—adjusting a shape, refining a stroke, or correcting alignment—while preparing assets for a consistent UI system.
I designed and developed the plugin around a narrow problem: making the structure of an imported vector easier to work with. The product lives inside the environment where the edit happens, and is published on Figma Community.
A specific job to do
Make complex vector artwork easier to separate and refine, without expanding the tool into a full vector editor.
A clear purpose
Connect the technical action of splitting paths to familiar design tasks: editing icons, fixing alignment, and preparing assets.
A published plugin
Turn the idea into a JavaScript utility for Figma and make it available to other designers through Community.
02 / The problem
A simple-looking icon can have a difficult structure.
The visible parts of an SVG do not always arrive as convenient, separate objects. Several details can sit inside the same path structure. When only one of those details needs to change, the preparation can become more involved than the visual adjustment itself.
Isolate one detail
A small change to an icon may require separating the part that needs attention from the rest of the artwork.
Correct alignment
Adjusting the relationship between shapes is easier when those shapes can be addressed individually.
Prepare a consistent set
Imported icons often need refinement before they fit the proportions, spacing, and visual language of a UI system.
Make the structure easier to work with, so the designer can focus on the next edit.
03 / The core workflow
Separate the parts. Continue the design.
The central idea is to turn a complex path into smaller pieces that can be worked on independently. Splitting is a preparation step: it gives the designer more control over the edit that follows.
- 01Choose the vector to refine
- 02Separate its paths with the plugin
- 03Adjust the parts in Figma
The example below explains that change in structure using a simple icon. Separating its frame, detail, and baseline makes the relationship between the parts visible.
Interactive explanation
Same artwork. Individually editable parts.
- Compound path
The visible parts share a single vector structure.
04 / Design decisions
Keep the product close to the task.
The product’s value comes from making an existing workflow easier. That gives it a clear design direction: a focused purpose, language that relates to icon work, and an output that the designer can continue to refine.
Do one useful thing
Path separation is the core job. Keeping that focus makes the plugin’s purpose easier to understand and communicate.
Stay inside Figma
A plugin fits the place where designers already organise icons and prepare UI assets. The workflow remains connected to the canvas.
Support the next edit
The goal is manageable pieces that support further refinement. Decisions about shape, proportion, and alignment remain with the designer.
05 / Where it helps
Built around everyday icon and asset work.
Icon refinement
Work on a detail, refine a stroke, or adjust a shape within a more complex icon.
Alignment and proportion
Give individual elements attention when the overall artwork needs a more balanced arrangement.
UI system preparation
Prepare scalable assets for reuse and bring imported icons closer to a consistent visual language.
06 / From design to development
The useful part happens beneath the interface.
My role covered both the product design and the JavaScript plugin build. The engineering focus is the relationship between vector structure and editability: the output needs to make the next design task easier, rather than simply create more pieces.
For a tool like this, the important quality questions are practical. Can the right part be isolated? Is the result understandable on the canvas? Can the designer continue refining the asset with confidence? These questions connect the technical operation back to its purpose.
- Structure: identify what can be treated as a separate part of the artwork.
- Visual integrity: evaluate the result against the input, including the relationship between shapes, strokes, and alignment.
- Usability: make the resulting parts useful for editing and preparing UI assets.
Complex vector cases—such as overlapping paths and compound shapes—are important areas for continued validation. Expanding the range of tested artwork is a better next step than adding unrelated features.
07 / Published on Figma Community
From a workflow problem to a tool others can use.
SVG Path Splitter is publicly available on Figma Community under my profile. The listing describes its purpose around icon editing, alignment, and scalable UI assets—the same focused tasks that anchor the case study.
139 users
The public user count shown on the listing when checked on 4 October 2026.
Version 1
Figma Community records the first version on 27 April 2026.
For Figma
Published as a plugin, making the utility available within an established design workflow.
Community listing checked on . The user count is a snapshot and may change.
View the source listing08 / Reflection & next steps
A small problem can justify a focused product.
This project brings design and development together around a specific task. The interface communicates a simple purpose, while the value depends on what the tool enables on the canvas. That is a useful way to judge a design utility: by the work someone can continue doing after using it.
A useful tool makes the next step easier.
The next step is to learn from real editing sessions: which SVG structures people encounter, where they still need manual cleanup, and how the split output fits their icon workflows. Those observations can guide clearer guidance and better handling of complex artwork.