> 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-zh/design/prepare/design.md).

# 设计工具

### Figma

建议使用提供的库中的 TDS 组件进行设计。这样无需操心 UI 样式开发，就能基于开发文档中的代码快速开发。

{% hint style="info" %}
**许可证说明**

使用本 UI Kit 即视为同意其中所包含许可证的条款。
{% endhint %}

***

**直接下载文件**

UI Kit `.fig` 下载文件后，连接到库中使用。

**1. 下载文件**

请在这里下载文件。

{% file src="/files/dcad882deff11f3537eb8112171d916cdc528625" %}

{% hint style="info" %}
**注意事项**

* 应用于 UI Kit 的 Semantic Color 与当前版本的代码不一致。
* Figma 和 Toss 应用中使用了不同的 Font Family。Toss Product Sans 作为单独资源较难分发，因此在 Figma 中使用 SF Pro。\
  在 Toss 应用中，Font Family 会自动应用为 Toss Product Sans，请参考。
  {% endhint %}

**2. 导入文件**

<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. 运行 Figma 后，在顶部菜单中点击 Import 按钮。
2. 已下载的 `TDS_Mobile_for_Apps_in_Toss_(2602).fig` 请选择文件，或拖拽到窗口中。
3. 文件会创建在所选项目或 Drafts 文件夹中。

**3. 连接到库（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. 打开导入的文件，在左侧面板点击 Assets 选项卡。
2. 点击右上角（📚）图标，打开 Manage libraries 窗口。
3. 点击文件旁的 Publish 按钮，将其设置为“将此文件用作库”。

> 🔸 Publish 前：只能在下载文件内使用\
> 🔸 Publish 后：也可在其他 Figma 设计文件中使用

**4. 连接组件后使用**

<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. 请点击工作区左侧面板的 Asset 选项卡。
2. 如果 TDS Library 文件未激活，请点击 Add to file 按钮
3. 请在 Assets 选项卡中拖拽按钮、图标、颜色等所需组件来使用。

{% hint style="info" %}
**无法自动更新**

有新版本发布时，需要重新下载文件。若有新版本，我们会另行通知。
{% endhint %}

***

**设计时请务必遵守**

以下项目是为了与实际开发保持一致而特别重要的标准。

1. 在所有页面的最上方， **❖ Navigation** 请务必使用组件。已包含必需组件的 🌈 **Screen**拿出来使用会更方便。
2. 尽可能 **只在右侧面板中调整属性**。如果直接在画布中修改，可能会产生代码中没有的属性，导致开发时实现困难或耗时更长。
3. 页面请 **以宽度 375px 为基准**进行制作。其他尺寸也可以，但， **❖ Keypad** 像这样有些组件不支持响应式，可能会不太方便。
4. 在页面顶部， **❖ Top,** 其下方使用 **❖ ListRow**，即可快速构建大多数页面。
5. 大多数 TDS 组件都包含默认 padding，即使不使用 gap 紧贴排列也会显得自然。比如， **❖ ListRow**有 S、M、L、XL 四种上下 padding 选项。即便如此，如果仍需调整间距，请使用自动布局的 gap。

***

**常见问题**

<details>

<summary>组件没有按预期工作。</summary>

[开发者社区](https://techchat-apps-in-toss.toss.im/)联系咨询。我们会尽快帮您。

</details>

<details>

<summary>没有想要的组件。</summary>

大多数 UI 都可以用 TDS 组件替代。比如可以使用 🔵 Mobile\_ListRow 来代替 Card UI。

如果仍然没有所需组件，请通过 Channel Talk 提出请求。我们会尽快审查。

也可以自行设计，但请确保与其他 TDS 组件协调一致。

</details>

<details>

<summary>需要安装 Toss Product Sans 字体吗？</summary>

各组件已应用字体，无需单独安装即可使用。

即使显示为 Missing Fonts，实际使用也没有问题。

</details>

<details>

<summary>可以拆分使用 TDS 组件吗？</summary>

可以，但请谨慎判断。

如果拆解组件只使用其中一部分，开发时就需要编写额外代码。

</details>

<details>

<summary>图标颜色不对。</summary>

这是偶尔会发生的 bug。请修正为合适的颜色后再使用。

</details>

<details>

<summary>图标无法用韩文搜索。</summary>

请用英文搜索，或用 Unicode 搜索。

由于 Figma 的限制，目前难以改进。

</details>

<details>

<summary>任何设计都可以发布到 Toss 应用吗？</summary>

原则上可以，但在审核过程中，如果存在不合适或严重影响易用性的情况，可能会被驳回。

</details>

<details>

<summary>如何支持深色模式？</summary>

深色模式会在以后支持。现在请仅以浅色模式为基准进行设计。

</details>

<details>

<summary>我还有其他疑问。</summary>

[开发者社区](https://techchat-apps-in-toss.toss.im/)，请随时咨询。

</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-zh/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.