Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


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

New Here ,
Jan 23, 2021 Jan 23, 2021

Copy link to clipboard

Copied

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.

Sushant5EDD_1-1611411044418.png

Sushant5EDD_2-1611411057799.png

Sushant5EDD_6-1611411144124.png

 

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?

TOPICS
How to, Missing feature

Views

397

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 26, 2021 Jan 26, 2021

Copy link to clipboard

Copied

No help from the community?

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

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:

Sushant5EDD_0-1612336225913.png

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?

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 03, 2021 Feb 03, 2021

Copy link to clipboard

Copied

LATEST

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! 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines