> For the complete documentation index, see [llms.txt](https://developers-apps-in-toss.toss.im/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers-apps-in-toss.toss.im/landing-page/landing-page-en/design/prepare/design.md).

# Design Tools

### Figma

We recommend designing with the TDS components in the provided library. You can develop quickly based on the code in the development documentation without worrying about UI style development.

{% hint style="info" %}
**License Notice**

By using this UI Kit, you are deemed to agree to the terms of the license included in this UI Kit.
{% endhint %}

***

**Direct File Download**

UI Kit `.fig` Download the file and connect it to the library to use it.

**1. Download the file**

Please download the file here.

{% file src="/files/7747d338da4bdfdf17fdb499ac262828c211a8ad" %}

{% hint style="info" %}
**Notes**

* The Semantic Colors applied to the UI Kit do not match the code in the current version.
* Figma and the Toss app use different font families. Toss Product Sans is difficult to distribute as a separate asset, so SF Pro is used in Figma.\
  In the Toss app, the font family is automatically applied as Toss Product Sans, so please keep this in mind.
  {% endhint %}

**2. Import the file**

<figure><img src="https://3984554959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGK6CDpIZXnm3aqLRTFjB%2Fuploads%2FLUw6DZX9BDDGGoOyHNNz%2Fimage.png?alt=media&#x26;token=da97e40e-94eb-4943-934b-702507808071" alt=""><figcaption></figcaption></figure>

1. After launching Figma, click the Import button in the top menu.
2. Downloaded `TDS_Mobile_for_Apps_in_Toss_(2602).fig` Select the file or drag and drop it into the window.
3. The file will be created inside the selected project or the Drafts folder.

**3. Connect to the library (Publish)**

<figure><img src="https://3984554959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGK6CDpIZXnm3aqLRTFjB%2Fuploads%2Fwc9llg7td8bjGkPlhaIs%2Fimage.png?alt=media&#x26;token=82f9f750-1f25-411c-aa88-9b59052184f1" alt=""><figcaption></figcaption></figure>

1. Open the imported file and click the Assets tab in the left panel.
2. Click the icon in the top-right corner ( 📚 ) to open the Manage libraries window.
3. Click the Publish button next to the file and set it to "use this file as a library."

> 🔸 Before Publish: Can only be used within the downloaded file\
> 🔸 After Publish: Can also be used in other Figma design files

**4. Connect the components and use them**

<figure><img src="https://3984554959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGK6CDpIZXnm3aqLRTFjB%2Fuploads%2FTRkezrK0UwOgbHIhT4zX%2Fimage.png?alt=media&#x26;token=377f054b-a81f-45b2-9991-d296afa9c9bc" alt=""><figcaption></figcaption></figure>

1. Click the Asset tab in the left panel of the workspace.
2. If the TDS Library file is not active, click the Add to file button.
3. In the Assets tab, drag and use the components you need, such as buttons, icons, and colors.

{% hint style="info" %}
**Automatic updates are not available.**

When a new version is released, you need to download the file again. We will notify you when a new version is available.
{% endhint %}

***

**Please make sure to follow these when designing**

The items below are especially important standards for matching the actual development implementation.

1. At the top of every screen, **❖ Navigation** please make sure to use the component. The required component is already included in the 🌈 **Screen**and use it out of the box for more convenience.
2. As much as possible, **adjust properties only in the right panel**please. If you modify things directly on the canvas, properties that do not exist in code may be created, making implementation difficult or time-consuming for developers.
3. The screen should be **based on a width of 375px**. Other sizes are possible, but **❖ Keypad** there are components that do not support responsiveness, so it may be inconvenient.
4. At the top of the screen, **❖ Top,** and below that, **❖ ListRow**can be used to quickly build most screens.
5. Most TDS components include default padding, so they look natural even when placed together without gaps. For example, **❖ ListRow**has four vertical padding options: S, M, L, and XL. If you still need spacing adjustments, please use the gap in Auto Layout.

***

**Frequently Asked Questions**

<details>

<summary>The component is not behaving as expected.</summary>

[Developer Community](https://techchat-apps-in-toss.toss.im/)Please contact us. We'll help you quickly.

</details>

<details>

<summary>I can't find the component I want.</summary>

Most UI can be replaced with TDS components. For example, instead of a Card UI, you can use 🔵 Mobile\_ListRow.

If the component you need still isn't available, please request it via Channel Talk. We'll review it as quickly as possible.

You can design it yourself, but please make it match other TDS components.

</details>

<details>

<summary>Do I need to install the Toss Product Sans font?</summary>

The font is already applied to each component, so you can use it without installing anything separately.

Even if it appears as Missing Fonts, there is no problem in actual use.

</details>

<details>

<summary>Can I separate and use TDS components?</summary>

Yes, but please judge carefully.

If you break apart a component and use only part of it, you will need to write separate code during development.

</details>

<details>

<summary>The icon colors look strange.</summary>

This is a bug that happens occasionally. Please correct it to the proper color before using it.

</details>

<details>

<summary>Icons can't be searched in Korean.</summary>

Please search in English or search by Unicode.

Due to Figma limitations, this cannot be improved at the moment.

</details>

<details>

<summary>Can any design be deployed to the Toss app?</summary>

In principle, yes, but if it is inappropriate or significantly harms usability during review, it may be rejected.

</details>

<details>

<summary>How do we handle dark mode?</summary>

Dark mode will be supported in the future. For now, please design only for light mode.

</details>

<details>

<summary>I have more questions.</summary>

[Developer Community](https://techchat-apps-in-toss.toss.im/)Please contact us anytime.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://developers-apps-in-toss.toss.im/landing-page/landing-page-en/design/prepare/design.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.