Where to Start with a Design System Across Different Frontend Frameworks

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

バックオフィスから全社の生産性を高める最先端の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 経費精算業務に応じた最適なソリューションを提供パートナー・代理店募集おサービス一覧料金体系導入事例セミナーお

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

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;

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

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 {}

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text