DesignSystem

Design System
Design System
Diseñando para la eficiencia
Bárbara Martínez
Design System
Bárbara Martínez
UX Designer | Design System Specialist
@Wikimedia Foundation
Linkedin [email protected]
Design System
¿Qué vamos a ver hoy?
01 ¿Qué es un Design System?

1.1 ¿Qué valor aporta?
1.2 Ejemplos de Design Systems
02 ¿Cómo se construye?
2.1 ¿Qué incluye?
2.2 ¿Quién lo mantiene?
2.3 Conociendo Codex
03 Práctica: Creando un Design System

Design System | ¿Qué es?
01.
¿Qué es un
Design System?
Un Design System es una colección de estilos, componentes,

principios de diseño y pautas que se reutilizan para crear
interfaces de forma coherente y unificada. Facilita la
consistencia visual y funcional y acelera el proceso de diseño
y desarrollo garantizando una experiencia de usuario
unificada en productos digitales.
Design System
Design System
1.1
¿Qué valor aporta?
Design System
1. Establece un acuerdo
Son la única fuente de la verdad que contiene todos

los elementos que permitirán a los equipos de diseño y desarrollo definir,
prototipar e implementar los productos.
Design System
2. Facilita el entendimiento
Al crear un lenguaje común entre diseño y desarrollo, facilita la

comunicación y el entendimiento evitando bloqueos.
Design System
3. Garantiza la consistencia
Un Design System garantiza que el diseño e implementación en código

sean exactamente iguales y consigue una coherencia visual entre todos
los productos, facilitando el reconocimiento de marca al usuario.
Design System
4. Ahorra tiempo y resuelve decisiones complejas
Ya que consiste en decisiones ya tomadas, evita posibles errores, permite

tomar decisiones rápidas y permite concentrarse en solucionar otros bloqueos
del proyecto. Además, reutiliza el trabajo existente, mejorando así la
velocidad de producción y el ahorro de costes.
Design System
5. Es escalable y flexible
El sistema de diseño se prepara para que un producto sea

perfectamente escalable en cualquier dispositivo, tamaño de pantalla,
producto o idioma. Esto además permite que el producto pueda
expandirse y mejorarse mucho más rápido.
1.2
Ejemplos de Design
Systems
Un poco de inspiración ☺
Design System
Algunos ejemplos de Design Systems:
● Carbon: Sistema de diseño de código abierto de IBM.

● Material Design: uno de los sistemas más famosos creado por Google.
● Polaris: sistema de diseño integral de Shopify.
● Atlassian Design: uno de los más populares que inspiran a miles de diseñadores.
● Primer: buen sistema de diseño creado por GitHub.
● Apple: Todo lo relacionado con los Productos y Sistemas Digitales de Apple.
● Lightning Design System: el creado por SalesForce.
● Fluent UI: sistema de diseño de Microsoft.
● Codex: nuestro sistema de diseño en Wikimedia Foundation.
Design System | ¿Cómo se construye?
02.
¿Cómo se construye?
Se construye partiendo de las

unidades más pequeñas a las
grandes.
Atomic Design de Brand Frost.
Atomic Design Design Systems: A practical guide

by Brad Frost by Alla Kholmatova
Design System | ¿Qué incluye?
2.1
¿Qué incluye?
Átomos
También conocidos como design tokens,

son los elementos más básicos, y la unidad
mínima de diseño.
● Colores
● Tipografía
● Espaciados
● Sombras
● Iconos
● Etc
Moléculas
Son pequeñas combinaciones de los

átomos que por sí solas no tienen una
función clara.
● Botones
● Text Input
● Select
● Toggle Switch
Organismos
Son la combinación de moléculas y

átomos más conocidos como componentes
funcionales.
● Card
● Formularios
● Barra de navegación (App)
● Header
● Footer
Templates
Las plantillas son la estructura final de una página,

compuesta por la agrupación de organismos,
moléculas y átomos.
No se generan plantillas de todas las pantallas, si no

solo de las que más se usan.
Plantillas frecuentes:
● Login
● Carrito compra
Páginas
Son el resultado de aplicar el contenido real a la

plantilla.
💡 Consejo:
No esperéis a este paso para aplicar los textos finales. Los
textos reales deben estar presentes desde la fase de
wireframe
Un Design System
no solo diseño
Para que un Design System funcione, el

diseño de todos los elementos del Design
System tiene que estar implementado en
código y ambos diseño y código deben estar
perfectamente alineados.
Si nadie lo usa,
no es un Design System
El éxito del Design System está en la

adopción masiva de este por parte de los
equipos. Todos los equipos deben reusar los
componentes creados para conseguir la
consistencia y eficacia.
Design System | ¿Quién lo mantiene?
2.2
¿Quién lo mantiene?
Design System | ¿Quién lo mantiene?
Quién mantiene el Design

System
Hay diferentes tipos de Design System

Centralizado
dependiendo del “governance model”:
1. Centralizado: un equipo
2. Federado: varios equipos
3. Híbrido: combinación de
centralizado y federado Híbrido
Federado
Design System | Codex
2.3
Conociendo
Codex
El Design System de Wikimedia
Codex es el DS de Wikimedia
Codex es un conjunto de principios,

componentes y pautas que garantizan la
coherencia en el diseño de todos los productos
de Wikimedia Foundation, entre ellos
Wikipedia.
doc.wikimedia.org/codex
https://wikimediafoundation.org/
Codex, el Design System de

Wikimedia
● Sistema de diseño híbrido
● Accesibilidad
● Internacionalización
doc.wikimedia.org/codex
Design System | Práctica
03. Práctica
Creando
un Design System
Un Design System es la combinación de:
Generación/Diseño Documentación Implementación
Nosotros nos vamos a centrar en

la fase de generación, creando
una librería de componentes.
¿Cómo empezar?
1. Consulta referencias e inspírate:
Carbon, Atlassian, Material, Polaris…
2. Incluye componentes para nativo (iOS/Android)

Android Material 3
Apple Design Resources - iOS 17
3. Si no puedes partir de cero busca recursos, considera usar un Design System Kit
(o Design Starter Kit) para empezar.
Diseña pensando en nativo

Android e iOS tienen sus propias librerías nativas. El objetivo es que el usuario al instalar la
aplicación reconozca en ella los elementos clave y esté familiarizado con ellos. Esto impacta
directamente en nuestros diseños dadas las restricciones técnicas de cada plataforma.
🔗 Material Design 🔗
Human Interface Guidel
ines
➔ Status Bar ➔ Status Bar

➔ App Bar ➔ Navigation Bar
➔ Roboto font ➔ San Francisco font
➔ Bottom Bar
➔ Navigation Bar ➔ Tab Bar
🔗 Diseñando para Android e iOS (diferencias)

¿Qué incluir?
Fundamentals Componentes
• Estilos de color • Buttons
• Tipografía • Cards
• Espaciado • Nav Bar
• Icons • Alerts, Modals
• … • Menú
Starter Kit
Big Bang – Design System [Starter Kit]
¿Qué incluir? No olvides las interacciones!
Default Hover/Pressed Active Focus Disabled

¿Qué incluir? No olvides las interacciones!
Default, Active, Filled, Error, Success, Disabled

Documenta todo
Para que un DS funcione, es necesario documentar

todas las especificaciones y decisiones acordadas.
La documentación actúa como fuente de la verdad

y debe ser accesible a todos los equipos para
promover su adopción.
zeroheight.com
Design System
Para concluir:
Un sistema de diseño no puede hacerse en un día. Este es un proceso

que nunca termina, ya que evoluciona y crece tanto como evoluciona
el producto, las herramientas y la tecnología con la que se construye.
Design System
🔗 Enlaces útiles
Repositorios de Design Systems
https://adele.uxpin.com
https://designsystemsrepo.com
Galería de componentes usados en Design Systems

https://component.gallery
Designs Systems for Figma

https://www.designsystemsforfigma.com
Diferencias visuales y UX entre iOS y Android

https://uxdesign.cc/ios-vs-android-design-630340a73ee6
Design System
Gracias!
Cualquier duda, comentario o feedback estoy disponible en: [email protected]

DesignSystem

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

DesignSystem

Cargado por

Copyright:

Formatos disponibles

Design System

¿Qué vamos a ver hoy?

01 ¿Qué es un Design System?

03 Práctica: Creando un Design System

Un Design System es una colección de estilos, componentes,

Son la única fuente de la verdad que contiene todos

Al crear un lenguaje común entre diseño y desarrollo, facilita la

Un Design System garantiza que el diseño e implementación en código

4. Ahorra tiempo y resuelve decisiones complejas

Ya que consiste en decisiones ya tomadas, evita posibles errores, permite

El sistema de diseño se prepara para que un producto sea

Algunos ejemplos de Design Systems:

● Carbon: Sistema de diseño de código abierto de IBM.

Se construye partiendo de las

Atomic Design Design Systems: A practical guide

También conocidos como design tokens,

Son pequeñas combinaciones de los

Son la combinación de moléculas y

Las plantillas son la estructura final de una página,

No se generan plantillas de todas las pantallas, si no

Son el resultado de aplicar el contenido real a la

Para que un Design System funcione, el

El éxito del Design System está en la

Quién mantiene el Design

Hay diferentes tipos de Design System

Codex es un conjunto de principios,

Codex, el Design System de

Un Design System es la combinación de:

Generación/Diseño Documentación Implementación

Nosotros nos vamos a centrar en

2. Incluye componentes para nativo (iOS/Android)

Diseña pensando en nativo

➔ Status Bar ➔ Status Bar

➔ Roboto font ➔ San Francisco font

➔ Navigation Bar ➔ Tab Bar

🔗 Diseñando para Android e iOS (diferencias)

¿Qué incluir? No olvides las interacciones!

Default Hover/Pressed Active Focus Disabled

¿Qué incluir? No olvides las interacciones!

Default, Active, Filled, Error, Success, Disabled

Para que un DS funcione, es necesario documentar

La documentación actúa como fuente de la verdad

Un sistema de diseño no puede hacerse en un día. Este es un proceso

Galería de componentes usados en Design Systems

Designs Systems for Figma

Diferencias visuales y UX entre iOS y Android

Cualquier duda, comentario o feedback estoy disponible en: [email protected]

También podría gustarte