Anatomía de un Sistema de Diseño

Estuve esperando este curso durante mucho tiempo. Estefany es una excelente profesora, siempre contagiando su pasión y extenso conocimiento en cada clase que da. Sé que este curso no será la excepción y podremos aprender demasiado sobre el tema.

Anatomía de un Sistema de Diseño

Un sistema de diseño es un lenguaje y una fuente de verdad. Es un lugar donde hay información en la que podemos confiar (componentes con reglas claras). Y permite comunicarnos en torno a un lenguaje visual.

Sus partes fundamentales son:

• Guías de estilo: todo lo visual, botones, inputs, colores, textos, etc.
• Librería de patrones: interacciones, flujos, acciones que se repiten.
• Librería de componentes.

Beneficios

• Ahorrar tiempo: al tener los componentes creados, simplemente debemos replicarlos; lo cual nos ahorra mucho tiempo.
• Consistencia: permite que todo el producto se vea y se sienta muy similar o igual.
• Organización: tener reglas de diseño iguales, márgenes, paddings, tamaños, etc.
• Flexibilidad: permite a las personas que se sumen al equipo tener un mejor onboarding, entendiendo claramente las reglas de diseño de forma más rápida.
• Colaboración: permite colaborar con diferentes partes del equipo para armar un producto con reglas claras.
• Estandarización: permite tener un producto estandarizado con componentes reutilizables que podemos usar en todas las interfaces.

Desventajas

• No es tarea fácil crearlo. Lleva mucho tiempo.

Recordar que tiene más sentido crearlo si se trabaja iterativamente en un producto.

Estos son 2 de los sistemas de diseño en Figma que tengo de referencia.

Tini Desing System:

Shipfaster UI :

Yo estaba esperando este curso, pero en mi caso aplicaré todo este conocimiento en Sketch 🧡

Teff es ese tipo de profe con la que nos encariñábamos en la escuela, amo su energía y pasión al enseñar 🌞💚

Para complementar este curso, pueden leer este libro:

Building Design Systems
Unify User Experiences through a Shared Design Language

Teeefi!! Qué clase tan genial! Muchas muchas gracias por tu claridad y los excelentes recursos que nos regalaste.
Por aquí les dejo los sistemas de diseño que conozco:

https://mui.com/material-ui/react-switch/
https://m3.material.io/
https://ui-patterns.com/patterns

El curso que más he estado esperando este mes.

He esperado este curso por tanto tiempo :’)

The best teacher of platzi jejeje

Este es el curso que vengo esperando de mucho tiempo

La única desventaja que yo le veo a un Design System ya se mencionó en el video: Toma mucho tiempo desarrollarlo, toma mucho tiempo que el equipo de diseño de producto, los UI designers, lo UX designers y los front-end developers se pongan de acuerdo. A Spotify y a Apple le ha ido muy bien, pero les ha tomado mucho tiempo.

Estoy a la expectativa, yo hice un sistema de diseño voy a ver si quedó bien o no.