I’ve started using Apples UIKit library for designing an iOS app. Many of the provided sketch-symbols have options like this, where you can supply an icon and a piece of text
The “icon“ however is a textfield, only accepting text. I can’t seem to figure out how to put my own icon in there, or how to use an SFSymbol. Whats the recommended way to make use of these?
… and second question on the same topic. Theres a different type of control that seems to have an “Image“ placeholder. I’ve added these red icons into the same doc given them a name and can’t find a way to add them as the image, the “Document Images“ section is blank
Tried making them a sketch-symbol, didn’t help anything
hey @Simon
You can use the SF Symbols app to copy and paste the symbols.
You can hover on the chess-like area and it should show a Choose Image button
@raulrincon thank you. Feel like an idiot for the first one. I read a comment talking about dragging/dropping SF symbols into Sketch, thought I had to have it in Sketch first, didn’t realise I could just copy/paste it in the field
For the second one, ok yes I can get an image from my desktop into there. But i’m having trouble figuring out how to manage this more appropriately. So I want to add a customised SFSymbol as an image to a UIKit control. I want to have the image in sketch incase I have to give someone else access to it
Issues:
When using someone elses Symbol (e.g. Apple UIKit Grouped table, with a left accessory on the row), I can’t paste an image into it. I have selected “List → Row → Accessories → Image” which is the bottom most object, and pasting while thats selected just adds the image as a new frame/layer. Like a new image added to the document as a whole, floating above everything
If I click on this image placeholder object, the right side has an image placeholder. I click on that and i’m given an image picker. I can’t drag/drop an image from the sketch document into it, because as soon as I select the image, it closes the picker
I thought this “Document images“ dropdown, would allow me to see all the images added to this document but it doesn’t. How do I add something to this dropdown. How do I make a page, add all the images I want and have them show up here so that I can just pick one and go?
If I save the SFSymbol to my desktop, I can get it into the control. But the control is sized at 52x52. I want a much smaller image than that (e.g. 20 x 20) centred in the middle. Building this in iOS, I could just select an image container and tell it to centre the image without stretching, add a 20x20 image and it would display as intended. I can’t seem to get this behaviour to work in sketch. The container is of a fixed size I can’t change, and i’ve no access to any properties/settings for the layout of the image itself. Does this mean I would have to make a 52x52 frame, centre the image in it, then use that frame in the UIKit control? And do this for every image and every different sized control?
