Front-end in Design System

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

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
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 !