Best practices for building a consistent design system from design to app implementation

By operating a design system effectively, we can enjoy powerful benefits: - Ensuring the quality of the app's UI (realizing both visual unity and consistent operability) - Creating a more efficient environment for engineers and designers These are very important concerns, especially for large services or services in the process of scaling up. To build an effective system, designers and engineers need to be on the same page and work closely together. However, the "design system" itself is a relatively new concept, and tools are still evolving. So there are many situations in which designers and engineers struggle to find a concrete method that is consistent from development to design. In this session, I will use the Yahoo! Japan app as an example to talk about specific best practices in Figma and Compose, based on systematic information that covers both development and design in a consistent way. Specifically, I will explain the following: - The purpose and effect of building a design system. - How to build a team of engineers and designers who have the same point of view on designing and developing the app. - Differences in scope of interest and ways of thinking between designers and engineers. - Common issues that arise when designers and engineers work together and how to overcome them. - Specific methods related to automating the process of ensuring SSOT and the close integration between Figma and app implementation. - Integration of Variable, Figma’s design token management function, in code, and generation of Compose implementation code by using Figma's DevMode and Google’s Relay. - Points to keep in mind and specific techniques to avoid differences in UI between implementation and design data. - Rules regarding the hierarchical structure of UI and property naming, settings for responsive design and text styles in Compose and Figma, etc. (Translated by the DroidKaigi Committee)

• しゅーぞー LINEヤフー株式会社 Yahoo! JAPANアプリ Androidアプリエンジニア UIデザイナー