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

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

    LINE Front-end Standardization Team Front-end Engineer
  2. 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
  3. 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
  4. 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
  5. 10.

    Bootstrap Custom F/W Bluma Sematic UI Materialize 0% 8% 15%

    23% 30% CSS Frameworks Front-end Survey 2019 in UIT
  6. 11.

    Vue React jQuery Lodash 0% 13% 25% 38% 50% JS

    Frameworks/Libraries Front-end Survey 2019 in UIT
  7. 19.
  8. 20.

    Ƃ Code assets Typography Icons Components Layouts Colors Based on

    Bootstrap 4 CSS Toolkit and Vue Components
  9. 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
  10. 30.

    Requires guide for using components Cons Minimize communication Accelerate decision

    making Reduce page design time Pros Feedbacks OK Cancel OK Cancel or
  11. 33.
  12. 36.

    Design Principles Foundation Style Guide Pattern Library Colors Typography Iconography

    UX Guide ... Components Templates Icons Code assets ... Break Down
  13. 37.

    Design Principles Style Guide Pattern Library Colors Typography Iconography UX

    Guide ... Components Templates Icons Code assets ... Foundation As Is (UI Framework)
  14. 38.

    Design Principles Style Guide Pattern Library Colors Typography Iconography UX

    Guide ... Components Templates Icons Code assets Foundation ... To Be (Design System)
  15. 39.

    Core Design Principles Web App Style Guide CSS Vue React

    Android iOS Icons Pattern Library Design System Hierarchy
  16. 40.

    Core Web App CSS Vue React Android iOS Icons Pattern

    Library Style Guide Design Principles Design Principles
  17. 42.

    Core Web App CSS Vue React Android iOS Icons Pattern

    Library Style Guide Design Principles Style Guide
  18. 43.
  19. 46.

    Core Web App CSS Vue React Android iOS Icons Pattern

    Library Style Guide Design Principles Pattern Library for Web
  20. 49.
  21. 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
  22. 56.

    Private npm CDN SVG TTF EOT WOFF WOFF2 Web CSS

    Vue SVG React SVG GHE SVG SVG Current Deployment Flow
  23. 57.

    LAICON Manager SVG SVG SVG CDN CSS Designer Designer Designer

    Private npm Imaging API Web WebP Custom Element Future Deployment Flow
  24. 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
  25. 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
  26. 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
  27. 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
  28. 71.

    x-small small medium large x-large Max width 576 768 992

    1200 1201+ Layout ◦ ◦ ◦ ◦ ◦ Components Desktop Mobile Responsive and Adaptive
  29. 75.

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

    ✕ Angular ✕ ✕ USABLE Non-reusable Components
  30. 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
  31. 80.

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

    USABLE ✕ USABLE ✕ Angular USABLE ✕ ✕ USABLE Reusable Components
  32. 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
  33. 82.

    alert avatar badge CSS JS HTML CSS JS HTML k-alert

    k-avatar k-badge Framework Integration
  34. 88.
  35. 92.

    Core Web App Android iOS Design Principles Style Guide Pattern

    Library WebView Front-end in Design System