Design Tools

Introducing two ways to design Apps in Toss mini app UI.

Figma: Download the TDS component library and use it directly.
App Builder: A web-based UI design tool you can use directly in the console without any separate installation.

Figma

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

License information

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

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.

TDS_Mobile_for_Apps_in_Toss.zip

archive · 30MB

Open

Notes

The Semantic Color applied to the UI Kit does not match the code in the current version.
Figma and the Toss app use different font families. Because Toss Product Sans is difficult to distribute as a separate asset, we use SF Pro in Figma. In the Toss app, the font family is automatically applied as Toss Product Sans, so please keep that in mind.

2. Import the file

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

3. Connect as a library (Publish)

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

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

4. Use after connecting components

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

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.

Please be sure to follow these guidelines when designing

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

At the top of every screen, ❖ Navigation be sure to use the component. A 🌈 with the required components already included Screenis more convenient to pull out and use.
As much as possible, adjust properties only in the right panelPlease do so. If you edit directly on the canvas, properties not present in the code may be created, making implementation harder or taking longer during development.
For screens, use a width of 375px as the standard. Other sizes are possible, but, ❖ Keypad there may be components that do not support responsiveness, such as ❖ Keypad, which can be inconvenient.
At the top of the screen, ❖ Top, and below that, ❖ ListRowusing it lets you quickly build most screens.
Most TDS components include default padding, so they look natural even when placed together without a gap. For example, ❖ ListRowit has four vertical padding options: S, M, L, and XL. If you still need to adjust spacing, use the gap in auto layout.

Frequently Asked Questions

The component is not behaving as expected.

Developer communityPlease contact us. We'll help you quickly.

There is no component you want.

Most UIs can be replaced with TDS components. For example, you can use 🔵 Mobile_ListRow instead of a Card UI.

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

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

Do I need to install the Toss Product Sans font?

Each component already has the font applied, so you can use it without any separate installation.

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

Can I separate TDS components and use them?

Yes, but please judge carefully.

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

The icon color looks wrong.

It's a bug that occurs occasionally. Please fix it to the appropriate color and use it.

Icons can't be searched in Korean.

Please search in English or search by Unicode.

Due to Figma's limitations, it's currently difficult to improve.

Can any design be deployed to the Toss app?

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

How do we handle dark mode?

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

I have more questions.

Developer communityPlease contact us anytime.

App Builder

App Builder is for Apps in Toss partner companies a web-based UI design toolYou can quickly create screens that follow Toss's UI style guide without any separate installation.

In App Builder, from the workspace you can start from the 'Design' menu. you can start from the 'Design' menu.

1. App Builder at a glance

What you can do with App Builder

You can quickly create screens that match Toss's UI style.
You can build screens right away using design assets and components.
You can preview it as a prototype, just like a real mobile screen.

Benefits

You don't need to prepare a separate design library.
You can adjust colors, text, and spacing directly in the right properties panel.
You can open it and use it directly on the web.
Select a mini app in the console and click the Design menu to get started right away.

Notes and cautions

Developer Mode can be used by turning on the toggle at the top of the right panel.
Currently, only basic UI design features are provided.
App Builder is in beta. Some features may be missing or have errors.
Since it has not been officially released yet, please do not share screenshots or recordings externally.

2. Getting started: Create a project

To start designing, you first need to create a project. You can create one by clicking the '+ New' button at the top right of the home screen.

How to organize projects

Projects cannot be deleted completely.
Instead, manage them by putting them in storage or taking them back out.

Favorites and folders

You can set a project as a favorite using the star button that appears when you hover over it.
Favorite projects are pinned to the top of the screen.
You can create project folders with the '+' button in the left panel.

3. Design preparation: Brand style and pages

When you open a project, set the basic configuration before starting the full design.

Set brand style

When you first open a project, a 'Get started' modal appears. Set the following here.

Service name: You can only select names registered in the Apps in Toss console.
Button color: This is the service's primary color. Some colors may be automatically adjusted for accessibility.

Understanding pages

Pages are the unit for dividing and designing multiple screens within a single project. You can add or delete pages at the top of the left panel.

Preparation page: This is a page for learning the basic usage of App Builder.
Template page: UI examples are ready to be duplicated and used right away.

4. Two ways to create screens

In App Builder, you design in two ways depending on the situation.

1) Quick Start

This method imports the UI actually used in Toss as-is and lets you use it by modifying only text or some options.

It also provides flows with multiple connected screens, not just a single screen.
It's good when you want to quickly set up the screen structure.

Notes when editing

You can only edit the items provided in the right panel.
Select internal elements with Ctrl(Cmd) + click.
Changing or deleting elements other than the provided options is not supported.

2) Custom

This method adds a basic screen and then directly constructs the UI by combining design assets.

Use this when the Quick Start you need isn't available.
You can create layouts more freely.

Based on the basic screen

The screen size is based on the iPhone 13 mini (375 × 812).
The assets are also made to fit this width.
Changing the screen width arbitrarily is not recommended.

5. Working with screen components

Using text

You can apply TDS styles to text with the Text asset.
Edit the style and content in the right panel.
The text types are as follows.
- Standard: Body text
- Post style: Bold text for titles

Input tip

Please use Shift + Enter for line breaks.

Using icons and graphics

You can only use graphics provided by the Toss team. There are two ways to add graphics.

Select from Resources in the top control bar
In the right panel, Add Asset → Change → Select graphic

3D graphics

In the beta version, basic 3D graphics are not provided directly.
Instead, you can select a 2D graphic and convert it to 3D.
If you click Save, you can use it after Toss team review.
The 3D graphics included in Quick Start cannot be used separately.

6. Organizing layouts

To organize multiple elements, please use the attach feature.

Basic use of attach

Select multiple assets with Shift + click.
You can group them by horizontal, vertical, or stacked attach.
You can ungroup them by detaching.

Stack Layout options

Fit: Adjust to content
Fill: Fill the screen
Fixed: Fixed length
Gap: Space between elements
Padding: Outer margin

Style options

Visible: Show/Hide
Opacity: Transparency
Fill: Background color
Border: Border
Radius: Corner roundness
Shadow: Shadow

7. Preview and sharing

Check the prototype

You can check the preview at mobile resolution using the play button in the top right.

You can view device-specific previews with the phone icon.
If you set all assets to Fill, you can create a responsive layout.

Share prototype

If you copy the link with the Share prototype button, you can check the UI directly on a real mobile device.

8. Learn again with the tutorial

Try creating a search UI using all the features introduced so far in the tutorial videoPlease take a look.