LDS: Developing a Cross-Platform Icon Management System

Akihiro Tamada
LINE Front-end Development Center Front-End Engineer
https://linedevday.linecorp.com/2020/ja/sessions/3079
https://linedevday.linecorp.com/2020/en/sessions/3079

Transcript

2. Akihiro Tamada › CSS Hobbyist ! › GitHub: spring-raining › UIT 1 Dept. / LINE Front-end Development Center
3. LDS Presentations Going Beyond a Component Library in LINE Design System Sharing UI Components Between LINE Projects › Developing a Cross-Platform Icon Management System LAICON
4. What does this icon mean?
5. What does this icon mean? Box
6. What does this icon mean? Box Gift
7. What does this icon mean? Box Gift Instance
8. Our objects For designers Consistent UI design For engineers Efficient UI development High-scalability for LINE Design System Centralized icon library
9. Icons in our products
10. Icons in our products
11. Which icon should we use?
12. Icon naming convention yen circle send yen-circle-send
13. Icon naming convention Name Element Direction Shape Style user user-circle user-arrow-in user plus check times arrow ellipsis up down horizontal vertical in out circle square rectangle octagon rounded
14. Icon design principles 1.3 1.6 1.3 1.3 1.0 Regular (Outlined icon) Solid (Filled icon) 1.3 24 20
15. LAICON gallery website
16. Icon proposal manager
17. Icon proposal manager
18. Icon deployment workflow JavaScript libraries Deployment system Private npm CDN Imaging API CSS/Web font PNG/WebP/SVG SVG SVG SVG On-demand conversion
19. Use cases for our icon library
20. Conclusion › A design system unites designers and developers. › Focus on high scalability to achieve high efficiency. › Open communication with product UI designers.
21. Thank you