Can not copy custom SF Symbol
When creating a custom symbol in SF Symbols (as per Apple instructions), the option to Copy Symbol from context menu is disabled, making it impossible to use any custom designed symbols. Any tips?
When creating a custom symbol in SF Symbols (as per Apple instructions), the option to Copy Symbol from context menu is disabled, making it impossible to use any custom designed symbols. Any tips?
SHILO11 wrote:
I've already imported SVG and created a new CUSTOM SF Symbol. Right now the problem is that I can't use this Custom SF Symbol as a font(text) symbol in Figma, the "Copy symbol" option is disabled for Custom SF Symbols.
So I can't show developers in mockups what font size(point size) I expect to have for this symbol in different places, what level of boldness, etc. I can export it as SVG, yes! But what is the profit to me in this case? I had it as SVG before.
The question is: how do copy the Custom SF Symbol as a text symbol and paste it into Figma?
OK. I guess it is the same question. But then, it has the same answer too.
A custom symbol has no meaning outside of Xcode. It's just a funky SVG file. Xcode has the logic to extract all of the symbols and arrange them so that when you call "Image(named:)" you get a symbol that looks and behaves like any other symbol. But it has the same limitation. There is no Unicode code point associated with it. It's just an image, albeit a smart one.
I don't know anything about Figma, so I don't know if it has, or should have, the same kind of logic to extract all the components of an exported symbol SVG and reconstitute it into a symbol.
What you should do instead is choose "Copy symbol as". That will give you an image that you can paste into any mockup or graphic symbol you have. You can choose PNG or SVG. It doesn't really matter which one you choose. Since the symbol is going to be small anyway, may as well choose the PNG default because some tools won't recognize SVG.
SHILO11 wrote:
I've already imported SVG and created a new CUSTOM SF Symbol. Right now the problem is that I can't use this Custom SF Symbol as a font(text) symbol in Figma, the "Copy symbol" option is disabled for Custom SF Symbols.
So I can't show developers in mockups what font size(point size) I expect to have for this symbol in different places, what level of boldness, etc. I can export it as SVG, yes! But what is the profit to me in this case? I had it as SVG before.
The question is: how do copy the Custom SF Symbol as a text symbol and paste it into Figma?
OK. I guess it is the same question. But then, it has the same answer too.
A custom symbol has no meaning outside of Xcode. It's just a funky SVG file. Xcode has the logic to extract all of the symbols and arrange them so that when you call "Image(named:)" you get a symbol that looks and behaves like any other symbol. But it has the same limitation. There is no Unicode code point associated with it. It's just an image, albeit a smart one.
I don't know anything about Figma, so I don't know if it has, or should have, the same kind of logic to extract all the components of an exported symbol SVG and reconstitute it into a symbol.
What you should do instead is choose "Copy symbol as". That will give you an image that you can paste into any mockup or graphic symbol you have. You can choose PNG or SVG. It doesn't really matter which one you choose. Since the symbol is going to be small anyway, may as well choose the PNG default because some tools won't recognize SVG.
Where in Apple's instructions does it say to use the "Copy symbol" command?
The custom symbol functionality is actually pretty limited. It exists mainly just to keep your custom symbols in one place. Do do anything, you'll have to export, make changes, and then re-import.
SHILO11 wrote:
"Export Symbol" function exporting SVG. But I, as a Designer want to paste the SF Symbol(text symbol) into Figma, into the design, and be able to say to the developer what font size I expect to have for this symbol in different places, what level of boldness, etc. How to do it for the custom symbol?
That's a different question. You take that SVG that you had exported and modify it. Then, import the modified SVG back in as your custom symbol.
Why do you sound so angry, I'm simply asking a question?
If the custom symbols are not meant to be copied, how do you use them with any application — for example creating an interface design in Sketch or Figma?
And to answer your question, it says very clearly in the Apple documentation:
"You can create your own custom symbol images with the same capabilities that SF Symbols provides."
You can look it up here: Creating custom symbol images for your app | Apple Developer Documentation
priidu wrote:
Why do you sound so angry, I'm simply asking a question?
Perhaps you just hear angry. I was only asking a question too.
If the custom symbols are not meant to be copied, how do you use them with any application — for example creating an interface design in Sketch or Figma?
That's what the export functionality does.
And to answer your question, it says very clearly in the Apple documentation:
"You can create your own custom symbol images with the same capabilities that SF Symbols provides."
You can look it up here: Creating custom symbol images for your app | Apple Developer Documentation
That doesn't answer my question. I'm familiar with the documentation. I've created custom symbols and imported them into projects in Xcode. Because I had never used the "Copy Symbol" functionality, I was asking why not having it would make it impossible to use custom symbols.
I was sincerely hoping that you had a link to some Apple documentation that explained what the point was of copying an existing symbol into a custom symbol. As far as I can tell, it's a no-op. You have to export the symbol and edit it anyway. So why bother copying it as a custom symbol? Just export the original and edit that. No need to ever bring the symbol back into SF Symbols after that.
There might be a use case for upgrading custom symbols and adding support for new features like multicolour. But then you're limited to only the latest versions. You're still exporting, but now you're exporting to PNG. And regardless, I don't want my app assets scattered over a half dozen apps. I keep the sources with the project.
priidu wrote:
Copying an existing symbol into a custom one? Sorry, but you just don't seem to understand at all what I am after. Nevermind.
I’m unclear here, too. Also unclear about which symbol or symbols are being blocked from export, as well.
Here are some useful guides, for others here reading about using and customizing Apple’s SF Symbols:
https://www.avanderlee.com/swift/sf-symbols-guide/
https://www.hackingwithswift.com/articles/237/complete-guide-to-sf-symbols
But for the export for subsequent customization, is it possible you’re encountering this with whichever symbol(s) (which symbols?) you want to start with?
Thanks for the links. It's an interesting read, but I still do not seem to understand whether what I am asking is possible or not. To give you the problem I am trying to find an answer for, here's what I would like to do:
Step 5 is where I do not understand why can't I just copy the newly created, fully validated symbol and use it in any app that is capable of displaying SF font and SF Symbols along with it? If it is really true this is limited to only exporting these symbols out as SVG files, then I really don't understand why has this been made so difficult? Isn't the whole point about allowing custom symbols play alongside standard SF Symbol glyphs? Or is this a bug? Or am I not understanding something else about this?
"Export Symbol" function exporting SVG. But I, as a Designer want to paste the SF Symbol(text symbol) into Figma, into the design, and be able to say to the developer what font size I expect to have for this symbol in different places, what level of boldness, etc. How to do it for the custom symbol?
I've already imported SVG and created a new CUSTOM SF Symbol. Right now the problem is that I can't use this Custom SF Symbol as a font(text) symbol in Figma, the "Copy symbol" option is disabled for Custom SF Symbols.
So I can't show developers in mockups what font size(point size) I expect to have for this symbol in different places, what level of boldness, etc. I can export it as SVG, yes! But what is the profit to me in this case? I had it as SVG before.
The question is: how do copy the Custom SF Symbol as a text symbol and paste it into Figma?
SHILO11 wrote:
The question is: how do copy the Custom SF Symbol as a text symbol and paste it into Figma?
Maybe start with a less-encumbered source?
For instance: https://www.figma.com/community/file/886999666531731323/sf-symbols-5-0-5296-svg-icons
Copying an existing symbol into a custom one? Sorry, but you just don't seem to understand at all what I am after. Nevermind.
You can’t replace existing SF symbols in existing Apple and third-party apps.
That would end badly.
You can add customized SF symbols to your own and newly-developed apps.
I understand it is possible to include it in whatever app you are developing. I was simply wondering why would they not treat custom symbols basically as a new typeface. The point is not to replace any system symbols, the point is to have an easy way to test them out in your app designs (by making use of the different weights they can be in, etc.). But I guess this is just too much of an edge case for them to bother with. Shame, it complictes the icon design workflow and discourages using SFS. 🤷🏼
priidu wrote:
5. simply use Copy Symbol to copy it to Clipboard and paste it to Sketch, Keynote, Pages or whatever document (this does not work)
Step 5 is where I do not understand why can't I just copy the newly created, fully validated symbol and use it in any app that is capable of displaying SF font and SF Symbols along with it? If it is really true this is limited to only exporting these symbols out as SVG files, then I really don't understand why has this been made so difficult? Isn't the whole point about allowing custom symbols play alongside standard SF Symbol glyphs? Or is this a bug? Or am I not understanding something else about this?
When you do the "Copy Symbol" command, what are you actually copying? If you inspect that data, you'll see that you are merely copying the unicode symbol, not any of the graphics. So you can copy and paste the original because it is tied to an actual unicode glyph. But when you duplicate it, you only duplicate the graphics. You lose the unicode completely. Therefore, that "copy symbol" option is gone because there is no symbol to copy.
If you want to edit the symbol in an external app, you have to export the definition of the graphic. It sounds like you've already done that. So I don't understand the problem.
Can not copy custom SF Symbol