Design-system e componentes reutilizáveis com React
Qual é o icone certo para "compartilhar"?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6686448/Screenshot_2019-10-22_at_14.46.58.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6686459/Screenshot_2019-10-22_at_14.48.11.jpg)
Android Material Design
iOS
![](https://static.boredpanda.com/blog/wp-content/uploads/2015/11/poor-design-decisions-34__605.jpg)
We all think about the world in different ways...
which leads to inconsistent user interfaces.
@emmawedekind
Todos pensamos no mundo de maneiras diferentes ...
o que leva a interfaces de usuário inconsistentes.
Design system?
Design System
Design Language
Livraria de componentes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6675308/Screenshot_2019-10-19_at_19.26.42.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6675307/Screenshot_2019-10-19_at_19.25.47.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6675354/Screenshot_2019-10-19_at_20.01.44.jpg)
O que tem no design-system?
- Regras
- Componentes
- Estados, UX
Eu preciso de um design system?
Eu preciso de um design system?
Como criar um design system?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6677248/Screenshot_2019-10-20_at_16.12.20.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6677280/Screenshot_2019-10-20_at_16.23.39.jpg)
Como criar um design system?
Como implementar um style guide?
1.Reutilizavel
Descobertabilidade (discoverability)
Documentação
Isolamento
Organização
Docz
Storybook
DOCZ
Design legal 💅
MDX support: muito simples de escrever documentação
Legal para documentação, menos como "playground"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6675408/Screenshot_2019-10-19_at_21.21.41.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6675407/Screenshot_2019-10-19_at_21.19.46.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6675396/Screenshot_2019-10-19_at_21.08.42.jpg)
Storybook
storybook
Mais popular, time e comunidade grande
Playground totalmente isolado para desenvolver os componentes
UI nao muito flexivel,
pessimo para documentaçao (mas ta chegando!)
1.Reutilizavel
Descobertabilidade (discoverability)
Documentação
Isolamento
Organização
![](https://i.imgflip.com/3dvmoc.jpg)
![](https://s3.amazonaws.com/www-inside-design/uploads/2017/12/dsystems.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6682339/Screenshot_2019-10-21_at_18.30.18.jpg)
atoms/Heading.js
atoms/Text.js
atoms/Button.js
atoms/Icon.js
atoms/Image.js
🤔
![](https://s3.amazonaws.com/www-inside-design/uploads/2017/12/dsystems.png)
PRIMITIVOs
Componentes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6682507/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6682509/pasted-from-clipboard.png)
PRimitivOS
Componentes basicos para criar outros componentes.
Todos os componentes começam com um primitivo.
fonte: https://rebassjs.org/
fonte: https://reakit.io/
Organização
=
consistência
Qualquer organização de componentes que você escolhe, o importante é a consistência.
Composição dos componentes
Observe o design!
Começa simples.
Reorganiza depois (refactoring).
"Refactor-driven development"
Make it work, then make it better.
CSS Reset
Evitar propriedades css "side-effect"
ul[class], ol[class] { padding: 0; }
body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; }
![](https://media3.giphy.com/media/5nsiFjdgylfK3csZ5T/giphy.gif)
CSS Reset
Atomic CSS,
Componente primitivo <Box />
Evitar propriedades css "side-effect"
const Header = props => <header style={{ marginBottom: "30px", padding: "0 30px" }} > <div className="inner"> <Link to="/"> <Logo className="logo" /> </Link> <Nav /> </div> </header>
👎
<body> <Box marginBottom="30px" padding="0 30px"> <Header /> </Box> <Content> // some content </Content> </body>
🤙
Menos encaixamento (nesting) possivel
Deixa o controle no usuario (nesse caso, o desenvolvedor) do ordem dos componentes
"Single Element pattern"
padrão de elemento unico
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6687649/Screenshot_2019-10-22_at_20.03.24.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6686171/Screenshot_2019-10-22_at_13.45.33.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6686143/Screenshot_2019-10-22_at_13.39.45.jpg)
Deixa as props passar pelo componente filho
className e style props permitem uso de customizaçao de estilo
"Props leaks, escape hatch"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6687646/Screenshot_2019-10-22_at_20.02.50.jpg)
2.Constraint based design
Design tokens
System UI Theme Specification
Theming
Variaveis do style-guide para usar no codigo
design tokens
Standarizaçao da organizaçao dos design tokens.
System UI Theme Specification
Livraria CSS-in-JS:
Styled Components, Emotion e o ThemeProvider
ThemING
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6675373/Screenshot_2019-10-19_at_20.30.30.jpg)
Livraria CSS-in-JS:
Styled Components, Emotion e o ThemeProvider
Styled-System, Xstyled, ThemeUI:
Personalizaçao do estilo controlado.
ThemING
![](https://s3.amazonaws.com/media-p.slid.es/uploads/51081/images/6687359/WhatsApp_Image_2019-10-14_at_17.37.40.jpeg)
merci :)
Questions ?
@adriendenat
adriendenat.com
Ressources
- Brent Jackson para Styled-System, Rebass, etc.
- Diego Haz para Reakit
- Emma Wedekind para Building Design Systems With React
- Awesome Design Systems, lista de design systems
- Atlaskit: um dos design system mais avançado do mercado
Design-system e componentes reutilizáveis com React
By Adrien Denat
Design-system e componentes reutilizáveis com React
- 866