Tik Tok has officially opened its enterprise application Design system Semi Design.
Semi Design is a Design system designed, developed and maintained by the Tik Tok front end team and MED Product Design team. As a comprehensive, easy-to-use and high-quality modern enterprise-level application UI solution, it is extracted from the complex scenes of bytedance’s various business lines, supporting nearly 1,000 platform products and serving more than 100,000 internal and external users.
After nearly two years of iterations, Semi Design has become a cross-departmental infrastructure with a rich tool chain and ecosystem built around a component library. In order to enable the increasingly mature design system to serve more users and further explore the usage scenarios, we decided to open source Semi, and continue to improve and expand the capabilities of the community.
Semi is often used as a prefix or phrase to mean “half” — just as a complete enterprise application is usually made up of business logic and a front-end interface, Semi Design aims to be the integral half of this, providing a solid and high-quality foundation for the front-end of enterprise applications.
We believe that the real value of the design system lies in the reduction of front-end construction costs, while providing excellent design and engineering standards, fully liberating the productivity of designers and developers, so as to constantly incubate star products.
Bright spot
Design — constant and changeable
In recent years, more and more SaaS products such as Slack, Notion, Figma have started to rely on excellent user experiences to drive growth. The product evaluation standard has been gradually transferred from the purchaser to the end user; Whether a product experience is good or bad will directly affect whether users continue to use it, and the experience design of b-end products is also becoming more and more important.
Semi Design is committed to improving the experience of enterprise applications. Through refining is concise and lightweight, modern design style, meticulous polishing atomic component interactions, and under the massive business scenarios of bytes to beat to iterate, precipitate a set of high quality base – by default it will ensure that Semi create enterprise application products, naturally have a consistent “language”, and the quality of the old system is obviously better than the baseline.
In addition, a good design system must be “live”, it needs to be able to evolve and update as the business grows. Therefore, Semi does not attempt to restrict users to a “unified specification”. Instead, it fully decouples modules and opens up customization capabilities on a default basis, allowing users to tailor and customize secondary products to build front-end assets suitable for different product forms.
Semi Design is unique and will always adhere to the Design principles of sticking to a good and stable default base (unchanged) and fully open to custom flexibility (variable) when needed.
Theme – brand customization with one click
How does Semi achieve flexibility on the basis of consistency? The answer is a strong thematic solution.
By layering and combing thousands of Design tokens, designers and developers can deeply customize the presentation layer at the global and even component levels — even if you don’t know CSS, you can use the DSM to create styles that fit the diverse visual needs of your business and brand. Developers can publish and replace the NPM package with one click, making it easy to customize and manage.
You can check out semi’s official sample themes in different brand scenarios such as Douyin, Fenying, Feishu, Volcano Engine, etc., at the theme store (semi. Design/DSM /).
Over the course of this year, we will also achieve real-time synchronization of themes from online to design tools — further ensuring continuous alignment of design and r&d while improving efficiency and reducing communication costs between production and research.
Dark mode
In addition to the lighter color mode, Semi Design automatically supports the darker color mode for any theme and dynamically switches when the application is running.
Semi also allows users to turn on dark mode in certain areas of the application to be compatible with SDK or plug-in product scenarios. Through advanced Settings, users can also automatically keep the application and system theme consistent.
At the same time, to further improve the development experience, we also provide a one-click COMPATIBLE CLI tool for unstandardized old projects to Semi dark mode, avoiding migration costs in an automated way.
Internationalization — multiple compatibility
After 30+ versions of Semi Design, the Semi Design is fully internationalized, covering 10+ languages such as English, Japanese, Korean and Portuguese. The date and time components provide global time zone support, and all components automatically adapt to the Arabic RTL layout.
At the same time, as the business expands, more and more overseas developers are building applications using Semi. In order to better support the demands of these users, we also made bilingual adaptation of the site and documents to ensure barrier-free development.
architecture
Semi Design uses A cross-front-end framework technology solution, with A layered F/A Design that splits the JavaScript of each component into two parts: Foundation and Adapter, which allows us to quickly build common component libraries across platforms by re-implementing only adapters to reuse Foundation code across frameworks, such as React, Vue, Angular, Svelte, or WebComponent.
Foundation
Foundation contains the business logic that best represents the Semi Design component interaction, without actually referring to any DOM elements. Foundation delegates Adapter methods to any logic that requires DOM manipulation.
Adapter
Adapter is an interface that has all the methods that Foundation needs to implement Semi Design business logic and is responsible for the HTML layer of the concrete rendering. Adapters can have many implementations, allowing interoperability with different frameworks.
Currently, we implement the React version of Adapter, and you can use our React component directly by introducing semi-UI. If you are interested in architecture design of Semi, can refer to this article further bytedance. Feishu. Cn/docs/doccnT…
application
On the platform application level, Semi Design supports many of ByteDance’s core business platforms, some of which have reached 10,000 DAU. Externally, there have also been a number of internally verified products, through flying books, volcano engine commercialization.
In terms of product form, Semi supports more and more diversified products as the business grows rapidly. In addition to the conventional CMS/ERP system, there are also cloud computing, audio and video, design tools and plug-ins, message IM and other vertical classes; Moreover, on this basis, it incubates high-quality branch component libraries with significant business characteristics, such as live broadcast platform and customer service platform.
Douyin creation service platform
Tiktok’s official one-stop service platform for creators. It integrates the functions of releasing works, managing accounts, analyzing data, monitoring public opinions and so on, assisting all kinds of creators/institutions/we-media/big VS to carry out convenient and efficient content management, and providing more creation possibilities.
Bytedesk smart customer service
The customer service center, which supports byteDance’s entire system and multiple product lines, is rapidly growing into a full-scene customer service system that provides extreme experience. At present, it has access to douyin, Toutiao, Watermelon video and other businesses, covering content, transaction, medical treatment, advertising and other scenes, providing low-cost, efficient and intelligent service solutions for business parties, and is committed to building a service brand of byte.
Rubik’s cube
Bytecode is the cornerstone of activity building, relying on efficient and professional website building tools and flexible and rich marketing methods, building product capabilities in the whole link system of marketing activities, and is committed to building a marketing automation platform with global influence.
Byte Project Management
Byte internal ten thousand scale project management practice, efficient drive 100 million user products online. By supporting highly configurable, differentiated management processes and standards, and automated mechanisms, it drives teams of different structures to track and manage the entire product process.
Cut off. – Black can
Connect all participants in the video creation industry chain, provide material sharing, cooperation and exchange, commercial realization and other services. The platform builds material library (templates, props, sound effects, characters, special effects, etc.), and provides diversified forms of advertising content for enterprises/advertisers to serve a richer commercial scene.
Open platform for live broadcasting
The only channel for livestreaming agencies to enter Into Douyin and Watermelon helps creators and organizations grow and build a mutually beneficial livestreaming creation ecosystem. Provide real-time follow-ups to assist anchors in maintaining fan relationships; Data analysis helps refine the operation of institutions; 1V1 exclusively operates docking and other live creation services.
Why open source
Open source is a big driver of the technology industry. Semi Design was developed using a number of open source tool libraries; In the design of technical solutions, we continue to draw inspiration from various excellent practices of the open source community.
Over the past two years, we have put a lot of effort into improving the Semi experience for designers and developers within ByteDance, and we continue to get positive feedback. We believe Semi Design has gained an edge over its competitors in improving product quality and development efficiency — and we hope to bring these advantages to the industry, serving more users and exploring more usage scenarios to further expand Semi’s capabilities.
SemiDesign benefits from open source and wants to give back. We look forward to continuing to improve it with the help of community.
Community developers are welcome to join the Semi Design Co-build Guide at github.com/DouyinFE/se…
Looking forward to
In the coming year, Semi Design team will continue to improve the quality and improve the Semi Design team, and make more internal toolchains and resources available to the community, including but not limited to:
Material community
Over the past year, users in byte’s line of business teams have designed and developed a wide variety of UI materials, including forms, multimedia, user guides, message notifications, charts, and more, around Semi’s basic components and have published them in the materials market. Semi users can find and reuse materials based on product requirements, greatly saving development costs. At the same time, high-quality UI resources can also be formed and accumulated and spread.
The Materials community will meet you soon. At that time, we will open source the high-quality materials together, and open the material release process to the community users, provide development guide.
Design to Code
Semi team has been trying to optimize daily work flow through various automation methods to help team designers and r&d improve efficiency, and even redefine the traditional way of working. Among them, “front-end page restore” this link has time-consuming, high communication cost and various inefficient problems, has been the focus of our attention.
So far, we have implemented a simple static page design translation and verified it in landing pages and other scenarios — in fact, the semi. Design website was developed and restored using this solution.
In the future, the Design to Code solution will be identified and translated at the component level through Code scanning. At the same time, combined with the page templates precipitated by the team from a large number of business scenarios, users can quickly complete the cloning and structural restoration of front-end pages at a very low cost.
A11y
Semi has always focused on Web accessibility, and we currently have some accessibility support in terms of semantic tagging, color calculation contrast, text perception, etc., but we believe there is still a lot of room for improvement. We will continue to focus on improving the operability and perceptiveness of components, providing more convenient keyboard interaction for mouse-based operations, and providing more complete WAI-ARIA support.
Many frameworks
As the core design principle of Semi, high extensibility runs through the code architecture design, API design, style layer abstraction and other aspects of Semi. Semi is easy to migrate to other front-end frameworks thanks to the Foundation/Adapter architecture design and style file layering principles. In version 2.0, Semi was rewritten in Typescript with the expectation of a good development experience and quality assurance during the transition process.
The Foundation layer is also open source under the MIT protocol, and we will always keep its code implementation framework independent in future iterations. If you are looking to bring Semi Design to more platform frameworks, you are welcome to reuse it directly.
Our team will focus on the React system at the current stage, but WebComponent is also one of our focus directions. We will try more when the time is right, so stay tuned.
Contact us
Douyin front-end technology team
We are the front-end technology team of Douyin, serving multiple product lines of Douyin and Bytedance, focusing on building front-end infrastructure and actively exploring community technologies. douyinfe.com/
MED Product design team
MED, a member of bytedance Interactive Entertainment community, is committed to designing easy-to-use, rigorous and scalable user experience for the company’s multiple platform engines. With the design concept of “pleasure”, “simplicity” and “efficiency”, MED can solve problems for users and improve business efficiency through design.
Work: dribbble.com/MetaEnterpr…
Join us (Beijing) : job.toutiao.com/s/dw28nEb
Join us (shenzhen) : job.toutiao.com/s/dw28nEb
The related resources
Liverpoolfc.tv: semi. The design
Making warehouse: github.com/DouyinFE/se…
Figma UIKit: www.figma.com/@semi