SF Design Mobile: Design System, Token Integration, and Component Library Overview

As business expands, SF Technology’s UED and development teams identified the need for a unified mobile component library to streamline design and development across multiple product lines.

The goal of SF Design Mobile is to follow five design principles—consistency, simplicity, clarity, error‑tolerance, and flexibility—by providing interaction specifications, visual guidelines, UI components, and design token standards to improve both design and development efficiency.

The library was built by establishing global design standards, creating a full set of Design Tokens, developing reusable components and symbols, and launching a public SF Design platform for easy access and maintenance.

Design Tokens serve as named variables for design attributes such as colors, typography, spacing, and radius, enabling a shared language between designers and developers, consistent UI, efficient updates, high fidelity implementation, and rapid theme switching.

SF Design Mobile comprises over 40 base components, 91 token variables, and 1,799 symbols, organized into four major categories: input, display, feedback, and navigation components.

A public platform aggregates all web and mobile resources, including design principles, component assets, usage guides, and maintenance mechanisms, facilitating broader adoption.

Application demonstration using the "SF Express Courier" app shows how token values are adapted to project specifications and how components are integrated into the product workflow.

Since its release, the library has been adopted in 31 projects covering native Android, iOS, React Native, and H5 frameworks; feedback indicates improved efficiency but highlights challenges in adaptability and specialized use cases.

Future plans include expanding high‑frequency components, adding business‑specific modules (e.g., scanning, login), enhancing customizability, improving cross‑platform compatibility, and integrating advanced design tools to support more projects and product lines.