Skip to main content
S
Sushant5EDD
Participant
January 23, 2021
Question

iOS UI Kit on Windows 10 - Icons for Back, Tab buttons, Other navigation buttons are not visible

  • January 23, 2021
  • 2 replies
  • 1204 views

I'm using Adobe XD latest version on a Windows 10 PC.

I recently installed iOS UI Kits from the official Apple Designer resources.

When I open the .xd files from the package in Adobe Xd, the icons for Back, Information, Tab etc. are not visible and simple rectangles are displayed in their place. Please see attached images.

 

I tried going into object properties, but could not find much help there.

This happens on iOS 13 & iOS 14 Beta both versions, and on two different computers.

I'm very new to Adobe Xd, so I might be missing something here.

Is there a procedure to load the actual icons here?

This topic has been closed for replies.

2 replies

K
Community Expert
Kenneth KawamotoCommunity Expert
Community Expert
February 2, 2021

You need to have the latest SF Pro font from Apple installed

S
Sushant5EDDAuthor
Participant
February 3, 2021

Thanks for responding, Kenneth.

When I opened an Xd project on my Windows PC which was originally created on a Mac, I did see a warning about missing fonts. So I installed the SF & SF pro family fonts and the 'Missing Fonts' warning went away.

But still I'm seeing placeholder rectangles everywhere on standard iOS navigation controls.

I do not see a warning about 'missing icons' or something of the sort.

 

Is it something related to Apple's 'SF Symbols 2'?

I see that it can only be installed on MacOS.

Do you know a way where I can install in on Widows too?

K
Community Expert
Kenneth KawamotoCommunity Expert
Community Expert
February 3, 2021

You need the latest SF Pro. The file Apple provides <https://developer.apple.com/fonts/ > is a .pkg (macOS installer) in a .dmg (macOS disk image). I don't know how to extract font files form these for Windows, sorry - you need to do some Google search! 🙂

S
Sushant5EDDAuthor
Participant
January 27, 2021

No help from the community?

Someone please help me out, I'm getting quite anxious.

HARSHIKA_VERMA
Community Manager
HARSHIKA_VERMACommunity Manager
Community Manager
February 2, 2021

Hi Sushant,

 

Sorry for the delay in response. Would you mind checking if these icons are actually fonts in the UI kit which is used and please make sure you have the font installed on your mobile?

 

Let us know if that helps.

 

Thanks,

Harshika

S
Sushant5EDDAuthor
Participant
February 3, 2021

Thanks for responding, Harshika.

I have installed the SF family fonts on my Windows PC and have confirmed that the text appears correctly in the chosen SF font. Moreover, I do not see a 'Missing Fonts' warning which appeared before I had the fonts installed.

 

Here's how the 'Back' and 'Information' controls look:

Also check that the font for the 'Go Back' text is SF Pro Text.

 

I can externally find and load icons for this controls, but shouldn't it be included automatically,
especially when the same project when run on MacOS shows everything in place?

 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices