Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15

Transcript

1. Date 2024.11.14 Where to Start with a Design System Across Different Frontend Frameworks Presentation @ Spectrum Tokyo #14 ©2024 LayerX.inc
2. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc Bakuraku Business Division - Product Designer Ryotaro Takahashi X @_tararira LayerX 2024.03 - Product Designer Graduated from university 2024.03 CoeFont, others 2022 - 2024 Lead Designer Internship, part-time 2022 - 2023 Product Designer
3. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc Enabling digitalization across all economic activities. すべての経済活動を、 デジタル化する。
4. バックオフィスから 全社の生産性を高める 最先端のAIで、働きやすい環境づくりと事業成長を支援します。 シリーズ累計 導入社数 社 10,000 サービス継続率 以上 99% バクラクがわかる3点セット 資料ダウンロード 無料 　 請求書処理 メール受取 仕訳・支払 レポート 　 経費精算 仕訳・支払 　 カード 仕訳 　 管理機能 マスタデータ 設定 その他 サポート No.7471 未処理 No.7471 未処理 No.7471 未処理 １ 支払情報 取引先名 * 源泉税区分：外注報酬等 バクラク法律事務所 振込先口座 * この振込先を バクラク銀行 神田駅前支店 ラベル ２ 仕訳 費用計上仕訳 借方 勘定科目 金額（税額 ） 部門･品目･メモタグ 税区分 T9010401140088 適格 明細を追加 計上日 2024-08-27 外注費 部門･品目･セグメント1(remark)･セグメント2･プロジェクト 99,790 (9,071 課対仕入10% 未払 部門･品 借方合計 99,790 (9,071 負 計算さ 計算 借方合計 99,790 (9,071 負 計算さ 計算 借方合計 99,790 (9,071 負 計算さ 計算 ・本申請に関する補足事項等 ・明細に紐づけられない購買申請や出張申請等のURL はこの備考欄に記載してください。 ・採用会食費の候補者の も こちらに記載してください。（またはtalentio） LayerX Talent PoolのURL 入力してください 明細 明細を一括処理 登録されている明細はありません。 以下から明細を追加してください。 明細を追加 領収書ファイル 交通経路 ICカード 手当 手入力 承認ルート 申請元チーム バクラクエンタープ ライズ推進事業部 役職 メンバー 承 認 フ ロ ー に ス テ ッ プ を 追 加 す る 9:30 経費精算 業務に応じた最適なソリューションを提供 パートナー・代理店募集 お サービス一覧 料金体系 導入事例 セミナー お
5. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc
6. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc BootstrapVue BootstrapVue BootstrapVue BootstrapVue React Bootstrap Bootstrap Bootstrap Bootstrap Bootstrap
7. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc BootstrapVue _colors.scss a
8. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc _colors.scss a $color_green: #28a845; $color_green_light: #62bf62; $color_success: $color_green; $color_success_light: $color_green_light; $font_color: #000; $font_color_gray: #666; $font_color_light_gray: #999;
9. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc _colors.scss a $color_green: #28a845; $color_green_light: #62bf62; $color_success: $color_green; $color_success_light: $color_green_light; $font_color: #000; $font_color_gray: #666; $font_color_light_gray: #999; <- Primitive?
10. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc _colors.scss a $color_green: #28a845; $color_green_light: #62bf62; $color_success: $color_green; $color_success_light: $color_green_light; $font_color: #000; $font_color_gray: #666; $font_color_light_gray: #999; <- Primitive? <- Semantic?
11. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc _colors.scss a $color_green: #28a845; $color_green_light: #62bf62; $color_success: $color_green; $color_success_light: $color_green_light; $font_color: #000; $font_color_gray: #666; $font_color_light_gray: #999; <- Primitive? <- Semantic? <- ‍
12. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc BootstrapVue BootstrapVue BootstrapVue BootstrapVue React Bootstrap Bootstrap Bootstrap Bootstrap Bootstrap _colors.scss a
13. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc BootstrapVue BootstrapVue BootstrapVue BootstrapVue React Bootstrap Bootstrap Bootstrap Bootstrap Bootstrap _colors.scss a _colors.scss a’ _colors.scss a’’ _colors.scss a’’’ _colors.scss a’’’’ tailwind.config.ts a’’’’’
14. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc BootstrapVue BootstrapVue BootstrapVue BootstrapVue React Bootstrap Bootstrap Bootstrap Bootstrap Bootstrap _colors.scss a _colors.scss a’ _colors.scss a’’ _colors.scss a’’’ _colors.scss a’’’’ variables primitive semantic slightly different‍ tailwind.config.ts a’’’’’
15. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc Inconsistent behaviors and styles, even across the same UI elements or components.
16. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc Inconsistent behaviors and , even across the same UI elements or components. styles
17. Design tokens Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc
18. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc Design decisions Design tokens REST API
19. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc Design decisions Design tokens REST API Plans & Pricing
20. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc Design decisions Original plugin Design tokens JSON files {}
21. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc Design decisions Original plugin Design tokens JSON files {} "gray" "50" "value" "100" "value" : { : { : }, : { : }, "#f8f8f8" "#ececec" ... "text" "primary" "value" "secondary" "value" “surface” “ : { : { : }, : { : }, : { "{colors.gray.900.value}" "{colors.gray.700.value}" ... ... colors/primitive.json colors/semantic.json typography.json spacing.json borderRadius.json
22. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc tailwind.config.ts variables.scss Design tokens v.4.0 Original transformer JSON files {}
23. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc tailwind.config.ts variables.scss Design tokens v.4.0 Products Original transformer extend JSON files {}
24. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc Display on Design tokens JSON files {}
25. Design tokens Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc
26. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc Inconsistent and styles, even across the same UI elements or components. behaviors
27. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc Common components?
28. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc Common components?
29. Guidelines & Pattern Library Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc
30. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc
31. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc When how use and to each components and UI element? How should these ? behave
32. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc
33. Guidelines & Pattern Library Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc
34. Where to Start with a Design System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc Inconsistent behaviors and styles, even across the same UI elements or components. Guidelines & Pattern Library Design tokens
35. Date 2024.11.14 ©2024 LayerX.inc THANK YOU!