guias-de-estilo-diseño-de-sistemas.mdx 22.3 KB
Newer Older
Sergio's avatar
Sergio committed
1 2 3
---
title: 'Todo lo que se acerca de guías de estilo, Diseño de sistemas, y Librerías de componentes'
publishedAt: '2020-05-20'
Sergio's avatar
Sergio committed
4
summary: 'Estudio en profundidad de todo lo que he aprendido en el último año creando guías de estilo, diseñando sistemas, librerías de componentes y sus mejores prácticas.'
Sergio's avatar
Sergio committed
5
image: '/static/images/guias-de-estilo-diseño-de-sistemas/banner.jpg'
6 7
author: 'Lee Robinson'
originalLink: 'https://leerob.io/blog/style-guides-component-libraries-design-systems'
Sergio's avatar
Sergio committed
8 9 10 11
---

[![Ant Design Component Library](/static/images/guias-de-estilo-diseño-de-sistemas/component-library.png)](https://ant.design/)

12
Durante este último año, he invertido la mayor parte de mi tiempo en desarrollo front-end y diseño. Cuando comencé en mi nuevo puesto en Hy-Vee, identifiqué la necesidad de una librería de componentes, así que la creé. Desde entonces, he aprendido muchísimo sobre guías de estilo, diseño de sistemas, librerías de componentes y sus mejores prácticas. Este post profundiza en detalle todo lo que he ido aprendiendo en este último año.
Sergio's avatar
Sergio committed
13

14
## Tabla de Contenidos
Sergio's avatar
Sergio committed
15

16 17 18 19 20 21 22 23
1.  [¿Por qué Debería Importarte?](#por-que-deberia-importarte)
2.  [¿Qué Es una Guía de Estilo?](#que-es-una-guia-de-estilo)
3.  [¿Qué Es una Librería de Componentes?](#que-es-una-libreria-de-componentes)
4.  [¿Qué Es un Diseño de Sistema?](#que-es-un-diseno-de-sistema)
5.  [¿Por Dónde Deberías Empezar?](#por-donde-deberias-empezar)
6.  [Desarrollando un Diseño de Sistema](#desarrollando-un-diseno-de-sistema)
7.  [Conclusión](#conclusion)
8.  [Recursos](#recursos)
Sergio's avatar
Sergio committed
24

25
## ¿Por Qué Debería Importarte?
Sergio's avatar
Sergio committed
26

27
Todo sitio web empieza de forma simple. A lo mejor hay una página con cierta cantidad de piezas. Tiene unas intenciones modestas.
Sergio's avatar
Sergio committed
28 29 30

[![Website Mockup](/static/images/guias-de-estilo-diseño-de-sistemas/website.png)](https://refactoringui.com/)

31
Pero, poco a poco, comienza a escalar y hacerse más grande.
Sergio's avatar
Sergio committed
32

33
Se añaden más páginas y se desarrollan nuevas funcionalidades. Se puede dar el caso de que múltiples equipos participen en el desarrollo de una sección específica del sitio web. Podría ser que, al mismo tiempo, desarrolles para dispositivos móviles.
Sergio's avatar
Sergio committed
34

35
De pronto comienzas a notar que los botones de una determinada parte de tu página web son algo diferentes que en el resto. Un equipo decide desarrollar una función que otro equipo (sin saberlo) ya ha completado. Los fallos de comunicación existen y la consistencia se pierde.
Sergio's avatar
Sergio committed
36

37
¿Se trata de un problema que se puede prevenir? Por supuesto. Entonces, ¿Por qué ocurre una y otra vez? **Si no piensas en el diseño y en el proceso de desarrollo de forma previa, cuanto más grande se haga tu proyecto, más problemas vas a encontrar.**
Sergio's avatar
Sergio committed
38

39
Para prevenir este tipo de problemas, o solucionar la falta de consistencia en tus productos, necesitas tres elementos:
Sergio's avatar
Sergio committed
40

41 42 43
- **Guía de Estilo**
- **Librería de Componentes**
- **Diseño de sistema**
Sergio's avatar
Sergio committed
44

45
No te preocupes si aún no tienes ni idea de lo que te estoy hablando. Al final de este artículo, habrás consumado como mínimo un año de prueba y error, investigación y desarrollo.
Sergio's avatar
Sergio committed
46

47
## ¿Qué Es una Guía de Estilo?
Sergio's avatar
Sergio committed
48 49 50

[![Style Guide](/static/images/guias-de-estilo-diseño-de-sistemas/style-guide.png)](https://dribbble.com/shots/6161977-BlueVine-Product-Style-Guide)

51
Una **guía de estilo** es un conjunto de reglas sobre cómo debe mostrarse tu marca. Esto es tanto visual (diseño e imágenes) como escrito (voz y tono).
Sergio's avatar
Sergio committed
52

53
El propósito de una guía de estilo es **permitir a múltiples colaboradores crear un contenido claro que represente de forma coherente la marca**. Casi todas las grandes marcas tienen una guía de estilo, aunque no todas son públicas.
Sergio's avatar
Sergio committed
54

55
## ¿Qué Es una Librería de Componentes?
Sergio's avatar
Sergio committed
56 57 58

[![Component Library](/static/images/guias-de-estilo-diseño-de-sistemas/components.png)](https://eva.design/)

59 60
Una **librería de componentes** es la viva imagen de tu guía de estilo. Se trata de un conjunto compartido de componentes que forman la interfaz de usuario. Los desarrolladores pueden consumir este recurso y construir aplicaciones que reflejen tu marca.
Algunos beneficios notables son:
Sergio's avatar
Sergio committed
61

62 63 64 65
- Tener una librería de componentes supone tener menos código propio.
- Puesto que todo se encuentra centralizado, puedes asegurarte de que todos los componentes cumplen con los requisitos de accesibilidad.
- Los componentes se vuelven más robustos si cuentan con múltiples colaboradores que envían soluciones para errores, mejoras y todo ello desde un mismo lugar.
- A menor duplicación en el código mayor capacidad para enviar nuevos productos y reescribir código heredado.
Sergio's avatar
Sergio committed
66

67
## ¿Qué Es un Diseño de Sistema?
Sergio's avatar
Sergio committed
68 69

Un **diseño de sistema** es un completo set de estándares, documentación y normas a lo largo de los componentes para lograr esos estándares. Se trata de **la unión entre tu guía de estilo y tu librería de componentes**. Uno de los diseños de sistemas más populares es Google [Material Design](https://material.io/design/).
Sergio's avatar
Sergio committed
70 71 72

[![Design System](/static/images/guias-de-estilo-diseño-de-sistemas/design-system.png)](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/)

73
Un diseño de sistema debe contener:
Sergio's avatar
Sergio committed
74

75 76 77 78
- **Contenido** -- El lenguaje para diseñar una experiencia de producto meditada y cuidada.
- **Diseño** -- La parte visual del diseño de sistema.
- **Componentes** -- Los ladrillos de la casa que te permiten desarrollar nuevos productos y funcionalidades.
- **Patrones** -- Piezas individuales que te permiten crear una experiencia significativa del producto para tus usuarios.
Sergio's avatar
Sergio committed
79

80
## ¿Por Dónde Deberías Empezar?
Sergio's avatar
Sergio committed
81

82
Dependiendo de el estado de tu empresa/producto, deberías de considerar diferentes puntos de partida. A continuación, te muestro un esquema antes de entrar en detalle.
Sergio's avatar
Sergio committed
83

84 85 86 87 88 89 90 91 92 93
- Crear un inventario para patrones de diseño existentes.
- Establecer las normas del diseño y comenzar una guía de estilo.
- Definir los tokens del diseño.
- Crear o encontrar un set de iconos.
- Escoger un soporte para lenguajes de programación/frameworks utilizados.
- Evaluar Monorepo vs. single package.
- Evaluar CSS/Sass vs. CSS-in-JS.
- Crear una librería de componentes.
- Escoger una plataforma para la documentación.
- Escribir la documentación del diseño de sistema.
Sergio's avatar
Sergio committed
94

95
## Desarrollando un Diseño de Sistema
Sergio's avatar
Sergio committed
96

97
### Crear un inventario para patrones de diseño existentes.
Sergio's avatar
Sergio committed
98

Sergio's avatar
Sergio committed
99
A menos que estés empezando de cero, necesitarás identificar todos los [patrones de diseño](https://pttrns.com/applications/86) que se encuentren en uso dentro de tu interfaz y documentar todas las inconsistencias.
100 101 102
El objetivo debe ser tener la misma experiencia de usuario, independientemente de la parte del producto en la que se encuentre.
Empieza a documentar y revisar todo esto con ayuda de tu equipo e identifica los patrones de interacción que más os gustan.
De esta forma podrás comenzar a dibujar un esquema visual con las piezas que necesitará tu guía de estilo.
Sergio's avatar
Sergio committed
103

104
### Establecer las normas del diseño y comenzar una guía de estilo.
Sergio's avatar
Sergio committed
105

106
Es hora de traducir nuestros descubrimientos en los inicios de una guía de estilo. Para ello puedes utilizar herramientas como:
Sergio's avatar
Sergio committed
107 108 109 110 111 112

- [Sketch](https://www.sketch.com/)
- [Figma](https://www.figma.com/)
- [Framer](https://www.framer.com/)
- [Abobe XD](https://www.adobe.com/products/xd.html)

113
Mi recomendación personal sería **Sketch**, pero es decisión de tu equipo y empresa. Asegurate de entender [las mejores prácticas sobre los símbolos de Sketch](https://novemberfive.co/blog/symbols-guidelines-in-sketch/) y cuando utilizar [símbolos anidados](https://www.sketch.com/docs/symbols/nested-symbols/).
Sergio's avatar
Sergio committed
114

115
### Definir los tokens del diseño.
Sergio's avatar
Sergio committed
116

117
[![Tokens de Diseño](/static/images/guias-de-estilo-diseño-de-sistemas/design-tokens.png)](https://www.antforfigma.com/)
Sergio's avatar
Sergio committed
118

119
> Los tokens de diseño (Design Tokens) son los átomos de diseño visual del sistema de diseño --- específicamente, son entidades nombradas que almacenan atributos del diseño visual. Los usamos en lugar de los valores codificados (como por ejemplo los valores hexadecimales par el color o los valores de los píxeles para el espaciado). Permiten mantener un sistema visual escalable y consistente para el desarrollo de la interfaz de usuario.
Sergio's avatar
Sergio committed
120

121
Estos Tokens incluyen elementos como:
Sergio's avatar
Sergio committed
122

123 124 125 126 127
- [Colores](https://colors.eva.design/) (text, backgrounds, borders)
- [Tipografías](https://fonts.google.com/)
- [Tamaños de tipografías](http://spencermortensen.com/articles/typographic-scale/)
- [Valores de espaciado](https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632)
- [Sombreados](https://material.io/design/environment/light-shadows.html)
Sergio's avatar
Sergio committed
128

129
Por ejemplo, echa un vistazo al [Sistema de diseño de Vercel](https://vercel.com/design).
Sergio's avatar
Sergio committed
130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153

```css
--geist-foreground: #000;
--geist-background: #fff;
--accents-1: #fafafa;
--accents-2: #eaeaea;
--accents-3: #999999;
--accents-4: #888888;
--accents-5: #666666;
--accents-6: #444444;
--accents-7: #333333;
--accents-8: #111111;
--geist-success: #0070f3;
--geist-error: #ee0000;
--geist-warning: #f5a623;
--dropdown-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.02);
--dropdown-triangle-stroke: #fff;
--scroller-start: var(--geist-background);
--scroller-end: rgba(255, 255, 255, 0);
--shadow-small: 0 5px 10px rgba(0, 0, 0, 0.12);
--shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
--shadow-large: 0 30px 60px rgba(0, 0, 0, 0.12);
--portal-opacity: 0.25;
```
Sergio's avatar
Sergio committed
154

155
Hoy por hoy, podemos decir que existe un lenguaje que comparten diseñadores y programadores.
Sergio's avatar
Sergio committed
156

157
### Crear o encontrar un set de iconos.
Sergio's avatar
Sergio committed
158

159
[![Set de iconos](/static/images/guias-de-estilo-diseño-de-sistemas/icons.png)](https://dribbble.com/shots/6632346-Zoom-Redesign-Icon-Library)
Sergio's avatar
Sergio committed
160

161
Si ya dispones de iconos, necesitarás determinar con cuales quieres quedarte. En muchos casos carece de sentido crear tus propios iconos, esto depende en gran medida, del tamaño y las prioridades de tu compañía. Cuando no necesitas crear tus propios iconos lo mejor es utilizar una librería de iconos de código abierto. Aquí te dejo algunos ejemplos:
Sergio's avatar
Sergio committed
162 163 164 165 166 167 168 169 170

- [Font Awesome](https://fontawesome.com)
- [Icons8](https://icons8.com/)
- [Material UI Icons](https://material-ui.com/components/icons/)
- [Eva Icons](https://akveo.github.io/eva-icons/)
- [Feather Icons](https://feathericons.com)
- [Styled Icons](https://styled-icons.js.org/)
- [Ikonate](https://ikonate.com/)

171
Independientemente de si creas tu set de iconos o utilizas uno ya hecho, tienes que normalizar y estandarizar patrones. También es de utilidad conocer quienes son los usuarios finales a los que va destinado tu set de iconos - diseñadores, desarrolladores o quizás un equipo de marketing.
Sergio's avatar
Sergio committed
172

173
Usando el formato de imagen SVG, puedes hacer que tu librería de iconos sea un recurso único. El proceso de uso puede ser similar al siguiente:
Sergio's avatar
Sergio committed
174

175 176 177 178 179
1.  Los diseñadores crean/proveen de un icono SVG a modo de materia prima.
2.  Optimiza y comprime el archivo SVG utilizando [SVGO](https://github.com/svg/svgo/).
3.  Automáticamente crea componentes de React utilizando [SVGR](https://github.com/smooth-code/svgr) para los desarrolladores.
4.  Exporta en formato PNG y JPEG a diferentes resoluciones para el equipo de marketing.
5.  Convierte los archivos SVG en un [Paquete de fuentes tipográficas](https://www.npmjs.com/package/icon-font-generator) para que pueda ser utilizado por aplicaciones móviles.
Sergio's avatar
Sergio committed
180

181
### Escoger un soporte para lenguajes de programación/frameworks utilizados.
Sergio's avatar
Sergio committed
182

183 184
¿Qué lenguajes o frameworks estas utilizando actualmente? ¿Cuales debería emplear la librería de componentes?
Es importante pensar en esto de antemano para que puedas estructurar adecuadamente tu librería.
Sergio's avatar
Sergio committed
185

Sergio's avatar
Sergio committed
186
Si tienes una aplicación que utiliza etiquetas en vez de [ES Modules](https://flaviocopes.com/es-modules/), tendrás que configurar toda tu librería de componentes para que pueda ser exportada en un solo archivo de distribución. Por ejemplo, una aplicación que utiliza JavaScript de forma plana (Vanilla) va a necesitar algo similar a esto en su archivo HTML.
Sergio's avatar
Sergio committed
187 188 189 190 191

```html
<script src="/js/component-library.min.js"></script>
```

192 193
Para llegar a este mismo punto, también puedes utilizar [Webpack](https://webpack.js.org/) o [Rollup](https://rollupjs.org/).
Personalmente recomiendo utilizar Webpack, ya que es un estándar en la industria.
Sergio's avatar
Sergio committed
194

195
### Evaluar Monorepo vs. single package.
Sergio's avatar
Sergio committed
196

197
[Monorepo](https://www.toptal.com/front-end/guide-to-monorepos) te permite construir y publicar múltiples librerías desde un mismo repositorio. Y aunque resuelve algunos problemas existentes, también crea otros. Es importante conocer los pros y contras.
Sergio's avatar
Sergio committed
198 199 200 201 202

[![Monorepo](/static/images/guias-de-estilo-diseño-de-sistemas/monorepo.png)](https://www.toptal.com/front-end/guide-to-monorepos)

**Pros**

Sergio's avatar
Sergio committed
203
- ✅ Empaquetado de menor tamaño reduciendo el ámbito de aplicación de los componentes a un solo paquete.
204 205
- ✅ Desarrollo compartido, linter, testeo y proceso de creación de múltiples paquetes frente a repositorios separados con código duplicado.
- ✅ Un control más granular de [semver](https://semver.org/) en cada paquete.
Sergio's avatar
Sergio committed
206

207
**Contras**
Sergio's avatar
Sergio committed
208

209 210 211
- ⛔️ Se necesitan herramientas e infraestructura adicional.
- ⛔️ Los consumidores del código tienen que importar múltiples paquetes en vez de una sola librería de componentes.
- ⛔️ Tecnología de vanguardia. La industria está adaptada, pero puedes encontrarte problemas que muy pocos han experimentado y no tener un camino claro para solucionarlo.
Sergio's avatar
Sergio committed
212

213
Algunas preguntas que te ayudarán a identificar la solución adecuada para tu empresa:
Sergio's avatar
Sergio committed
214

215 216 217 218 219 220
- ¿Haces uso de múltiples repositorios, todos ellos publicados en NPM?
- ¿Tu desarrollo, testeo o linter(lint) utilizan una estructura compleja? ¿Se duplica en muchos sitios?
- ¿Cuántos repositorios tienes (o planeas tener en el próximo año)?
- ¿Cómo de grande es tu equipo? ¿Cuántas personas harán uso de tu librería de componentes?
- ¿Será de código abierto?¿Puedes apoyarte en otros dentro de la industria y resolver diferentes problemas?
- ¿Ves la necesidad de tener múltiples paquetes en el futuro? (ej. iconos, [codemods](https://github.com/facebook/jscodeshift), etc)
Sergio's avatar
Sergio committed
221

222
Para la mayoría de las empresas pequeñas, yo diría que el uso de Monorepo es innecesario. Todo tiene su momento y su lugar. [Lo utilizamos en Hy-Vee](/blog/monorepo-lerna-yarn-workspaces) (~150 desarrolladores) para distribuir 10 paquetes diferentes al mismo tiempo, abarcando aplicaciones internas y externas.
Sergio's avatar
Sergio committed
223

224
**Nota:** ¿Quieres utilizar Monorepo? Echa un vistazo a [Creando un Monorepo con Lerna & Yarn Workspaces](/blog/monorepo-lerna-yarn-workspaces).
Sergio's avatar
Sergio committed
225

226
### Evaluar CSS/Sass vs. CSS-in-JS.
Sergio's avatar
Sergio committed
227

228
He llegado a preferir CSS-in-JS, especialmente [styled-components](https://www.styled-components.com/). Existe una gran variedad de opciones para CSS-in-JS [listado](https://github.com/MicheleBertoli/css-in-js). Las principales razones que nos llevaron a utilizar styled-components para nuestra librería de componentes fueron:
Sergio's avatar
Sergio committed
229

Sergio's avatar
Sergio committed
230
- El parecido de escribir CSS tradicional en comparación a escribir objetos de JavaScript
231 232
- Soporte para React y React Native
- Pre-marcado automático en los estilos
Sergio's avatar
Sergio committed
233
- Estilos directos que eliminan conflictos de CSS globales
Sergio's avatar
Sergio committed
234

Sergio's avatar
Sergio committed
235
Si tu librería de componentes necesita soporte para exportar HTML/CSS sin procesar, recomiendo seguir utilizando Sass. Un gran ejemplo de esto es [Carbon Design System](https://www.carbondesignsystem.com/components/button/code) de IBM.
236
![Diseño de Sistemas Botón](/static/images/guias-de-estilo-diseño-de-sistemas/button.png)
Sergio's avatar
Sergio committed
237 238 239 240 241 242

```html
<button class="bx--btn bx--btn--primary" type="button">
  Button
</button>
```
Sergio's avatar
Sergio committed
243

244
Independientemente de la tecnología que elijas, recomendaría usar [variables CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) para mantener tus [tokens de diseño](https://www.lightningdesignsystem.com/design-tokens/).
Sergio's avatar
Sergio committed
245

246
### Crear una librería de componentes.
Sergio's avatar
Sergio committed
247

248
Con los requisitos técnicos bien definidos y la base de una guía de diseño, ya deberías de ser capaz de empezar a construir una librería de componentes. Mi recomendación es que utilices **React alongside [Storybook](https://storybook.js.org/)**.
Sergio's avatar
Sergio committed
249

250
[![Desarrollo de componentes](/static/images/guias-de-estilo-diseño-de-sistemas/component-driven-development.jpg)](https://storybook.js.org/)
Sergio's avatar
Sergio committed
251

Sergio's avatar
Sergio committed
252
**Crear una librería de componentes es mucho más que solo trasladar la guía de estilo a código.**
Sergio's avatar
Sergio committed
253

254 255
Vas a tener que pensar cómo los consumidores van a utilizar tus componentes. ¿Qué clase de API esperan encontrar? ¿Qué proporciona mayor claridad y es capaz de auto documentarse?
Por ejemplo, analiza los botones. Tienes múltiples variaciones de botones - primario, secundario, etc.
Sergio's avatar
Sergio committed
256

257
[![Botones](/static/images/guias-de-estilo-diseño-de-sistemas/buttons.png)](https://eva.design/)
Sergio's avatar
Sergio committed
258

259
¿Deberías tener componentes separados para cada uno?
Sergio's avatar
Sergio committed
260 261 262 263 264 265

```jsx
<PrimaryButton>Hello World!</PrimaryButton>
<SecondaryButton>Hello World!</SecondaryButton>
```

266
¿o quizás basta con utilizar una propiedad (prop)?
Sergio's avatar
Sergio committed
267 268 269 270 271 272

```jsx
<Button>Hello World!</Button>
<Button variant="secondary">Hello World!</Button>
```

273 274 275
En segundo lugar, ¿Cómo debería de llamarse esta propiedad? ¿variante? ¿tipo? ¿Has tenido en cuenta la posibilidad de que sea un [atributo reservado](https://www.w3schools.com/tags/att_button_type.asp) para la etiqueta HTML `<button>`? Este es el tipo de decisiones que tendrás que tomar cuando construyas tu biblioteca de componentes.

Más preguntas a tener en cuenta:
Sergio's avatar
Sergio committed
276

277 278 279 280 281 282
- ¿Vas a permitir que los consumidores [envíen propiedades CSS](https://evergreen.segment.com/components/layout-primitives) como atributos a los componentes de React, o deben de extender/envolver los componentes para lograr el estilo deseado? Si escoges la primera, ten en cuenta [styled-system](https://github.com/styled-system/styled-system).
- ¿Deberías crear estados de carga [directamente en cada componente](http://react.carbondesignsystem.com/?path=/story/accordion--skeleton), o debería existir un [componente genérico](https://www.npmjs.com/package/react-loading-skeleton) para el estado de carga (spinner, skeleton)?
- ¿Cómo vas a realizar el testeo puramente visual de los componentes? ¿[Snapshot testing](https://jestjs.io/docs/en/snapshot-testing)? ¿[Visual diff testing](https://www.chromaticqa.com/)?
- ¿Cómo van a integrarse tus consumidores con tu librería de componentes? ¿Debería de haber un [reset de estilo global](https://cssreset.com/what-is-a-css-reset/)? ¿Deben de añadir algún [plugin de Babel](https://github.com/ant-design/babel-plugin-import)?
- ¿Deberías de utilizar [[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.4/) para auto-generar un documento con los cambios (changelog)?
- ¿Van a necesitar tus componentes soporte para web _y_ móvil? Considera el uso de [React Native Web](https://github.com/devhubapp/devhub) para crear una versión multiplataforma de tu código.
Sergio's avatar
Sergio committed
283

284
### Escoger una plataforma para la documentación.
Sergio's avatar
Sergio committed
285

286
Necesitas una plataforma para mostrar el sistema de diseño.
Sergio's avatar
Sergio committed
287
Si acabas de empezar, te recomiendo que uses **[Storybook Docs](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)**.
288 289

![Storybook Docs](/static/images/guias-de-estilo-diseño-de-sistemas/storybook-docs.png)
Sergio's avatar
Sergio committed
290 291 292 293 294 295

You need a platform to display your design system.
If you're just getting started, I would recommend using **[Storybook Docs](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)**.

![Storybook Docs](/static/images/guias-de-estilo-diseño-de-sistemas/storybook-docs.png)

296
Esta combinación te ofrecerá un resultado similar a otras plataformas como [Docz](https://github.com/pedronauck/docz), [Styleguidist](https://react-styleguidist.js.org/), y [Docusaurus](https://docusaurus.io/).
Sergio's avatar
Sergio committed
297

298
- Copia fácilmente fragmentos de código de otros componentes.
Sergio's avatar
Sergio committed
299
- Genera automáticamente una tabla de atributos y propiedades basandote en prop-types`y`defaultProps`
300 301
- Comprueba fácilmente todas las permutaciones de un componente.
- Escribe documentación propia utilizando MDX.
Sergio's avatar
Sergio committed
302 303 304

![Storybook Flow](/static/images/guias-de-estilo-diseño-de-sistemas/storybook-flow.png)

305
Si eres inflexible como se refleja tu marca dentro del sistema de diseño y puedes alimentar tu propia librería, recomiendo crear una solución propia utilizando [MDX](https://mdxjs.com/). Ya que te permitirá insertar componentes de React dentro del propio archivo. El blog que ahora mismo estás leyendo utiliza [eset sistema](https://github.com/leerob/leerob.io).
Sergio's avatar
Sergio committed
306

Sergio's avatar
Sergio committed
307
Tener una solución personalizada te permite tener un control total y absoluto sobre tus documentos. Un ejemplo que verdaderamente me impresiona es [Atomize React](https://atomizecode.com/docs).
Sergio's avatar
Sergio committed
308 309

![Atomize React](/static/images/guias-de-estilo-diseño-de-sistemas/atomize.png)
Sergio's avatar
Sergio committed
310

311
### Escribir la documentación del diseño de sistema.
Sergio's avatar
Sergio committed
312

313
Ahora que has escogido una plataforma para documentar el sistema de diseño, es hora de escribir los documentos. Deberías incluir:
Sergio's avatar
Sergio committed
314

315 316 317 318
- Instrucciones de instalación y configuración de la librería de componentes.
- Esquemas, definiciones de atributos y propiedades de cada componente.
- Ejemplos visuales de los componentes junto con fragmentos de código para copiar.
- Una justificación del uso de dicha tecnología.
Sergio's avatar
Sergio committed
319

320
Considera la posibilidad de añadir:
Sergio's avatar
Sergio committed
321

322 323 324 325
- Una sección de "Cómo empezar" que incluya un tutorial
- Plantillas de interfaz para escoger.
- Información sobre cómo configurar un tema propio.
- Un editor online para interactuar con los componentes.
Sergio's avatar
Sergio committed
326

327
## Conclusión
Sergio's avatar
Sergio committed
328

329 330
He invertido mucho tiempo en el último año investigando sobre diseño de sistemas. Desarrollar una librería de componentes desde cero me ha dado una mejor perspectiva de la cantidad de trabajo que hay detrás del diseño y desarrollo en el apartado front-end de una aplicación.
A continuación, encontrarás una lista de los sistemas de diseño que me han inspirado y me sirven como recursos de gran utilidad.
Sergio's avatar
Sergio committed
331

332
Siéntete libre de [contactar](mailto:[email protected]) si quieres hablar sobre diseño de sistemas o la traducción de este artículo. O contacta directamente con el [autor](mailto:[email protected]).
Sergio's avatar
Sergio committed
333

334
## Recursos
Sergio's avatar
Sergio committed
335

336
**Diseño de sistemas**
Sergio's avatar
Sergio committed
337 338 339 340 341 342 343 344 345 346 347 348

- [Shopify's Polaris](https://polaris.shopify.com/)
- [Segment's Evergreen](https://evergreen.segment.com/)
- [Eva Design](https://eva.design)
- [Vercel's Design System](https://vercel.com/design)
- [Ant Design](https://ant.design/)
- [IBM's Carbon](https://www.carbondesignsystem.com/)
- [Storybook's Design System](https://github.com/storybookjs/design-system)
- [Modulz's Radix](https://radix.modulz.app/docs/getting-started/)
- [GitHub's Primer](https://primer.style/)
- [Palantir's Blueprint](https://blueprintjs.com/)
- [Atlassian's Design System](https://atlassian.design/)
349
- [Chakra UI](https://chakra-ui.com/)