If you’ve ever wrestled with vector paths in Figma just to get a custom variable SF Symbol out the door, you know the frustration: one missed node here, one stray smoothing there, and suddenly your interpolation breaks. Plus, you would design your icons within an SVG file you exported beforehand from the SF Symbols App.
When Apple introduced SF Symbols in 2019, they changed the game for iOS design. Suddenly, we had access to thousands of scalable, weight-variable icons that integrate seamlessly with system type. Our CreativeEditor SDK (CE.SDK) is a customizable design and video editor you can integrate into your product. Yet, as it grew, we needed icons as unique as its use cases—icons that simply didn’t exist in Apple’s library.
In this article, I’ll share our journey from relying on two community Figma plugins—SF Symbols Organizer and Vector Path Editor—to building our own tool, SF Symbol Generator. Along the way, I’ll show you how we wrestled with aspect ratios, node counts, and path order, and how we eventually streamlined the entire process into a few simple clicks.
What Are Variable SF Symbols?
At their core, variable SF Symbols behave much like variable fonts: they allow you to interpolate smoothly between multiple “master” designs, rather than shipping separate static assets for each weight. To create one, you supply three distinct versions of your icon—typically Ultra Light, Regular, and Black—each sharing the exact same path structure and node count. When the SF Symbols app or iOS runtime renders your symbol, it calculates intermediate weights on the fly by linearly interpolating between those three masters. This approach not only shrinks your asset footprint but also gives you rich typographic control, letting you fine-tune how heavy or light an icon appears in any context.
The Early Struggle
From the moment we discovered the Figma plugin SF Symbols Organizer, it became an indispensable part of our workflow. Suddenly, what had been a tedious, manual export process turned into a single click: select your three masters, batch-export them as SF Symbols-ready SVGs, and you were halfway home. The plugin’s enforcement of a 1:1 aspect-ratio rule was actually a blessing when you’re just getting started, ensuring that every icon fit out of the gate.
However, as our icon library expanded beyond a handful of simple glyphs, we began to feel the boundaries of that magic square. Some of our more ambitious designs needed wider canvases or asymmetrical compositions, and shoehorning them into perfect squares led to awkward scaling and extra cropping steps. Meanwhile, although SF Symbols Organizer reliably generated valid SVGs, it didn’t warn us about deeper issues—like mismatched node counts or flipped path directions—until we imported into the SF Symbols app and discovered the interpolation errors firsthand.
That’s where Vector Path Editor pitched in. It couldn’t automate our entire workflow, but it did let us quickly correct path order and direction when Figma’s flattening shuffled our nodes. Even with that help, though, we still found ourselves jumping between tools to catch errors after the fact—proof that, while both plugins were fantastic at what they did, we needed something more proactive.
Yet, as powerful as these two plugins were together, their reactive nature meant we still spent long sessions hopping between Figma and Apple’s toolchain, correcting mistakes after they happened instead of catching them up front. It was a great start—and without these plugins, we wouldn’t have made it this far—but we knew there had to be a way to bake most of the missing quality checks into our design process itself.
Why We Wanted “SF Symbol Generator”
After enough trial and error, we realized we needed more than just export and pray. We needed flexibility and foresight.
First, we didn’t want our icons locked into a square. Some of our designs needed wider canvases. Second, we craved live feedback. We wanted to know if our three icons had matching node counts, aligned first nodes, and consistent path winding before exporting. Lastly, we longed for a single, unified workflow that could handle scanning, validating, and exporting without leaving Figma.
It quickly became clear that the only way to achieve this was to build our own plugin. And so SF Symbol Generator was born.
Inside SF Symbol Generator
SF Symbol Generator transforms the way we build custom symbols. Rather than flattening paths prematurely, it encourages us to keep boolean groups intact, flattening only at export time. When you run the plugin, it scans all three masters in situ, then displays a detailed readout of node counts, first-node anchors, and path directions. Any discrepancies are highlighted in red, so you can go back to your designs and fix them.
Pro Tip: Sometimes Figma’s automatic flattening doesn’t handle rounded corners cleanly and can introduce extra nodes. If the plugin’s scan flags a weight with mismatched node counts or errant anchors, you can manually flatten that master ahead of time, clean up extra nodes using Figma’s vector editing tools, and then re-run the scan to ensure perfect parity.
Once everything checks out, a single click exports a ready-to-use variable SVG bundle—no detours into external editors required.
Our Step-By-Step Workflow
Our process now is refreshingly simple. We start in Figma by creating a 32-pixel-tall frame that can have any width you need.
Inside that frame, we draw our Regular-weight icon using a 2.45-pixel stroke and a 3-pixel corner radius. We then duplicate the frame twice and adjust the strokes for Ultra Light (0.8 px, 2.5 px radius) and Black (4.95 px, 3.5 px radius). iOS commonly incorporates softer corners in their icon design, and you can achieve them with Figma’s corner smoothing. Though, it’s important to keep Figma’s corner smoothing at 0%, because even a sliver of smoothing can throw off interpolation. We also center-align our strokes wherever possible so that the shapes grow uniformly when the weight changes.
| Stroke size | Border radius | |
|---|---|---|
| Ultra Thin | 0.8 | 2.5 |
| Regular | 2.45 | 3 |
| Black | 4.95–3.5 | 3.5 |
With your three master frames selected, launch SF Symbol Generator. In the plugin’s Variable panel, assign each frame to its corresponding weight—Ultra Light, Regular, and Black. If your frames are named correctly (for example, “Icon Ultra Light,” “Icon Regular,” “Icon Black”), the plugin will detect and map them automatically. As soon as each weight is assigned, the previews immediately show node counts, first-node positions, and path directions. Any mismatches appear in red, at which point you might need to go back and manually flatten that master, clean up extra nodes (for example, Figma sometimes adds unwanted anchors on rounded corners), and re-scan them again. When everything looks great, just hit Export to generate your ready-to-use variable SVG bundle.
Importing into the SF Symbols App
Once your variable SVG bundle is exported, the final import into Apple’s SF Symbols app is straightforward. Open the SF Symbols application (available on Apple’s developer site), switch to the Custom Symbols tab, and drag your SVG file into the panel. Your new icons will appear alongside Apple’s built-in set, ready to be organized into collections or shared with teammates. When you return to Xcode, your custom symbols show up just like any system glyph, complete with full support for dynamic weights.
Optional Extra Step: Preparing More Complex Symbols
If your icon consists of multiple layers or requires special styling per layer, take this extra step to ensure it renders perfectly in all weights. After dragging your SVG into the SF Symbols app:
- Select your newly imported symbol and click the Rendering Inspector (the segmented button with the brush icon) on the right side.
- You’ll see each layer exposed as a separate sub-path. You can create more layers and even group them to change them individually as well.
- Tweak opacity, colors, or layer order at different render modes to achieve the exact look you want.
Once you’re satisfied, select and export the symbol again from the SF Symbols app (File > Export Symbol), and it’s truly ready for production.
Lessons Learned
Building SF Symbol Generator taught us several key lessons.
First, node parity is king: the number and order of path segments must match across masters. Early validation saves hours, since catching mismatches before export means fewer cycles in Apple’s SF Symbols app.
Second, non-destructive workflows pay dividends: boolean groups let you iterate quickly without losing stroke data.
And finally, automation is your friend: what once took dozens of manual steps now happens in a single click.
Conclusion
Variable SF Symbols unlock a level of typographic and iconographic dynamism that feels truly native to iOS. While community tools like SF Symbols Organizer and Vector Path Editor can get you pretty far already, building our own SF Symbol Generator transformed our workflow from reactive to proactive. Now, we design freely with any aspect ratio, validate instantly, and export with confidence—no more praying, just seamless symbol-making.
For our CE.SDK for iOS, we’ll be gradually rolling out updated Custom Symbols created with SF Symbol Generator, ensuring every icon feels right at home on Apple devices. Stay tuned for those releases!
If you’re ready to streamline your own custom SF Symbol workflow, check out SF Symbol Generator on the Figma Community and take it for a spin. Happy symbol-making!
3,000+ creative professionals gain early access to new features and updates—don't miss out, and subscribe to our newsletter.