Jan 6, 2024 3 min read Diseño de productos

Crear un sistema de diseño

Sistema de diseño

Los negocios con un branding establecido suelen tener una guía de estilo, un design system o sistema de diseño es una guía práctica y sistema de colaboración entre diseñadores y desarrolladores.

En mi caso, estos diseños viven en Figma y con frecuencia no existen para nuevas aplicaciones de consumo o productos digitales. Al crear un sistema nuevo parto de una guía en PDF con recursos en Photoshop, Illustrator y/o Sketch; últimamante, también Canva 😅

Es de suma importancia escuchar a los desarrolladores antes de iniciar o actualizar un sistema de diseño.

¿Qué es un Design System o Sistema de Diseño?

Los sistemas de diseño han crecido con el paso del tiempo y dependiendo del producto, son más o menos extensos. Es una guía centralizada para que los equipos de diseño y desarrollo tengan una serie de componentes reutilizables, patrones, estándares y preferencias para crear experiencias de usuario consistentes y coherentes con diferentes contextos y plataformas.

¿Qué Incluye un Design System o Sistema de Diseño?

Es un sistema vivo y en constante crecimiento. La mejor opción es contar con un diseñador gráfico y un diseñador UI, juntos podrán discutir, unificar y mantener consistencia en los diseños, online y offline.

Paleta de colores. La paleta de colores es el conjunto de colores y tonalidades que un diseñador gráfico elige, para proyectos web, estos colores se extienden a colores de acento, principal, de superficie y más.
Tipografía. En la web, la jerarquía en la tipografía importa por muchas razones, reune los headings H1-H6, así como el texto decorado, links y más.
Iconografía. Ultimamente, utilizo el plugin material symbols para mi iconografía. Si el cliente tiene iconografía única, debe convertirse a pixel perfecto y guardarlo como PNG o SVG.

Los siguientes elementos son para diseñadores y desarrolladores:

Componentes. Un conjunto de elementos que forman un objeto reutilizable. Una lista larga de elementos consistentes en todas sus formas y estados.
Estilos, Token y Variables. Depende de la aplicación en la que tu equipo diseñe, pero en Figma, por ejemplo, puedes guardar todo lo anterior en estilos, tokens y variables. Todo en función a ser consistentes y rápidos al iterar.
Grid System. Siempre utilizaba un sistema que me permitiera mostrar mis diseños, sin embargo, siempre estaba un poco diferente al desarrollar. Uso siempre el sistema Bootstrap.

Estos elementos forman la base de un sistema de diseño, pero también pueden incluir do's and don'ts de uso, principios de diseño, animaciones, microinteracciones y otros elementos según las necesidades específicas del proyecto o la marca.

Algunos equipos deciden convertir estos componentes Sketch, Figma o Adobe XD en Token y Variables que puedan reutilizarse. Mi recomendación es no sobrecomplicar o saturar el sistema de diseño y evitar que se quede desactualizado.