Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LDS: Developing a Cross-Platform Icon Management System

LDS: Developing a Cross-Platform Icon Management System

Akihiro Tamada
LINE Front-end Development Center Front-End Engineer


LINE DevDay 2020

November 26, 2020


  1. None
  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