Anatomía de un Sistema de Diseño

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.

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.

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

Tini Desing System:

Shipfaster UI :

Para complementar este curso, pueden leer este libro:

Building Design Systems
Unify User Experiences through a Shared Design Language

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

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

Creo que una desventaja de un Design System, es justamente creer que está listo.

Hay momentos que al diseñar, nos damos cuenta de componentes que nos hacen falta y que omitimos en el Design System

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

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.

01. Anatomía de un Sistema de Diseño

• Sistema de diseño
  • Fuente de verdad
    • Lugar en donde hay información en la que podemos confiar
  • Lenguaje
    • Permite comunicarnos en torno a un lenguaje visual común
• Anatomía
  • Guía de estilos
  • Librería de patrones
  • Librería de componentes
• Beneficios
  • Ahorrar tiempo
  • Consistencia
  • Organización
  • Flexibilidad
  • Colaboración
  • Estandarización
• El DS tiene sentido si se trabajo iterativamente en un producto
  • Cuando un equipo utiliza un mismo componente para diferentes cosas y los prueba

Sistema de diseno: Es la fuente de verdad, lugar donde hay informacion en la que podemos confiar.

Lenguaje: Nos permite comunicarnos entorno a un lenguaje visual. Nos otorga toda la informacion que necesitamos para crear nuestro producto y hasta nos ayuda a mejorar la conversacion con el equipo.

Anatomia de un sistema de diseno

Hay 3 partes muz importantes, Guia de estilos, Libreria de patrones y libreria de componentes.

Beneficios:

• Ahorrar tiempo (Los componentes los creamos una vez y los reutilizamos)
• Consistencia
• organizacion (No sirve tener un espaciado por un lado, y en otras paginas otro tipo de espaciado)
• Flexibilidad
• Colaboracion (Cuando lleguen nuevos integrantes en el equipo, sera muchomas facil, disenar y crear algo consistente sin importar quien sea el disenador)
• Estandarizacion

Desventajas

• No es una tarea facil (Tiene sentido si se trabaja iterativamente en un producto)

Quienes lo estan haciendo?

• Uber https://baseweb.design/
• Polaris- Shopify: https://polaris.shopify.com/
• Material Design:https://m3.material.io/
• Sales force: https://www.lightningdesignsystem.com/
• Carbon design szstem: https://carbondesignsystem.com/

Este curso luce muy prometedor, me gusto identificar las 3 partes importantes de nuestro design system, Guia de estilos, Libreria de patrones y libreria de componentes.

Me gustaria aprender como crear dicha documentacion. Hasta los componententes en Figma, como evitamos que los disenadores sientan que es muy dificil trabajar con los componentes.

Martin Coronel

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

Interesante introducción. Super contento con la ruta de Figma que hay en Platzi. Estoy aprendiendo bastante.

Anatomía de un Sistema de Diseño
Fuente de verdad (donde hay informacion confiable) y un lenguaje que permite comunicarnos con el entorno visual

Partes:

• Guia de Estilos
• Libreria de Patrones
• Libreria de Componentes

Beneficios:

• ahorro de tiempo
• consistencia
• organizacion
• flexibildad
• colaboracion
• estandarizacion

LA ITERACION EN EL PRODUCTO ES LA CLAVE. hacerlo de una pasada es dificil.

Algunos sistemas de diseño con ejemplos de como utilizarlo e implementarlo son:

• (uber)
• (Shopify)
• (material design)
• (carbon design system)
• (lightning Design System)
• (Fluent Design System)
• (atlassian Design System)
• (Pajamas Design)

Anatomía de un sistema de diseño: Para poder construirlo necesitamos ciertas pautas y orden para hacerlo. Sistema de diseño: Es un concepto amplio. No hay una definición puntual. Pero se puede definir por fuente de verdad (donde esta concentrada toda la info) También es un lenguaje que nos permite comunicarnos con otras partes del equipo a nivel visual

Anatomía de un Sistema de Diseño: son 3 partes 1- guía de estilos (todo a nivel visual y diseño)-colores-tipografía -espaciados, etc. 2- librería de patrón (algo que se esta repitiendo) flujos, interacciones en la interfaz de usuario 3- librería de componente (es un conjunto de muchas cosas

con este acento no puedo prestar atenciooon 😍😍😍

El curso que necesitaba 😃

¡Muy interesante desde la primer clase! … Este curso pinta para ser de los mejores y más útiles que he tomado hasta ahora, luego de año y medio en la plataforma.

Que hermoso curso! Estoy contento de empezar!

Listo para iniciar este magnifico curso para un concurso que tengo jejeje que genial todo

Genial este curso! 😃

He esperado este curso por tanto tiempo :’)

The best teacher of platzi jejeje

Este es el curso que vengo esperando de mucho tiempo

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