即使有点小巧也没关系。用你打造的迷你应用，赢取最高 300 万韩元奖金的机会。
Ctrlk
联系我们开发者社区控制台
For the complete documentation index, see llms.txt. This page is also available as Markdown.

设计工具

介绍两种设计 Apps in Toss 迷你应用 UI 的方法。

  • Figma：直接下载并使用 TDS 组件库。

  • App Builder：这是一款无需额外安装、可直接在控制台使用的网页型 UI 设计工具。

Figma

建议使用所提供库中的 TDS 组件进行设计。无需担心 UI 风格开发，可基于开发文档中的代码快速开发。

许可说明

使用本 UI Kit 即视为同意本 UI Kit 中包含的许可证条款。

直接下载文件

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

1. 文件下载

请在这里下载文件。

TDS_Mobile_for_Apps_in_Toss.zip
archive · 30MB
打开

注意事项

  • UI Kit 中应用的 Semantic Color 与当前版本代码不一致。

  • Figma 和 Toss 应用中使用了不同的 Font Family。Toss Product Sans 作为单独资产难以分发，因此在 Figma 中使用 SF Pro。 在 Toss 应用中，Font Family 会自动应用为 Toss Product Sans，请参考。

2. 导入文件

  1. 运行 Figma 后，在顶部菜单中点击 Import 按钮。

  2. 已下载的 TDS_Mobile_for_Apps_in_Toss_(2602).fig 请选择文件，或将其拖放到窗口中。

  3. 文件会创建在所选项目或 Drafts 文件夹中。

3. 连接为库（Publish）

  1. 打开导入的文件，在左侧面板点击 Assets 选项卡。

  2. 点击右上角（📚）图标，打开 Manage libraries 窗口。

  3. 点击文件旁的 Publish 按钮，设置为“将此文件用作库”。

🔸 Publish 前：仅可在下载文件中使用 🔸 Publish 后：可在其他 Figma 设计文件中使用

4. 连接组件后使用

  1. 请点击工作区左侧面板的 Asset 选项卡。

  2. 如果 TDS Library 文件未激活，请点击 Add to file 按钮。

  3. 请在 Assets 选项卡中拖拽按钮、图标、颜色等所需组件进行使用。

无法自动更新

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

设计时请务必遵守

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

  1. 所有页面的最上方都 ❖ Navigation 请务必使用组件。已包含必需组件的 🌈 Screen拿出来用会更方便。

  2. 尽可能 只在右侧面板中调整属性。如果在画布中直接修改，会产生代码中没有的属性，开发时可能难以实现，或耗时较长。

  3. 页面请以 宽 375px 为基准进行制作。虽然其他尺寸也可以，但 ❖ Keypad 等不支持响应式的组件可能会带来不便。

  4. 页面上方使用 ❖ Top, 下方使用 ❖ ListRow，即可快速构建大多数页面。

  5. 大多数 TDS 组件都包含默认 padding，因此即使不留 gap 紧贴使用也会显得自然。例如， ❖ ListRow具有 S、M、L、XL 四种上下 padding 选项。不过如果仍需调整间距，请使用自动布局的 gap。

常见问题

组件没有按预期工作。

开发者社区请联系我们。我们会快速协助您。

没有想要的组件。

大多数 UI 都可以用 TDS 组件替代。例如，可以用 🔵 Mobile_ListRow 代替 Card UI。

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

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

需要安装 Toss Product Sans 字体吗？

每个组件都已应用字体，因此无需额外安装即可使用。

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

可以将 TDS 组件拆开使用吗？

可以，但请谨慎判断。

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

图标颜色不对。

这是偶尔出现的 bug。请修改为合适的颜色后使用。

图标无法用韩文搜索。

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

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

任何设计都可以发布到 Toss 应用吗？

原则上可以，但在审核过程中，如果被认为不合适或会严重影响可用性，可能会被退回。

深色模式如何应对？

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

我还有更多疑问。

开发者社区欢迎随时联系我们。

App Builder

App Builder 是面向 Apps in Toss 合作伙伴的 网页型 UI 设计工具。无需额外安装，即可快速制作符合 Toss UI 风格指南的页面。

App Builder 可在工作区中从 注册应用后 “设计”菜单开始。

1. App Builder 一览

App Builder 可以做什么

  • 可以快速制作符合 Toss UI 风格的页面。

  • 可以直接使用设计资产和组件来构建页面。

  • 可以通过原型预览成类似真实手机界面的效果。

这些优点

  • 无需单独准备设计库。

  • 可以在右侧属性面板直接调整颜色、文本、间距。

  • 可直接在网页中打开并使用。

  • 在控制台中选择迷你应用并点击设计菜单即可开始。

参考·注意事项

  • 开启右侧面板顶部的开发者模式开关即可使用。

  • 目前仅提供基础 UI 设计功能。

  • App Builder 处于测试版。部分功能可能缺失，或存在错误。

  • 由于尚未正式发布，请不要对外共享屏幕截图或录屏。

2. 开始：创建项目

要开始设计，首先需要创建项目。您可以点击首页右上角的“+ 新建”按钮来创建项目。

项目整理方法

  • 项目无法彻底删除。

  • 而是通过放入归档或再次取出进行管理。

收藏与文件夹

  • 将鼠标悬停在项目上时显示的星形按钮可用于设置收藏。

  • 收藏的项目会固定在页面顶部。

  • 可通过左侧面板中的“+”按钮创建项目文件夹。

3. 设计准备：品牌风格与页面

打开项目后，在正式设计前先进行基本设置。

品牌风格设置

首次打开项目时会显示“开始使用”弹窗。请在这里设置以下内容。

  • 服务名称： 只能选择已注册到 Apps in Toss 控制台的名称。

  • 按钮颜色： 这是服务的主色（primary color）。为确保无障碍，部分颜色可能会被自动校正。

理解页面

页面是在一个项目中将多个界面分开设计的单位。可以在左侧面板顶部添加或删除页面。

  • 准备页面： 用于学习 App Builder 基本用法的页面。

  • 模板页面： 已准备好可直接复制使用的 UI 示例。

4. 制作页面的两种方法

在 App Builder 中，会根据情况采用两种设计方式。

1）Quick Start

将 Toss 中实际使用的 UI 原样载入，仅修改文本或部分选项后使用的方式。

  • 不仅提供单个页面，还提供多个页面相连的流程。

  • 适合想要快速搭建页面结构时使用。

修改时注意事项

  • 只能修改右侧面板中提供的项目。

  • 内部元素通过 Ctrl(Cmd) + 点击进行选择。

  • 不支持修改或删除所提供选项之外的元素。

2）自定义

先添加基础页面，再组合设计资产自行构建 UI 的方式。

  • 在没有所需 Quick Start 时使用。

  • 可以更自由地创建布局。

以基础页面为基准

  • 页面尺寸以 iPhone 13 mini 为基准（375 × 812）。

  • 资产也按该宽度制作。

  • 不建议随意更改页面宽度。

5. 处理页面构成元素

使用文本

  • 可通过 Text 资产为文本应用 TDS 风格。

  • 在右侧面板中修改样式和内容。

  • 文本类型如下。

    • 普通型： 正文文本

    • Post 型： 用于标题的粗体文本

输入提示

换行请使用 Shift + Enter。

使用图标和图形

只能使用 Toss 团队提供的图形。图形添加方法有两种。

  • 从顶部控制栏的资源中选择

  • 在右侧面板中 通过 Add to file → Change → 选择图形

3D 图形

  • 测试版中不直接提供基础 3D 图形。

  • 可以改为选择 2D 图形并转换为 3D。

  • 点击保存后，经 Toss 团队审核即可使用。

  • Quick Start 中包含的 3D 图形无法单独使用。

6. 整理布局

如需整理多个元素，请使用贴靠功能。

贴靠的基本用法

  • 按住 Shift 并点击选择多个资产。

  • 可通过横向、纵向、重叠贴靠进行分组。

  • 可通过分离来取消分组。

Stack Layout 选项

  • Fit：根据内容适配

  • Fill：填满页面

  • Fixed：固定长度

  • Gap：元素之间的间距

  • Padding：外边距

Style 选项

  • Visible：显示/隐藏

  • Opacity：透明度

  • Fill：背景色

  • Border：边框

  • Radius：圆角

  • Shadow：阴影

7. 预览与共享

查看原型

可通过右上角的播放按钮查看以移动端分辨率为基准的预览。

  • 可通过手机图标查看各设备预览。

  • 如果将所有资产设为 Fill，就可以制作响应式布局。

分享原型

通过原型分享按钮复制链接后，可在真实移动设备上直接查看 UI。

8. 通过教程再学习一次

现在来利用刚才介绍的所有功能制作搜索 UI 的 教程视频，请查看。