# Figma

{% hint style="info" %}
**We will only cover the skills needed to read a Figma design, not create one.**
{% endhint %}

### 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.

### Spacing

To read the spacing between elements, you can simply select the anchor element and hover over the other element while holding the `option` key on your keyboard to view the spacing between a specific element. Let’s analyze the following:

<figure><img src="/files/O8rhZ2J8GdWnGv5uKF26" alt="" width="375"><figcaption></figcaption></figure>

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.

<figure><img src="/files/4AhAyQwIOQOsUiQ49GSW" alt="" width="154"><figcaption></figcaption></figure>

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.

{% hint style="info" %}
**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.**
{% endhint %}

### 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.

<figure><img src="/files/hBgFXgsRwXKlqZu1jCfK" alt="" width="295"><figcaption></figcaption></figure>

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)`

{% hint style="danger" %}
**I highly advise against using the code given by Figma. This is usually incorrect and can lead to unwanted effects.**
{% endhint %}

### 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>")`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ios-course.cornellappdev.com/resources/tool-guides/figma.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.