SwiftUI: Create Custom Symbols With Figma in 1 Minute

A super condensed tutorial showing you how to create a custom symbol for your SwiftUI app using Sigma. Enough to get you started!

1. Find a symbol in SF Symbols that would serve as a good template (looks similar to what you're trying to create)
2. Export the symbol as a template, choose "Variable" option
3. Create a new project in Figma, drag and drop the SVG file into the window
4. Modify the 3 icons shown however you need to in order to create your custom icon. The 3 icons are the 3 minimum icon weights that Xcode requires (light, regular, black).
5. Outline stroke all vectors you create. Select top layer so entire document is highlighted.
6. Export the file as SVG, ensuring "outline text" is unchecked and "include id attribute" is checked.
7. Drag and drop the exported SVG file into your Xcode project's Assets folder, renaming to something meaningful.
8. The new symbol can be used like any other Image in SwiftUI, just remember to specify the correct name and omit the "systemName:" you may be accustomed to using.

[anerdwitdacamera]

This is the exact flow I'm looking for

[ZachMatics]

Exactly what I needed. You're an MVP. Subscribed.

[maxeckstein]

Thanks you so much exactly what I was searching for!!

[margaritayoung]

Why it should be similar to what I'm trying to create?