How to build Design System?
1 like474 views
Build Design System using react-sketchapp.
How to build Design System?
- 1. How to build Design System ? 2017
- 2. How to build Design System ?
- 7. Atomic design Brad Frosts Atomic Design methodology, 2013 http://atomicdesign.bradfrost.com/
- 8. ATOM
- 9. MOLECULES
- 10. ORGANISMS
- 11. TEMPLATES
- 12. PAGE
- 13. Components
- 14. Design System
- 15. A design system is a collection of documentation on principles and best practices, that helps guide a team to build digital products. They are often embodied in UI libraries and pattern libraries, but can extend to include guides on other areas such as 'Voice and Tone'. https://github.com/alexpate/awesome-design-systems
- 16. Components Contains coded patterns and examples. Voice & Tone Provides guidance on how language should be used. (Identify, Look and feel, Tone and voice) Designers Kit Includes a Sketch/Photoshop/Figma/etc. 鍖le for designers.
- 19. Components These React components will help you build Atlassian cloud applications and add-ons.
- 20. Agile experience Reusable components speed up features and deliverables. Product is adaptable and maintainable.
- 22. Design System helps bridge the gap between designers and engineers working on design systems at scale https://airbnb.design/painting-with-code/ ろ 企訖 襷 , 螳覦 螻 蠍磯 蠍壱&り 煙 . 譬 伎 ろ 蟲豢 覦覯れ 郁規 螻 朱, airbnb react-sketchapp 蠏 譴 企.
- 23. Generate code from design Style Code Design Product>>
- 25. Style Code Product>> Sketch Design once. Reuse anywhere. Update easily.油 With Symbols, Sketch takes the pain out of working with repeated design elements from icons to avatars. https://www.sketchapp.com
- 26. Product>> react-sketchapp an open-source library that allows you to write React components that render to Sketch documents. (tailor-made for design systems) https://github.com/airbnb/react-sketchapp
- 27. Seamless integration with real data
- 30. Source of Truth !
- 31. Many hard problems are best solved when they are addressed backward. Charlie Munger, Vice-Chairman of Berkshire Hathaway 襷 企れ 覓語れ 覦襦 螳 襴蠍磯 . 讌蠍蟾讌 蟲 貊襯 燕 螳覦螳 蠍磯ゼ 覦讌襷, 覓語襯 覦襦 願屋 蟆企.
- 32. https://stateofjs.com/2017/front-end/results/ React is still the dominant player. Vue is making big gains on the back of Angular's diminishing popularity.
- 33. The React Component composes the screen with a combination of parts having props (propagation) and state (state).
- 34. react-sketchapp - API Reference http://airbnb.io/react-sketchapp/docs/API.html
- 37. . README.md package.json src manifest.json my-command.js skpm - Sketch Plugin Manager A utility to build and publish sketch plugins https://github.com/skpm/skpm
- 38. . README.md package.json src manifest.json my-command.js
- 39. . README.md package.json src manifest.json my-command.js
- 40. . README.md package.json basic-hello.sketchplugin src manifest.json my-command.js
- 41. Style guide page. Screen page.
- 43. ./src components CommentRow.js HTMLView.js Header.js Icons.js StoryRow.js main.js manifest.json screens CommentScreen.js PageScreen.js StoryScreen.js styles index.js utils constants.js fetchData.js ./src components CommentRow.js HTMLView.js Header.js Icons.js StoryRow.js App.js screens CommentScreen.js PageScreen.js StoryScreen.js styles index.js utils constants.js fetchData.js react-sketchapp design system react-native mobile application ろ殊 貊 Design System 螻 Product 螳 狩襦 伎 . 蠏 貊 伎 るゴ朱 蟲譟 豌企 狩襦 .
- 44. Who should implement Design System? Design System 螳 蟲豢伎 螳? 螳覦 豐蠍一 蟆曙 蟲豢螻 °る, 危 企螳 讌 貊 蟆 伎企. 讌襷 れ朱, 朱襴螳 蟆曙 讀 螻手 覲伎願鍵 .
- 45. Cons. Learning cost of designers. Di鍖cult to draw UI intuitively. 貊螳 企給り鍵覲企る 蟆曙 危願 企給. 蠏碁 螳覦螳 襾殊 蟆所骸 蟲譟磯ゼ ′ 蟆企. 貊襯 燕伎 覃伎 蠏碁Υ 蠍磯覓語 讌蟯朱 蠏碁る螳 . 讌蟯煙 Design System 覈 .
- 46. SVG !!!!
- 47. Were investing in code as a design tool. Moving closer to working with assets that dont only include layout and design, but also logic and data. This helps bridge the gap between engineers and designers, thus reducing the need for design specsor redlinesand the steps between vision and reality. Alex Schleifer, head of design at Airbnb 貊襯 蟲襦 . 讌 伎螻 訖 襦讌螻 一危磯ゼ 螻ろ 一 襷 蟆企. 企ゼ 牛 企 螳覦螳 螳蠏轟 譴願, 覿 ろ 覓語 譟伎煙 譴 伎 譬 る り蟆 .