Crear un Design System puede parecer una tarea abrumadora, especialmente si es la primera vez que lo haces. Por eso, en esta guía vamos a contarte cómo crear un Design System en Figma, una de las herramientas de diseño más populares y poderosas.

Qué es un Design System

Un Design System es un conjunto de normas, principios y componentes reutilizables que se utilizan para crear productos digitales coherentes y eficientes. Ayuda a que todo el equipo trabaje en la misma dirección, promoviendo la coherencia no solo estética, sino también en el lenguaje y tono utilizados. Un Design System no es estático; crece con el producto. Facilita la colaboración y evita confusiones, asegurando que cada componente y decisión de diseño se alinee con el resto del producto.

Beneficios de tener un Design System

• Consistencia visual: Garantiza que todos los elementos visuales sean coherentes a lo largo de todo el producto, lo que mejora la experiencia del usuario.
• Eficiencia en el desarrollo: Al tener componentes reutilizables, los desarrolladores pueden acelerar el proceso de construcción de nuevas funcionalidades.
• Facilidad de mantenimiento: Facilita la actualización y mantenimiento del producto, ya que todos los elementos están centralizados y documentados.

Planificación y preparación

Objetivos y alcance

Antes de empezar, define claramente los objetivos de tu Design System. ¿Quieres mejorar la consistencia visual? ¿Acelerar el desarrollo? ¿Facilitar la colaboración entre diseñadores y desarrolladores? También es importante delimitar el alcance del Design System, identificando qué componentes y patrones incluirás inicialmente.

Audiencia

Identifica quiénes serán los principales usuarios de tu Design System. Normalmente, estos son diseñadores y desarrolladores, pero también puede incluir gestores de producto y otros stakeholders. Entender sus necesidades te ayudará a crear un sistema más útil y efectivo.

Recolección de recursos

Haz un inventario de los elementos visuales y patrones de diseño que ya existen en tus proyectos actuales. Esto puede incluir colores, tipografías, componentes UI, iconos, etc. Este inventario será la base de tu Design System y te permitirá identificar qué elementos necesitas crear o mejorar.

Construir Design Tokens y elementos esenciales

Paleta de colores

Define y documenta los tokens de colores primarios, neutros, semánticos y otros necesarios para tu producto. Asegúrate de incluir especificaciones claras para cada color (como códigos hexadecimales) y ejemplos de uso.

💡 Para una buena experiencia de usuario es imprescindible que la paleta de colores sea consistente, manteniendo la coherencia visual. Para ello puedes utilizar herramientas como Scale, que te permiten crear paletas de colores ajustando parámetros como saturación, brillo y tonalidad.

Tipografía

Selecciona y especifica las fuentes tipográficas, incluyendo tamaños, pesos y estilos. Documenta cómo y cuándo deben usarse diferentes estilos tipográficos para asegurar una experiencia de usuario coherente. 💡 Para buscar inspiración de fuentes aptas para webs, te recomendamos que accedas a sitios como Google Fonts o Pangram Pangram.

Espaciado y layout

Establece una guía para márgenes, paddings y estructura de layouts. Define un sistema de espaciado (por ejemplo, una escala de 4px) para mantener la consistencia en todo el producto.

💡 Por ejemplo, un sistema de grid de 12 columnas con espaciado de 32px y márgenes de 80px es una opción común y sólida en el diseño de productos digitales, pero siempre es importante adaptarlo según las necesidades específicas del proyecto y las preferencias de diseño.

Componentes UI

Construye y documenta los componentes como botones, desplegables, inputs de texto, formularios, cards de producto, etc. Cada componente debe incluir especificaciones detalladas y ejemplos de uso en diferentes contextos.

💡 Siempre es útil buscar ejemplos de UI Kits y Design Systems que estén compuestos por una amplia variedad de componentes y estén bien documentados. Ant Design es un ejemplo de ello.

Iconografía

Selecciona un set de iconos y define su uso. Asegúrate de que los iconos sean consistentes en estilo y tamaño, y documenta cuándo y cómo deben usarse.

💡 Nosotros te dejamos como ejemplo Phospor Icons, un kit que nunca falla en nuestros proyectos.

Cómo crear un Design System en Figma paso a paso

A continuación, te contamos todas las claves a tener en cuenta para crear un Design System en Figma desde cero. Teniendo todos estos factores en cuenta, lograrás transformar el proceso de diseño, asegurando coherencia, eficiencia y escalabilidad en todos tus proyectos.

Diseñar los componentes

Cuando te embarques en el proceso de diseño de componentes, comienza construyendo los elementos más básicos y avanza gradualmente hacia los más complejos. Utiliza la metodología de los átomos y moléculas para desglosar cada elemento en su forma más elemental y luego combinarlos para formar estructuras más complejas. Este enfoque garantiza coherencia y eficiencia en tu proceso de diseño, mientras fomenta la reutilización y la escalabilidad de tus componentes en futuros proyectos.

Crear documentación clara

Al documentar tus componentes en Figma, asegúrate de organizarlos en páginas y marcos para una navegación clara. Cada componente debe tener una descripción clara de su propósito y ejemplos de uso en diferentes contextos. Especifica dimensiones, estilos y reglas de aplicación, incluyendo variantes y estados. Además, sigue buenas prácticas como nombrar componentes de manera descriptiva y documentar variantes y estados para garantizar la coherencia y consistencia en su uso. Esto facilitará la comprensión y la utilización efectiva de los componentes en tus proyectos de diseño.

Probar y validar

Testea los componentes en diferentes escenarios y dispositivos para asegurar su funcionalidad y consistencia. Recoge feedback de los usuarios del Design System (diseñadores y desarrolladores) y realiza ajustes según sea necesario.

Mejores prácticas y consejos

Iterar y mejorar

Un Design System no es estático. Promueve la iteración y mejoras continuas basadas en el feedback recibido. Establece un proceso para revisar y actualizar regularmente el Design System.

Comunicación y colaboración

Fomenta la comunicación entre diseñadores y desarrolladores para asegurar una implementación coherente.

Mantener la simplicidad

Evita la sobrecomplicación y enfócate en soluciones simples y efectivas. Un Design System demasiado complejo puede ser difícil de mantener y usar.

Ejemplos de Design Systems

Algunos ejemplos notables de Design System pueden ser Google (Material Design), el de IBM (Carbon Design System) y el de Atlassian.