Front-end in Design System

Front-end in Design System

Akihiko Okazaki
LINE Front-end Standardization Team Front-end Engineer
https://linedevday.linecorp.com/jp/2019/sessions/A2-3

Be4518b119b8eb017625e0ead20f8fe7?s=128

LINE DevDay 2019

November 21, 2019
Tweet

Transcript

  1. 2019 DevDay Front-End in Design System > Akihiko Okazaki >

    LINE Front-end Standardization Team Front-end Engineer
  2. Agenda Introduction UI Framework Design System Pattern Library for Web

  3. OKAZAKI Akihiko Front-end Engineer LINE Corporation @okazou

  4. Introduction What is UIT ?

  5. Front-end Dev1 Front-end Dev2 Front-end Dev3 Front-end Dev4 Front-end Dev5

    Front-end Dev6 Front-end Standardization Fukuoka Kyoto Front-end Development Center UIT Department 1 UIT Department 2 As of November 2019 UIT Organization
  6. KOREA TAIWAN TOKYO FUKUOKA KYOTO UIT Global Branches VIETNAM

  7. 160+ Front-end Engineers

  8. 0% 7% 13% 20% 27% 33% 40% 0-1 1-2 2-5

    5-10 10-15 15+ years Front-end Experience Front-end Survey 2019 in UIT
  9. JS 7% 17% 33% 33% 10% CSS 7% 13% 47%

    25% 7% Expert Advanced Intermediate Novice Beginner Front-end Knowledge Front-end Survey 2019 in UIT
  10. Bootstrap Custom F/W Bluma Sematic UI Materialize 0% 8% 15%

    23% 30% CSS Frameworks Front-end Survey 2019 in UIT
  11. Vue React jQuery Lodash 0% 13% 25% 38% 50% JS

    Frameworks/Libraries Front-end Survey 2019 in UIT
  12. Introduction UIT Works

  13. Main Scope Web Apps in Browser WebView in Client-apps SDK

    & Tools
  14. Planner Android Engineer iOS Engineer Server-side Engineer Designer QA Engineer

    Relations
  15. Ƃ https://uit.connpass.com Front-end Community - UIT

  16. Ƃ https://uit-inside.linecorp.com Front-end Podcast - UIT INSIDE

  17. Ƃ https://getbootstrap.jp OSS Contribution - Bootstrap JP

  18. UI Framework

  19. None
  20. Ƃ Code assets Typography Icons Components Layouts Colors Based on

    Bootstrap 4 CSS Toolkit and Vue Components
  21. Case Study LINE Official Account Manager

  22. Ƃ https://manager.line.biz Admin Tool for LINE Official Accounts

  23. LINE Official Account LINE Official Account LINE Business Connect LINE

    Customer Connect LINE@ Redesign
  24. 150+ Project Members

  25. Required Functions Account List Dashboard Coupon Purchase Broadcast Rich Menu

    Reward Card Notification Auto Response Rich Message Gain Friends Insight Timeline Rich Video Survey Search
  26. Technologies MPA SPA

  27. ES6 Dependencies

  28. Ƃ https://www.linebiz.com/lineat_migration Released in April 2019

  29. save time -30% Design Develop QA Plan Result

  30. Requires guide for using components Cons Minimize communication Accelerate decision

    making Reduce page design time Pros Feedbacks OK Cancel OK Cancel or
  31. -30% Design Develop QA Plan Can save more ! If

    overcome cons ...
  32. Design System

  33. Phase1 LINE app Phase2 LINE Family Services Mobile Web Phase3

    Desktop Web LINE Design System LDS
  34. Sync with LDS Design Sync Workshop in Shinjuku

  35. Design Principles Pattern Library WISH HOW HOW / WHY Style

    Guide Major Concepts
  36. Design Principles Foundation Style Guide Pattern Library Colors Typography Iconography

    UX Guide ... Components Templates Icons Code assets ... Break Down
  37. Design Principles Style Guide Pattern Library Colors Typography Iconography UX

    Guide ... Components Templates Icons Code assets ... Foundation As Is (UI Framework)
  38. Design Principles Style Guide Pattern Library Colors Typography Iconography UX

    Guide ... Components Templates Icons Code assets Foundation ... To Be (Design System)
  39. Core Design Principles Web App Style Guide CSS Vue React

    Android iOS Icons Pattern Library Design System Hierarchy
  40. Core Web App CSS Vue React Android iOS Icons Pattern

    Library Style Guide Design Principles Design Principles
  41. RESPECT FOR LEGACY CLEAR PRIMARY TASK CONTINOUS EXPERIENCE RELIABLE DESIGN

    CHAT FIRST WE ≠ USERS Design Principles
  42. Core Web App CSS Vue React Android iOS Icons Pattern

    Library Style Guide Design Principles Style Guide
  43. Colors

  44. Typography

  45. Iconography

  46. Core Web App CSS Vue React Android iOS Icons Pattern

    Library Style Guide Design Principles Pattern Library for Web
  47. Core Web App CSS Vue React Android iOS Icons Pattern

    Library Icons
  48. home_icon_service_delete ke_navi_icon_close keep_icon_grid_cancel keep_icon_list_delete keep_icon_search_delete keep_popup_icon_close login_02_close pipMusicIconCloseNormal pipMusicIconClosePressed shareIconPostingDelete

    Close Icon
  49. Food Loss

  50. Design Loss home_icon_service_delete ke_navi_icon_close keep_icon_grid_cancel keep_icon_list_delete keep_icon_search_delete keep_popup_icon_close login_02_close pipMusicIconCloseNormal

    pipMusicIconClosePressed shareIconPostingDelete
  51. Naming Single Source Flexible Icon Normalization

  52. friend add friend members user user-plus users Naming Convention

  53. Ƃ LAICON (LINE Atomic Icons)

  54. Ƃ SVG Source

  55. Various Implementations CSS <i class="lar la-comment-dots"></i> Vue import CommentDots from

    '/laicon-vue/CommentDots'; React import CommentDots from '/laicon-react/CommentDots'; SVG <!DOCTYPE html><html><meta charset=utf-8>... Unicode e96e
  56. Private npm CDN SVG TTF EOT WOFF WOFF2 Web CSS

    Vue SVG React SVG GHE SVG SVG Current Deployment Flow
  57. LAICON Manager SVG SVG SVG CDN CSS Designer Designer Designer

    Private npm Imaging API Web WebP Custom Element Future Deployment Flow
  58. format [webp] [png] [svg] Output image format color string Output

    image color (RGB, RGBA) height number Output image height (px) shape [square] [content] LAICON Imaging API square content
  59. Available in Client-apps

  60. Core Web App CSS Vue React Android iOS Icons Pattern

    Library CSS
  61. Theming Adaptive Components Instant New Features

  62. primary secondary success danger warning info Current Theme Colors

  63. https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode Dark Mode

  64. Service Individuality

  65. Default Passion Dark Switch Theme

  66. :root { --primary: #d6002a; } .btn-primary { background-color: var(--primary, #00b900);

    } Custom Properties
  67. Color Darken RGB HSL R G B H S L

    #07b53b 0% 7 181 59 138 93% 37% #05842b 10% 5 127 39 138 93% 27% #034e18 20% 3 78 24 138 93% 17% RGB vs HSL
  68. :root { --primary-h: 138; --primary-s: 93; --primary-l: 37; } .btn-primary

    { background-color: hsl( var(--primary-h), calc(var(--primary-s) * 1%), calc(var(--primary-l) * 1%) ); } .btn-ptimary:hover { background-color: hsl( var(--primary-h), calc(var(--primary-s) * 1%), calc((var(--primary-l) - 10) * 1%) ); } Default Hover Active Generate Tint Without Sass
  69. https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode Color Contrast

  70. :root { --btn-h: 0; --btn-s: 0; --btn-l: 71; --threshold: 70;

    } .btn:hover { --bg-l: calc(var(--btn-l) - 10); --fg-l: calc(var(--bg-l) - var(-- threshold) * -100%); color: hsl(0, 0%, var(--fg-l)); background-color: hsl( var(--btn-h), calc(var(--btn-s) * 1%), calc(var(--bg-l) * 1%) ); } L=71% L=61% L=51% Keep Contrast Without Sass
  71. x-small small medium large x-large Max width 576 768 992

    1200 1201+ Layout ◦ ◦ ◦ ◦ ◦ Components Desktop Mobile Responsive and Adaptive
  72. Core Web App CSS Vue React Android iOS Icons Pattern

    Library JS
  73. 57% 43% Front-end Survey 2019 in UIT Vue vs React

  74. Done Done What's next ? Next ?

  75. koromo-vue koromo-react koromo-angular Vue USABLE ✕ ✕ React ✕ USABLE

    ✕ Angular ✕ ✕ USABLE Non-reusable Components
  76. Web Components

  77. https://www.webcomponents.org Usable in All Evergreen Browsers

  78. Can be used in Vue and React Polyfills integration Learning

    curve for developers Can reuse code from koromo Works on WebView Proof of Concept
  79. koromo-element

  80. koromo-element koromo-vue koromo-react koromo-angular Vue USABLE USABLE ✕ ✕ React

    USABLE ✕ USABLE ✕ Angular USABLE ✕ ✕ USABLE Reusable Components
  81. <div class="chat chat-primary"> <div class="avatar"> <img src="alex.svg" class="rounded- circle" alt="Alex"

    /> </div> <div class="chat-content"> <div class="chat-header"> Alex </div> <div class="chat-body"> <div class="chat-main"> <div class="chat-item baloon"> <div class="chat-item-text"> DevDay! </div> </div> </div> </div> </div> </div> <k-chat variant="primary" text="DevDay!"> <k-avatar src="alex.svg" name="Alex" /> </k-chat> Smart Code
  82. alert avatar badge CSS JS HTML CSS JS HTML k-alert

    k-avatar k-badge Framework Integration
  83. Multi-device Themable Reusable Web Components for koromo koromo-element

  84. https://developers.line.biz/ja/docs/liff LIFF (LINE Front-end Framework)

  85. LUI (LIFF UI)

  86. Atoms Molecules Organisms Templates Pages Atomic Design

  87. Atoms Molecules Templates Organisms LUI Component Levels

  88. Summary

  89. Strict vs Loose Rule Centered vs Distributed Team Module vs

    Integration Parts Approach Style
  90. Product Manager UX Designer UI Designer Android Engineer iOS Engineer

    Front-end Engineer Design System Team
  91. TOKYO KYOTO LIFF Icons CSS Vue Web Components Front-end Part

  92. Core Web App Android iOS Design Principles Style Guide Pattern

    Library WebView Front-end in Design System
  93. Design Principles Style Guide Pattern Library Thank You !