🎨Figma

Fall 2023 | Vin Bui

We will only cover the skills needed to read a Figma design, not create one.

Getting Started

On the left hand side of the screen you will see a section called Pages. The only page you should care about is High Fidelity which contains finalized design screens. In this section, we will look at A2: Profile.

In summer 2023, Figma released a new dev mode that makes it very easy to read designs for developers. We will be using dev mode in this section.

Spacing

To read the spacing between elements, you can simply hover over the element while in dev mode. You can also hold the option key on your keyboard to view the spacing between a specific element. Let’s analyze the following:

As you can see, the side padding of this element is 32px with all three views centered in the middle. In this example, I would add a leading and trailing anchor to the two labels with a padding of 32. I can also constrain the top of the name label to the bottom of the image with a padding of 16. Now, what about the size of the image, the font, font size, and font color?

Size

If you click on the element, you should be able to view its size. In this example, the size of the image is 128x128.

To configured this image, I would set the hight and width anchor to 128px. I would then set the centerX and top anchors equal to the superview’s.

You may have noticed that the spacing and size are all divisible by 4. This is because we are following a 4-pt spacing system which we will be using in this course. This means that if the values are divisible by 4, then those are the values we intend for you to use.

Inspect

When you select an element, you can inspect it to learn more about it. On the right hand side, you should see the Inspect tab. Next to Code, select iOS > UIKit. Let’s inspect the edit Profile button.

The inspect tab can give me the following:

• Corner Radius (16)

• Color (Ruby - Button; White - Text)

  • The assignment handout should provide instructions on how to use these colors in your code.

• Font (”SFProDisplay-Medium”) + Font Size (16)

  • You can see this in the code section. To use this font, you can do: .systemFont(ofSize: 16, weight: .medium)

I highly advise against using the code given by Figma. This is usually incorrect and can lead to unwanted effects.

Exporting and Importing Assets

Exporting assets (such as images) is very simple.

1. Click on the asset and scroll to the bottom of the Inspect tab.

2. Select 3x and PNG.

3. Click Export.

Now, you will want to name this file. For example, I could name my profile image profile. Then, to import it, open Assets.xcassets in Xcode and drag the image. There should be a new image set with the same name as your file (e.g. profile). You can then use the image with UIImage.image(named: "<image_name>").