デザインシステムの海で3年間もがいてみて

•

6 gefällt mir•7,310 views

2018年4月20日に行われた『Bonfire Design #3』のスライドです。このスライドで紹介している『Design System as a Product』の講演時のシナリオを著者である斉藤祐也様からご提供いただいたので、巻末の付録に付けました。ぜひそちらもご参照ください！

Technologie

About Me
Kyohei Morimoto 
(@basara669) 
Frontend Engineer
•
•

FEATURES
ABOUT RIFF
• Web
• GitHub
• Sketch
•
1
• CI
• TextLint VisualRegressionTest

TEAM
ABOUT RIFF
• 2014 10
Bootstrap
• Web
•
•

https://speakerdeck.com/studiomohawk/design-
system-as-a-product-at-frontrend-vol-dot-8

LIBRARY VS DESIGN SYSTEM
LIBRARY DESIGN SYSTEM

https://japan.cnet.com/article/35096064/

https://medium.com/eightshapes-llc/team-models-for-
scaling-a-design-system-2cf9d03be6a0

DESIGN SYSTEM TEAM MODELS
•1
• Bootstrap
•
•
•
•
• MaterialDesign

PROBLEM OF FEDERATED MODEL
 
- OSS
3  
-
 
-
or issue

DESIGN SYSTEM AS A PRODUCT
Bonfire Design @cssradar Design System as a Product  
https://d.pr/n/DiJeqa
@hiloki 🙏

Empfohlen

Vespa - Tokyo Meetup #yjmuYahoo!デベロッパーネットワーク

Apache OpenWhiskで実現するプライベートFaaS環境 #tjdevYahoo!デベロッパーネットワーク

k8sjp#9 KubeCon - Service Mesh, ML/DL on k8sJUNICHI YOSHISE

Kubernetes Summit 2021: Multi-Cluster - The Good, the Bad and the Uglysmalltown

Moby and Kubernetes entitlements Docker, Inc.

Cloud Foundry V2 | Intermediate Deep DiveKazuto Kusama

桃園市教育局Docker技術入門與實作Philip Zheng

Cloud Foundry Summit 2015: Managing Multiple Cloud with a Single BOSH Deploym...VMware Tanzu

Empfohlen

Vespa - Tokyo Meetup #yjmuYahoo!デベロッパーネットワーク

Apache OpenWhiskで実現するプライベートFaaS環境 #tjdevYahoo!デベロッパーネットワーク

k8sjp#9 KubeCon - Service Mesh, ML/DL on k8sJUNICHI YOSHISE

Kubernetes Summit 2021: Multi-Cluster - The Good, the Bad and the Uglysmalltown

Moby and Kubernetes entitlements Docker, Inc.

Cloud Foundry V2 | Intermediate Deep DiveKazuto Kusama

桃園市教育局Docker技術入門與實作Philip Zheng

Cloud Foundry Summit 2015: Managing Multiple Cloud with a Single BOSH Deploym...VMware Tanzu

Docker 進階實務班Philip Zheng

Programming OSGi with Eclipse - Jeﬀ McAﬀer, Eclipse Architect, IBM & Tom Wats...mfrancis

給 RD 的 Kubernetes 初體驗 (EKS version)William Yeh

Production FS: Adapt or die - Claudia Beresford & Tiago ScolarParis Container Day

The DevOps PaaS Infusion - May meetupNorm Leitman

Heroku Dockerの使い所Yusuke Kon

Zabbix conference2015 daisukeikedaDaisuke Ikeda

Netflix Nebula - Gradle Summit 2014Justin Ryan

Cloud Foundry Day in Tokyo Lightning Talk - Cloud Foundry over the ProxyMaki Toshio

Using Containers for Continuous Integration and Continuous DeliveryCarlos Sanchez

Git ops & Continuous Infrastructure with terra*Haggai Philip Zagury

Cloud Foundry Introduction for CF Meetup Tokyo March 2016Tomohiro Ichimura

Bringing Some Spatial Love to your Application with OpenShift - Mongo Berlin ...OpenShift Origin

Lessons Learned: Using Concourse In ProductionShingo Omura

利用K8S實現高可靠應用inwin stack

SF Gradle Meetup - Netflix OSSJustin Ryan

Apache Bigtop: a crash course in deploying a Hadoop bigdata management platformrhatr

You Don't Have to Start Over! A Practical Guide for Adopting Docker in the En...Docker, Inc.

猿でもわかる HelmTsuyoshi Miyake

Docker 導入：障礙與對策William Yeh

スクラムマスターのためのアジャイルの考え方と技術的課題Yoshida Hiroki

Qcon beijing 2010Vonbo

Weitere ähnliche Inhalte

Was ist angesagt?

Docker 進階實務班Philip Zheng

Programming OSGi with Eclipse - Jeﬀ McAﬀer, Eclipse Architect, IBM & Tom Wats...mfrancis

給 RD 的 Kubernetes 初體驗 (EKS version)William Yeh

Production FS: Adapt or die - Claudia Beresford & Tiago ScolarParis Container Day

The DevOps PaaS Infusion - May meetupNorm Leitman

Heroku Dockerの使い所Yusuke Kon

Zabbix conference2015 daisukeikedaDaisuke Ikeda

Netflix Nebula - Gradle Summit 2014Justin Ryan

Cloud Foundry Day in Tokyo Lightning Talk - Cloud Foundry over the ProxyMaki Toshio

Using Containers for Continuous Integration and Continuous DeliveryCarlos Sanchez

Git ops & Continuous Infrastructure with terra*Haggai Philip Zagury

Cloud Foundry Introduction for CF Meetup Tokyo March 2016Tomohiro Ichimura

Bringing Some Spatial Love to your Application with OpenShift - Mongo Berlin ...OpenShift Origin

Lessons Learned: Using Concourse In ProductionShingo Omura

利用K8S實現高可靠應用inwin stack

SF Gradle Meetup - Netflix OSSJustin Ryan

Apache Bigtop: a crash course in deploying a Hadoop bigdata management platformrhatr

You Don't Have to Start Over! A Practical Guide for Adopting Docker in the En...Docker, Inc.

猿でもわかる HelmTsuyoshi Miyake

Docker 導入：障礙與對策William Yeh

Was ist angesagt? (20)

Docker 進階實務班

Programming OSGi with Eclipse - Jeﬀ McAﬀer, Eclipse Architect, IBM & Tom Wats...

給 RD 的 Kubernetes 初體驗 (EKS version)

Production FS: Adapt or die - Claudia Beresford & Tiago Scolar

The DevOps PaaS Infusion - May meetup

Heroku Dockerの使い所

Zabbix conference2015 daisukeikeda

Netflix Nebula - Gradle Summit 2014

Cloud Foundry Day in Tokyo Lightning Talk - Cloud Foundry over the Proxy

Using Containers for Continuous Integration and Continuous Delivery

Git ops & Continuous Infrastructure with terra*

Cloud Foundry Introduction for CF Meetup Tokyo March 2016

Bringing Some Spatial Love to your Application with OpenShift - Mongo Berlin ...

Lessons Learned: Using Concourse In Production

利用K8S實現高可靠應用

SF Gradle Meetup - Netflix OSS

Apache Bigtop: a crash course in deploying a Hadoop bigdata management platform

You Don't Have to Start Over! A Practical Guide for Adopting Docker in the En...

猿でもわかる Helm

Docker 導入：障礙與對策

Ähnlich wie デザインシステムの海で3年間もがいてみて

スクラムマスターのためのアジャイルの考え方と技術的課題Yoshida Hiroki

Qcon beijing 2010Vonbo

Scaling agileAskhat Urazbaev

淺談 Startup 公司的軟體開發流程 v2Wen-Tien Chang

Agile startup company management and operationJiang Zhu

Node.js 101FITC

FITC - Bootstrap UnleashedRami Sayar

Cycling for noobsSteve Lee

Prototyping for responsive web design mrscammels

Getting started with Vue.js - CodeMash 2020Burton Smith

Why Your Site is Slow: Performance Answers for Your ClientsPantheon

High Performance Web DesignKoji Ishimoto

Play framework 2 : Peter HiltonJAX London

Ready? Bootstrap! Go! (SOTR 2013) copyGuust Nieuwenhuis

Ship It ! with Ruby/ Rails EcosystemYi-Ting Cheng

Topsy Turvy DesignRich Quick

PSU Web 2014: UX and Design Tools That Will Improve Your ProductivityJennifer Aldrich

Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)Guust Nieuwenhuis

既存のフローからアップデートするアジャイル・デザインフローYusuke Goto

Morden F2E Education - Think of Progressive Web AppsCaesar Chi

Ähnlich wie デザインシステムの海で3年間もがいてみて (20)

スクラムマスターのためのアジャイルの考え方と技術的課題

Qcon beijing 2010

Scaling agile

淺談 Startup 公司的軟體開發流程 v2

Agile startup company management and operation

Node.js 101

FITC - Bootstrap Unleashed

Cycling for noobs

Prototyping for responsive web design

Getting started with Vue.js - CodeMash 2020

Why Your Site is Slow: Performance Answers for Your Clients

High Performance Web Design

Play framework 2 : Peter Hilton

Ready? Bootstrap! Go! (SOTR 2013) copy

Ship It ! with Ruby/ Rails Ecosystem

Topsy Turvy Design

PSU Web 2014: UX and Design Tools That Will Improve Your Productivity

Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)

既存のフローからアップデートするアジャイル・デザインフロー

Morden F2E Education - Think of Progressive Web Apps

Mehr von Yahoo!デベロッパーネットワーク

ゼロから始める転移学習Yahoo!デベロッパーネットワーク

継続的なモデルモニタリングを実現するKubernetes OperatorYahoo!デベロッパーネットワーク

ヤフーでは開発迅速性と品質のバランスをどう取ってるかYahoo!デベロッパーネットワーク

オンプレML基盤on Kubernetes パネルディスカッションYahoo!デベロッパーネットワーク

LakeTahoeYahoo!デベロッパーネットワーク

オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜Yahoo!デベロッパーネットワーク

Persistent-memory-native Database High-availability FeatureYahoo!デベロッパーネットワーク

データの価値を最大化させるためのデザイン～データビジュアライゼーションの方法～ #devsumi 17-E-2Yahoo!デベロッパーネットワーク

eコマースと実店舗の相互利益を目指したデザイン #yjtcYahoo!デベロッパーネットワーク

ヤフーを支えるセキュリティ～サイバー攻撃を防ぐエンジニアの仕事とは～ #yjtcYahoo!デベロッパーネットワーク

Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtcYahoo!デベロッパーネットワーク

ビッグデータから人々のムードを捉える #yjtcYahoo!デベロッパーネットワーク

サイエンス領域におけるMLOpsの取り組み #yjtcYahoo!デベロッパーネットワーク

ヤフーのAIプラットフォーム紹介～AIテックカンパニーを支えるデータ基盤～ #yjtcYahoo!デベロッパーネットワーク

Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtcYahoo!デベロッパーネットワーク

新技術を使った次世代の商品の見せ方～ヤフオク!のマルチビュー機能～ #yjtcYahoo!デベロッパーネットワーク

PC版Yahoo!メールリニューアル～サービスのUI/UX統合と改善プロセス～ #yjtcYahoo!デベロッパーネットワーク

モブデザインによる多職種チームのコミュニケーション改善 #yjtcYahoo!デベロッパーネットワーク

「新しいおうち探し」のためのAIアシスト検索 #yjtcYahoo!デベロッパーネットワーク

ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtcYahoo!デベロッパーネットワーク

Mehr von Yahoo!デベロッパーネットワーク (20)

ゼロから始める転移学習

継続的なモデルモニタリングを実現するKubernetes Operator

ヤフーでは開発迅速性と品質のバランスをどう取ってるか

オンプレML基盤on Kubernetes パネルディスカッション

LakeTahoe

オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜

Persistent-memory-native Database High-availability Feature

データの価値を最大化させるためのデザイン～データビジュアライゼーションの方法～ #devsumi 17-E-2

eコマースと実店舗の相互利益を目指したデザイン #yjtc

ヤフーを支えるセキュリティ～サイバー攻撃を防ぐエンジニアの仕事とは～ #yjtc

Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc

ビッグデータから人々のムードを捉える #yjtc

サイエンス領域におけるMLOpsの取り組み #yjtc

ヤフーのAIプラットフォーム紹介～AIテックカンパニーを支えるデータ基盤～ #yjtc

Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc

新技術を使った次世代の商品の見せ方～ヤフオク!のマルチビュー機能～ #yjtc

PC版Yahoo!メールリニューアル～サービスのUI/UX統合と改善プロセス～ #yjtc

モブデザインによる多職種チームのコミュニケーション改善 #yjtc

「新しいおうち探し」のためのAIアシスト検索 #yjtc

ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc

Kürzlich hochgeladen

Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies

From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software

08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls

Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal

Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer

A Call to Action for Generative AI in 2024Results

What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco

Scaling API-first – The story of a global engineering organizationRadu Cotescu

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge

Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun

Slack Application Development 101 Slidespraypatel2

Real Time Object Detection Using Open CVKhem

CNv6 Instructor Chapter 6 Quality of Servicegiselly40

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong

The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia

🐬 The future of MySQL is Postgres 🐘RTylerCroy

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

GenCyber Cyber Security Day PresentationMichael W. Hawkins

Kürzlich hochgeladen (20)

Factors to Consider When Choosing Accounts Payable Services Providers.pptx

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

08448380779 Call Girls In Friends Colony Women Seeking Men

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

Tata AIG General Insurance Company - Insurer Innovation Award 2024

A Call to Action for Generative AI in 2024

What Are The Drone Anti-jamming Systems Technology?

Scaling API-first – The story of a global engineering organization

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf

Powerful Google developer tools for immediate impact! (2023-24 C)

Slack Application Development 101 Slides

Real Time Object Detection Using Open CV

CNv6 Instructor Chapter 6 Quality of Service

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

2024: Domino Containers - The Next Step. News from the Domino Container commu...

The Codex of Business Writing Software for Real-World Solutions 2.pptx

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...

🐬 The future of MySQL is Postgres 🐘

Handwritten Text Recognition for manuscripts and early printed texts

GenCyber Cyber Security Day Presentation

デザインシステムの海で3年間もがいてみて

2. About Me Kyohei Morimoto  (@basara669)  Frontend Engineer • •

6. ABOUT RIFF

7. FEATURES ABOUT RIFF • Web • GitHub • Sketch • 1 • CI • TextLint VisualRegressionTest

8. TEAM ABOUT RIFF • 2014 10 Bootstrap • Web • •

9. 😇

10. THE PROBLEMS 1 2 3  

11. THE PROBLEMS 1 2 3  

12.

13. UI 😥

14.

15. 😇 😇 😇

16. https://speakerdeck.com/studiomohawk/design- system-as-a-product-at-frontrend-vol-dot-8

17. - Yuya Saito @cssradar-

18. LIBRARY VS DESIGN SYSTEM LIBRARY DESIGN SYSTEM

19.

20. SUMMARY 1 2 3  

21. SUMMARY 1 2 3  

22. THE PROBLEM IS ..

23.

24. https://japan.cnet.com/article/35096064/

25.

26.

27. 😎😠

28.

29. …

30. THE PROBLEM IS ..   - vs   - … Web  

31. SUMMARY 1 2 3  

32. SUMMARY 1 2 3  

33. 🤔

34. https://speakerdeck.com/studiomohawk/design- system-as-a-product-at-frontrend-vol-dot-8

35. https://medium.com/eightshapes-llc/team-models-for- scaling-a-design-system-2cf9d03be6a0

36. DESIGN SYSTEM TEAM MODELS •1 • Bootstrap • • • • • MaterialDesign

37. PROS AND CONS   PROS CONS    

38.

39. PROBLEM OF FEDERATED MODEL   - OSS 3   -   - or issue

40. 3

41. WRAP UP    

42. Kyohei Morimoto @basara669 THANK YOU

43. APPENDIX

44. DESIGN SYSTEM AS A PRODUCT Bonfire Design @cssradar Design System as a Product   https://d.pr/n/DiJeqa @hiloki 🙏