Join Dennis Meyer for an in-depth discussion in this video Use a UI kit to create a pixel-perfect design, part of Photoshop for UX Design.
- [Instructor] Let's turn out attention back to…the health app that we've been working on.…I'd like to take this and transform it into…a pixel-perfect mockup, so that it looks a little closer…to the final product.…To do that, I'm going to use Apple's iOS 11 UI kit.…Here, under iOS apples, I'm going to download this…in a Photoshop format,…I'll agree to the license agreement,…and that'll start downloading.…Once that's done downloading, we'll go ahead…and open that archive.…
And inside of that folder are a number…of different resources.…The first that I want to talk about is in the fonts folder.…There's an installer for the San Francisco Pro font.…That's what all of the standard iOS interface uses.…I'm going to go ahead and install this using…all of the default options.…And while I'm installing this,…a quick note to Windows users.…Apple assumes that if you're developing for an Apple product…that you're developing on an Apple product.…So, there's no direct way to install…the San Francisco Pro font from this package file…
- Creating a document with artboards
- Using grids, guides, and guide layouts
- Adding placeholders and text
- Using ligature fonts for icons
- Using layer comps to display states
- Using Adobe Preview CC
- Exporting artboards for review
- Exporting assets for use in InVision
- Working with user interface kits
- Extracting CSS values from a design
Skill Level Intermediate
Q: This course was updated on 11/14/2017. What changed?
A: New videos were added that cover how to use user interface kits to create pixel-perfect designs.
Q: This course was updated on 07/10/2018. What changed?
A: We added one video, "Mobile preview on Adobe XD."