Anatomía de un Sistema de Diseño

1/26
Recursos
Transcripción

¿Qué es un sistema de diseño y cuál es su importancia?

Un sistema de diseño es fundamental en la creación de productos digitales. Es una "fuente de verdad", lo que significa que es el lugar donde se concentra toda la información auténtica y actualizada necesaria para construir productos coherentes y funcionales. Además, es comparable a un lenguaje que permite la comunicación visual efectiva entre los diferentes miembros de un equipo de trabajo. A través de este curso, exploraremos cómo construir un sistema de diseño, comprendiendo su estructura, beneficios y el impacto positivo que puede tener en la eficiencia del trabajo en equipo.

¿Cómo se estructura un sistema de diseño?

La anatomía de un sistema de diseño comprende tres partes esenciales:

  1. Guía de estilos: Incluye elementos visuales de diseño como colores, tipografías y espaciados. Es crucial para mantener la coherencia visual.
  2. Librería de patrones: Contiene flujos e interacciones repetitivas en la interfaz de usuario.
  3. Librería de componentes: Aglutina componentes reutilizables que facilitan la construcción rápida y eficiente de productos.

¿Cuáles son los beneficios de un sistema de diseño?

Implementar un sistema de diseño trae numerosos beneficios:

  • Ahorro de tiempo: Facilita la reutilización de componentes ya existentes, simplificando la creación de nuevas interfaces.
  • Consistencia visual: Asegura que todos los elementos del sitio web se presenten de manera homogénea, ofreciendo una experiencia de usuario coherente.
  • Organización: Garantiza que toda la información esté centralizada y fácilmente accesible, evitando desorden y redundancias.
  • Flexibilidad: Permite a nuevos miembros del equipo adaptarse rápidamente al sistema existente.
  • Colaboración y estandarización: Fomenta el trabajo conjunto entre los diferentes departamentos, asegurando una visión común del producto final.

¿Qué ejemplos de sistemas de diseño existen en empresas reconocidas?

Grandes compañías han implementado con éxito sistemas de diseño, marcando una pauta en la industria:

  • Uber - BaseWeb: Ofrece completa documentación sobre estilos y componentes, facilitando su integración en el desarrollo.
  • Shopify - Polaris: Destaca por su detallada explicación de colores e íconos, apoyando tanto a diseñadores como a desarrolladores.
  • Material Design: Reconocido por sus pautas consistentes que sirven de guía en la creación de productos digitales.

Estos ejemplos, además de ser inspiradores, son útiles como referencia al crear un propio sistema de diseño, especialmente para startups que buscan eficiencia y rapidez.

¿Qué se debe considerar antes de construir un sistema de diseño?

Antes de sumergirse en la construcción de un sistema de diseño, es importante tener en cuenta:

  1. Tiempo de desarrollo: La creación de un sistema de diseño es un proceso que requiere tiempo y dedicación, especialmente en equipos grandes o startups en rápido crecimiento.
  2. Preparación previa: Asegurarse de tener conocimientos básicos de herramientas como Figma (ej: auto layout, creación de componentes y variables) es crucial.
  3. Colaboración interdisciplinaria: Un sistema exitoso involucra a diseñadores, desarrolladores y managers de producto. La colaboración es clave.

Finalmente, es importante no solo seguir las pautas establecidas por otras empresas, sino también personalizar cada sistema para que se ajuste a las necesidades únicas del equipo y el producto en desarrollo. Atmospheres, locales y productos innovadores se construyen sobre la base de un sistema de diseño robusto, siempre promoviendo la mejora continua y la adaptabilidad al cambio.

Aportes 37

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

Otro de los sistemas de Diseño que vale la pena revisar es UI Kit: <https://getuikit.com/docs/introduction>
Los mejores sistemas de diseño actuales comparten la característica de ser altamente consistentes y escalables. Están construidos con componentes reutilizables y patrones visuales bien definidos, lo que permite a los diseñadores y desarrolladores mantener una experiencia de usuario coherente a través de distintos productos y plataformas. Además, suelen estar respaldados por una documentación clara y exhaustiva, que facilita la colaboración y el mantenimiento, y están optimizados para la accesibilidad, asegurando que todas las personas, independientemente de sus capacidades, puedan interactuar con los productos creados.

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?

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.

Me encanta mucho como explica todo!
Creo que una desventaja más que el sistema de diseño es la cultura empresarial. En mi caso, la conexión entre el equipo de desarrollado y el equipo de diseño se ve afectado por temas gerenciales o de ego que impiden en muchas ocasiones la contemplación de sistemas de diseño sobre productos digitales, puesto que requiere de una estrategia asertiva para vender la idea, sobre todo a las gerencias que no comprenden sus beneficios y sus sesgos los impide verlos.
Sí, los elementos que defines en Figma actúan como una representación visual de los componentes reutilizables que luego puedes implementar en código. Al crear un sistema de diseño en Figma, estableces patrones y guías que facilitan la creación de elementos reutilizables en programación orientada a objetos (POO), donde cada componente puede ser tratado como una clase, permitiendo así la reutilización y la consistencia en tu producto final.
Un **sistema de diseño** es un conjunto de estándares, principios, patrones, y componentes reutilizables que ayudan a crear una experiencia visual y funcional coherente en productos digitales, como sitios web o aplicaciones. Su propósito es mejorar la eficiencia en el desarrollo y diseño, garantizar la consistencia y permitir la colaboración fluida entre diseñadores y desarrolladores. **Anatomía de un Sistema de Diseño:** 1\. **Guía de Estilos (Style Guide):** Contiene las reglas básicas que definen la apariencia visual. Incluye: • **Paleta de Colores:** Definición de colores principales, secundarios, y terciarios, así como sus variantes (tonos, sombras, etc.). • **Tipografía:** Especificación de fuentes, tamaños, pesos y espaciados tipográficos. • **Espaciado y márgenes:** Definición de patrones de espaciado, como márgenes y paddings, para crear una alineación coherente. • **Iconografía:** Conjunto de iconos con estilo y uso coherente. • **Imágenes y medios:** Reglas sobre el uso de imágenes, fotografías y otros recursos visuales. 2\. **Componentes UI (User Interface Components):** Son bloques reutilizables que constituyen las interfaces. Algunos ejemplos incluyen: • **Botones:** Diferentes variaciones de botones (primarios, secundarios, deshabilitados). • **Campos de Formulario:** Inputs, dropdowns, checkboxes, etc. • **Modales y Pop-ups:** Ventanas emergentes con comportamiento definido. • **Navegación:** Menús, barras de navegación, breadcrumbs. • **Tarjetas y Listas:** Para mostrar contenido de manera organizada. 3\. **Patrones de Diseño (Design Patterns):** Son soluciones repetibles para problemas comunes de diseño. Algunos ejemplos: • **Grid System:** Sistema de cuadrículas que organiza el contenido. • **Layouts:** Disposiciones estructurales para organizar contenido (ej. layout de página, dashboard). • **Patrones de interacción:** Comportamientos esperados para elementos como formularios, botones, y navegación. 4\. **Principios de Diseño:** Son guías que dictan cómo deben tomarse las decisiones de diseño, basándose en la usabilidad, accesibilidad y consistencia. • **Accesibilidad:** Cómo garantizar que el producto sea accesible para todos los usuarios (por ejemplo, contrastes de color adecuados, uso de texto alternativo en imágenes, etc.). • **Consistencia:** Asegurar que los mismos patrones de UI y comportamientos se mantengan en todas las plataformas. 5\. **Tokens de Diseño:** Son valores que representan las propiedades más básicas del diseño, como los colores, espaciados, o tamaños de fuente, en formato codificado. Permiten que el diseño sea escalable y fácil de actualizar. • **Color tokens:** Definen los colores del sistema y se aplican a elementos como fondos, bordes o texto. • **Typography tokens:** Definen los estilos tipográficos. • **Spacing tokens:** Controlan márgenes y rellenos de los elementos. 6\. **Documentación:** La documentación es esencial para explicar cómo usar el sistema, cómo se aplican los componentes y patrones, y cómo mantener la coherencia. Esto facilita la colaboración entre equipos y asegura que todos comprendan cómo y cuándo aplicar los diferentes elementos del sistema. 7\. **Principios de Desarrollo (si está integrado con el desarrollo):** • **Componentes de código:** Librerías o frameworks predefinidos que desarrolladores pueden reutilizar, como botones y modales codificados en React, Vue, etc. • **Responsive Design:** Reglas y componentes que garantizan que el sistema funcione adecuadamente en diferentes tamaños de pantalla.
### **Puntos clave de la clase:** 1. **Definición de un sistema de diseño**: Fuente de verdad que asegura la consistencia visual y la eficiencia en el desarrollo de productos. 2. **Componentes principales**: * Guía de estilos: Colores, tipografía, espaciados. * Librería de patrones: Flujos e interacciones repetitivas. * Librería de componentes: Elementos reutilizables. 3. **Beneficios**: * Ahorro de tiempo. * Consistencia visual. * Organización. * Flexibilidad para nuevos integrantes del equipo. * Colaboración entre equipos. 4. **Ejemplos de sistemas de diseño**: Referencias importantes como los sistemas de Uber, Shopify, Material Design, Microsoft, entre otros. 5. **Desafíos**: La creación de un sistema de diseño lleva tiempo y depende del contexto del producto y del equipo. 6. **Conocimientos previos de Figma**: Para este curso, es importante tener conocimientos de auto layout, creación de componentes y variables.
Figma tiene su propio design system llamado Ant, lo pueden ver en comunity de Figma y human interface guiudelines de Apple
Emocionado por este curso a inciar, Dentro de mi experiencia un DSM debe ser considerado para equipos medianos-grandes para estandarizar los diferentes productos. Esto es un gran apoyo en tiempo para los devs y designers para no inciar procesos desde cero.
excelente clase. cómo se buscan estos sistemas de diseño de toda soas.marcas?

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.