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

Date 2024.11.14 Where to Start with a Design System Across
Different Frontend Frameworks Presentation @ Spectrum Tokyo #14 ©2024 LayerX.inc

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

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

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;

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?

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?

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? <- ‍

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

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

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

Guidelines & Pattern Library Where to Start with a Design
System Across Different Frontend Frameworks Date 2024.11.14 ©2024 LayerX.inc

Where to Start with a Design System Across Diff...

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

More Decks by Ryotaro Takahashi

Other Decks in Design

Featured

Transcript