Build Design System using react-sketchapp.

1. How to build Design System ?
2017

2. How to build Design System ?

7. Atomic design
Brad Frost’s 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. file for designers.

17. https://material.io/guidelines
Material Design

18. https://atlassian.design
Atlassian Design

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.

21. Building Design System

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

24. Design
Style
Code
Product>>
Generate Design from code

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

28. Layout with flexbox

29. Automatic internationalization

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.

42. https://github.com/NewsPlatform/HackerNews-sketch

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.
Difficult to draw UI intuitively.
코드가 어렵다기보다는 동작하는 환경의 이해가 더 어렵다. 그래서 개발자가 먼저 환경과 구조를 잡아야 할 것이다.
코드를 작성해야 화면을 그릴수 있기때문에 직관적으로 그려나갈 수는 없다. 직관성은 Design System 의 목적이 아닐 수 있다.

46. SVG !!!!

47. We’re investing in code as a design tool.
Moving closer to working with assets that
don’t 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 specs–or
redlines–and the steps between vision and
reality. Alex Schleifer, head of design at Airbnb
코드를 디자인 도구로 사용한다. 단지 레이아웃과 디자인 뿐 아니라 로직과 데이터를 고려한 디자인 자산을 만드는 것이다.
이를 통해 디자이너와 개발자간의 간극을 줄이고, 더불어 디자인 스펙 문서의 의존성을 줄여 이상을 좀더 현실로 다가서게 한다.

48. Thank you.
John Kim
yohany@gmail.com
https://www.facebook.com/JohnKim0331