How to import images from Figma to Xcode using PDF, PNG and JPG – SwiftUI

In this video, I want to discuss how to import images from Figma in different formats, such as PNG, PDF and JPEG.

Downloads

To follow this tutorial, you can download the source file, which will help you compare your progress.

JPG

There are four types of images that are common in iOS. JPG is great for photos that is in full size and require no transparency. For best optimizations, it is recommended to generate 1x, 2x and 3x.

PNG

If you needed transparency in your image, use the PNG. It can move on top of any background. Depending on the amount of colors that you have in your image, you may have a very large file size. Just like the JPG, you’ll need to export at 1x, 2x and 3x from the design tool.

PDF

The PDF is great for glyphs and vectors that are infinitely scalable. They remain sharp regardless of the resolution. This the preferred way since you only need a single image asset at 1x. iOS will take the scalable vector and generate the appropriate resolutions for you.

Screen Shot 2021-02-10 at 9.10.48 PM

Custom Image Asset

Image("Illustration")

SF Symbols

You can also use icons from the SF Symbols library using the Image view. Without having to import anything, you have access to 2,400+ icons in different size, stroke width and colors.

Image(systemName: "xmark")

About the Author

Leave a Reply

Your email address will not be published. Required fields are marked *

You may also like these