Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

多様なBtoBサービスのためのデザインシステム / Design System for var...

多様なBtoBサービスのためのデザインシステム / Design System for various BtoB service

■イベント 

【Engineering Team Presentation】各社のサービス品質を支えるベストプラクティス

https://sansan.connpass.com/event/209357/

■登壇概要

タイトル:多様なBtoBサービスのためのデザインシステム
発表者:株式会社日本経済新聞社 デジタル事業 情報サービスユニット
エンジニア 清野 光平

▼Builders Box

https://buildersbox-online.com/

Builders Box

May 18, 2021
Tweet

More Decks by Builders Box

Other Decks in Technology

Transcript

  1. Colors Background Color Text Color Border Color Font Font Size

    Opacity Line Height Spacing Radius Sizing Shadow Time Touch Media Query Z-index 30 σβΠϯτʔΫϯͷΧςΰϦ ྫSalesforce Lightning Design System Salesforce Lightning Design System - Design Tokens https://www.lightningdesignsystem.com/design-tokens
  2. 31 ίʔυ্ͰͷσβΠϯτʔΫϯ ίʔυ্͸ม਺ͳͲͰఆٛ ΧϥʔύϨο τͳͲ :root { --color-nikkei-blue-100: #e4f2ff; --color-nikkei-blue-200:

    #9ecefc; --color-nikkei-blue-300: #5daaf3; --color-nikkei-blue-400: #2d8ae2; --color-nikkei-blue-500: #0e6ec8; --color-nikkei-blue-600: #0c59a1; --color-nikkei-blue-700: #0a3e6f; --color-nikkei-blue-800: #00203d; }
  3. 34 σβΠϯͷܾఆ͸σβΠϯπʔϧ্ͰߦΘΕΔ Figma API color: nikkei-blue: 100: value: '#e4f2ff' 200:

    value: '#9ecefc' 300: value: '#5daaf3' 400: value: '#2d8ae2' 500: value: '#0e6ec8' 600: value: '#0c59a1' 700: value: '#0a3e6f' 800: value: '#00203d' :".-΍+40/Ͱॻ͖ग़͢ τʔΫϯ͸σβΠϯϑΝΠϧ͔Β஋Λॻ͖ग़͢
  4. 35 ϏϧυπʔϧΛ࢖֤ͬͯϓϥοτϑΥʔϜ޲͚ʹग़ྗ :root { --color-nikkei-blue-100: #e4f2ff; --color-nikkei-blue-200: #9ecefc; } CSS

    $color-map: ( 'nikkei-blue-100': #e4f2ff, 'nikkei-blue-200': #9ecefc, ); SCSS public class DesignTokens { public static let colorNikkeiBlue100 = UIColor(red: 0.894, green: 0.949, blue: 1.000, alpha:1) public static let colorNikkeiBlue200 = UIColor(red: 0.620, green: 0.808, blue: 0.988, alpha:1) } Swift YAML color: nikkei-blue: 100: value: '#e4f2ff' 200: value: '#9ecefc' 300: value: '#5daaf3' 400: value: '#2d8ae2' 500: value: '#0e6ec8' 600: value: '#0c59a1' 700: value: '#0a3e6f' 800: value: '#00203d' Ϗϧυπʔϧ Style Dictionary ϕʔε w ୯Ґͷ׵ࢉ w ΤΠϦΞεͷղܾ
  5. 37 ઃఆͷӅṭ΍ΧελϚΠζΛͯ͠ɺ Ϗϧυπʔϧͱͯ͠ఏڙ 4UZMF%JDUJPOBSZͷઃఆΛӅṭ w ग़ྗϓϥοτϑΥʔϜ w ୯Ґ׵ࢉ 
 ͳͲ

    ࣗ෼ͨͪͷαʔϏε༻ͷΧελϚΠζ w ໋໊نଇ w τʔΫϯؒͷґଘղܾ Ϗϧυπʔϧͱͯ͠ϞδϡʔϧԽ { "name": "@nikkei/design-tokens", "devDependencies": { "@nikkei/design-tokens-builder": “1.0.0" }, "scripts": { "build": "tokens-builder build", "clean": “tokens-builder clean" } } τʔΫϯ͸ϏϧυπʔϧΛ࢖ͬͯϏϧυ
  6. 38 αʔϏεͳͲτʔΫϯΛఆٛ͢Δଆ͸ఆٛϑΝΠϧΛ͚࣋ͭͩ τʔΫϯϏϧυπʔϧ τʔΫϯఆٛ color: nikkei-blue: 500: value: '#0e6ec8' grayscale:

    100: value: '#f5f7fa' ίϯϙʔωϯτϥΠϒϥϦ αʔϏε τʔΫϯఆٛ color: primary: blue: value: '{color.nikkei-blue.500.value}' gray: value: '{color.grayscale.100.value}' τʔΫϯग़ྗ :root { --color__primary--blue: #0e6ec8; --color__primary--gray: #f5f7fa; } .button--primary { background-color: 
 var(--color__primary--blue); } .button-outline--primary { border-color: var(--color__primary--gray); }
  7. 44 σβΠϯγεςϜ࣮૷·ΘΓͷऔΓ૊Έ σβΠϯτʔΫϯ ίϯϑΟά ελΠϦϯά React ΞΠίϯ CSS, Sass JavaScript,

    JSON Swift, XM L
 … CSS, Sass browserslist stylelint … ݱϑΣʔζ ࣍ϑΣʔζ )5.-͸ϦϑΝϨϯε࣮૷
  8. 45 σβΠϯγεςϜ࣮૷·ΘΓͷͬ͘͟ ΓΞʔΩςΫνϟ τʔΫϯఆٛ τʔΫϯϏϧυπʔϧ τʔΫϯϑΝΠϧ τʔΫϯͷϔϧύʔ Button Checkbox bundle

    શ෦ೖΓ ϓϩμΫτݻ༗ͷελΠϧ ɾ ɾ ɾ 'JHNB"1* ։ൃ༻εΫϦϓτ τʔΫϯఆٛ τʔΫϯϑΝΠϧ Button Checkbox bundle શ෦ೖΓ ɾ ɾ ɾ ։ൃ༻εΫϦϓτ ΞϓϦଆ 3FBDU࣮૷ browserslist stylelint ɾ ɾ ɾ