Jump to content
mallow

iOS 11 UI kit for iPhone X and artboard for iPhone X don't work together

Recommended Posts

Hi, I have just downloaded iOS 11 UI kit from your Affinity mailing from few weeks ago. It is said it's made for iPhone X. 

 

I creat new file in Affinity Designer: File -> New -> Type: Devices, Page preset: iPhone X (Retina) -> OK

This new file has an artboard of 375 pt in width. Now I try to add UI objects from the iOS 11 UI kit made especially for iPhone X and... those UI objects are 250 pt in width. When I try to scale them to fit the artboard 100% width, they don't scale correct, because they are grouped with some constraints.

 

So... It is nice to have those presets and UI kits from you, but they don't work together. Or am I missing something? I would apreciate your help, thanks in advance :) 


NEXT PLANET / Design Studio / UX / GRAPHICS / ANIMATION

Share this post


Link to post
Share on other sites

Hi mallow,

 

Can you please provide me with more information on which of the iPhone X artboard you are using and which of the iOS 11 assets this is happening with as I have been unable to replicate the issue that you are encountering.

Share this post


Link to post
Share on other sites

Hi, @DWright

From iOS kit's EULA: 

Affinity iOS11 UI Kit End User License Agreement

Version 1.1: 18th Dec 2017 

 

And about artboard - this is normal iPhone X template from AD:

new file in Affinity Designer: File -> New -> Type: Devices, Page preset: iPhone X (Retina) -> OK

 

Please check screenshots attached

Zrzut ekranu 2018-01-30 o 18.10.21.png

Zrzut ekranu 2018-01-30 o 18.10.03.png


NEXT PLANET / Design Studio / UX / GRAPHICS / ANIMATION

Share this post


Link to post
Share on other sites

As I understand it (which is far from as well as I would like), the constraints should keep everything placed appropriately as the Constraints Group is resized. But it seems that for the "iPhone X - Bars" ones that include a colored background for the time text, that background is not constrained properly, so as the group is widened, it gets wider & the text is no longer centered in it.


Affinity Photo 1.6.7 & Affinity Designer 1.6.1; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.6.11.85 & Affinity Designer 1.6..4.45 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.1.1

Share this post


Link to post
Share on other sites

@R C-R constraints are one problem, but my original issue is about UI kit's size not match the size of artboard. And it is not only about this bar object. All objects are scaled wrong. So this UI kit for iPhone X is smaller than artboards for iPhone X. Or... maybe I am doing something wrong? Or is it a bug?


NEXT PLANET / Design Studio / UX / GRAPHICS / ANIMATION

Share this post


Link to post
Share on other sites

OK, so I have just found a workaround. By default, iPhone X preset is 216 DPI. If I change it to be 144 DPI, assets fit the artboard. OK, it works :) But it is a little confusing, to be honest. Or maybe there was some information somewhere that this UI kit is designed for 144 dpi, but I did not find it?


NEXT PLANET / Design Studio / UX / GRAPHICS / ANIMATION

Share this post


Link to post
Share on other sites
On ‎1‎/‎31‎/‎2018 at 0:26 AM, mallow said:

OK, so I have just found a workaround. By default, iPhone X preset is 216 DPI. If I change it to be 144 DPI, assets fit the artboard. OK, it works :) But it is a little confusing, to be honest. Or maybe there was some information somewhere that this UI kit is designed for 144 dpi, but I did not find it?

Hi Mallow. I'm sorry, I have to ask. Where did you download the assets for iOS11 from? I've been looking for them for hours and haven't gotten one link from Serif. 

 

I appreciate your help (and this fix in advance haha)

 

Cheers.

Share this post


Link to post
Share on other sites
On 17.02.2018 at 5:07 PM, Raf Tudela said:

Hi Mallow. I'm sorry, I have to ask. Where did you download the assets for iOS11 from? I've been looking for them for hours and haven't gotten one link from Serif. 

 

I appreciate your help (and this fix in advance haha)

Hi, @Raf Tudela, this UI kit was a gift from Affinity team. They sent link to this (and brush pack) on December 2017 via their newsletter. I don't know if there is any other way to get it. I wish there is, because it would make it more easy tu use Affinity if you are interested in UI design for iOS. But this is a question to Affinity team :) 


NEXT PLANET / Design Studio / UX / GRAPHICS / ANIMATION

Share this post


Link to post
Share on other sites
On 2/19/2018 at 4:37 PM, MEB said:

Hi Raf Tudela,

Welcome to Affinity Forums :)

Check this link for the iOS 11 UI Kit.

The URL redirects to Spotlight; is there a chance to get it another way? :2_grimacing:

Share this post


Link to post
Share on other sites
23 minutes ago, Smeikx said:

The URL redirects to Spotlight; is there a chance to get it another way? :2_grimacing:

Try here: https://affinity.store/checkout/?code=xmas-ios-11-ui-kit


Alfred online2long.gif
Affinity Designer 1.6.5.123 • Affinity Photo 1.6.5.123 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.6.11.85 • Affinity Designer for iPad 1.6.4.45 • iOS 12.1.4 (iPad Air 2)

Share this post


Link to post
Share on other sites
1 hour ago, TikiAles said:

Thanks, i been looking for this for a long time.

You’re welcome. I’m sorry you had to wait so long to get hold of it!


Alfred online2long.gif
Affinity Designer 1.6.5.123 • Affinity Photo 1.6.5.123 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.6.11.85 • Affinity Designer for iPad 1.6.4.45 • iOS 12.1.4 (iPad Air 2)

Share this post


Link to post
Share on other sites

OH MY GOD...thank you so much for the link to download the ios 11 kit.  I spent 1 hour looking for this online.

I don't know why Serif makes it so hard to find these essential kits.  They should just be in a downloads section of their website.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×