¿Qué son los design tokens y los design systems?

Publicado el 24/04/2023 por Diario Tecnología

Los Design Tokens y los Design Systems son términos que han cobrado mucha relevancia en el mundo del diseño y la tecnología en los últimos años. En este artículo, vamos a explorar en qué consisten estos conceptos y cuáles son los más conocidos actualmente.

Design Tokens

Los Design Tokens son un conjunto de valores predefinidos que representan la apariencia visual y funcional de un producto digital. Estos valores pueden incluir colores, tipografías, espaciados, tamaños de iconos, estilos de borde, entre otros. Los Design Tokens permiten la reutilización de componentes de diseño en diferentes productos digitales, lo que facilita la consistencia visual en una marca.

Además, los Design Tokens son útiles para equipos de diseño y desarrollo, ya que les permiten trabajar juntos de manera más eficiente y rápida. Los diseñadores pueden crear componentes de diseño utilizando los valores predefinidos de Design Tokens y los desarrolladores pueden utilizarlos para crear elementos de interfaz de usuario coherentes y precisos.

Uno de los ejemplos más conocidos de Design Tokens es Style Dictionary, una herramienta de código abierto que permite definir y generar Design Tokens para diferentes plataformas y lenguajes de programación. Otros ejemplos incluyen Design System Manager, Design Tokens for Figma, y Polaris.

Design Systems

Los Design Systems son un conjunto de componentes de diseño, patrones, guías y recursos que se utilizan para construir una experiencia de usuario coherente y escalable. Los Design Systems permiten a los equipos de diseño y desarrollo trabajar juntos de manera más eficiente y rápida, ya que proporcionan una base sólida de componentes y patrones de diseño que pueden reutilizarse en diferentes productos digitales.

Los Design Systems también son útiles para mantener la consistencia visual y funcional en una marca a lo largo del tiempo y en diferentes productos digitales. Al tener una biblioteca de componentes y patrones de diseño coherentes, es más fácil mantener una experiencia de usuario coherente y de alta calidad en todos los productos digitales de una marca.

Existen varios ejemplos de Design Systems muy conocidos en la industria del diseño y la tecnología. A continuación, presentamos algunos de ellos:

  1. Material Design de Google: Este es uno de los Design Systems más utilizados y conocidos. Material Design proporciona una amplia variedad de componentes de diseño para crear aplicaciones web y móviles coherentes, incluyendo iconos, tipografías, paletas de colores, patrones de movimiento, entre otros.

  2. IBM Design Language: IBM ha desarrollado un Design System completo que se utiliza en todos sus productos digitales. El sistema incluye patrones de diseño, principios de diseño, una biblioteca de componentes y una guía de estilo. IBM Design Language es conocido por su enfoque en la accesibilidad y la inclusión.

  3. Salesforce Lightning Design System: Este sistema de diseño proporciona una guía detallada de diseño para crear aplicaciones empresariales coherentes. Incluye componentes de diseño, estilos visuales, paletas de colores y principios de diseño.

  4. Shopify Polaris: Polaris es el Design System utilizado por Shopify para crear productos digitales coherentes. Proporciona una guía completa de diseño, una biblioteca de componentes y una guía de estilo.

  5. Atlassian Design System: Este Design System se utiliza en todas las aplicaciones de Atlassian, incluyendo Jira y Trello. Proporciona una guía detallada de diseño, componentes de diseño y principios de diseño.

  6. Carbon Design System de IBM: IBM también ha creado el Design System Carbon, que se utiliza en sus productos de software empresarial. Carbon proporciona una amplia variedad de componentes de diseño y principios de diseño para crear productos digitales coherentes.

Material Design

Material Design es uno de los Design Systems más populares y ampliamente utilizados. A continuación, presentamos algunos ejemplos de cómo se ha utilizado Material Design en diferentes productos digitales:

  1. Google Drive: Google Drive utiliza Material Design para crear una experiencia de usuario coherente y atractiva. La aplicación utiliza iconos, colores y tipografías coherentes para que la interfaz de usuario sea intuitiva y fácil de usar.

  2. YouTube: YouTube también utiliza Material Design en su aplicación móvil para crear una experiencia de usuario atractiva y coherente. La aplicación utiliza un estilo visual moderno y limpio, con una paleta de colores brillantes y vibrantes.

  3. Google Maps: Google Maps utiliza Material Design en su aplicación móvil para crear una interfaz de usuario intuitiva y fácil de usar. La aplicación utiliza una paleta de colores azules y verdes, y una tipografía clara y legible para que los usuarios puedan encontrar fácilmente lo que están buscando.

  4. Google Calendar: La aplicación Google Calendar utiliza Material Design para crear una experiencia de usuario coherente y fácil de usar. La aplicación utiliza una paleta de colores vibrantes y una tipografía clara para que los usuarios puedan programar y organizar sus eventos de manera eficiente.

  5. Gmail: Gmail utiliza Material Design para crear una interfaz de usuario atractiva y coherente en su aplicación móvil. La aplicación utiliza una paleta de colores rojos y blancos, y una tipografía clara para que los usuarios puedan enviar y recibir correos electrónicos de manera fácil y eficiente.

Material Design fue desarrollado inicialmente por Google, pero desde su lanzamiento, ha sido adoptado por muchas empresas y marcas en diferentes industrias. A continuación, presentamos algunos ejemplos de productos digitales que utilizan Material Design fuera del ecosistema de Google:

  1. Airbnb: La aplicación móvil de Airbnb utiliza Material Design para crear una experiencia de usuario coherente y atractiva. La aplicación utiliza una paleta de colores suaves y una tipografía clara para facilitar la búsqueda y reserva de alojamientos.

  2. Asana: La aplicación de gestión de tareas Asana utiliza Material Design para crear una interfaz de usuario fácil de usar y visualmente atractiva. La aplicación utiliza iconos y animaciones coherentes para facilitar la navegación y la gestión de tareas.

  3. Slack: La aplicación de mensajería Slack utiliza Material Design en su interfaz de usuario para crear una experiencia coherente y atractiva en diferentes plataformas. La aplicación utiliza iconos y animaciones coherentes para que los usuarios puedan comunicarse de manera efectiva y eficiente.

  4. Duolingo: La aplicación de aprendizaje de idiomas Duolingo utiliza Material Design para crear una interfaz de usuario visualmente atractiva y fácil de usar. La aplicación utiliza una paleta de colores brillantes y una tipografía clara para ayudar a los usuarios a aprender un nuevo idioma.

  5. Trello: La aplicación de gestión de proyectos Trello utiliza Material Design para crear una experiencia de usuario coherente y visualmente atractiva. La aplicación utiliza iconos y animaciones coherentes para que los usuarios puedan gestionar proyectos de manera efectiva.

Aquí hay un ejemplo de cómo se puede implementar Material Design utilizando HTML, CSS y JavaScript:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Material Design Example</title>
    <!-- Importar hojas de estilo de Material Design -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Importar íconos de Material Design -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>
  <body>
    <!-- Barra de navegación -->
    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo">Material Design Example</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Acerca de</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>
      </div>
    </nav>
    
    <!-- Contenido principal -->
    <div class="container">
      <h1>¡Bienvenido a Material Design!</h1>
      <p>Este es un ejemplo de cómo se puede utilizar Material Design en un sitio web.</p>
      <a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i> Descargar</a>
    </div>
    
    <!-- Importar archivos de JavaScript de Material Design -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

CSS:

/* Definir estilos personalizados */
nav {
  background-color: #4285F4;
}

.container {
  margin-top: 50px;
}

JS:

// Inicializar componentes de Material Design
document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.sidenav');
  var instances = M.Sidenav.init(elems);
});

Este ejemplo incluye una barra de navegación, contenido principal y un botón de descarga, todos ellos implementados utilizando las clases y componentes de Material Design. Además, se han personalizado algunos estilos utilizando CSS y se ha inicializado un componente de Material Design utilizando JavaScript.

Cabe mencionar que este es solo un ejemplo básico, y que existen muchas otras formas de implementar Material Design utilizando diferentes herramientas y frameworks. Sin embargo, la estructura básica y los principios de diseño de Material Design se pueden aplicar en cualquier contexto para crear una experiencia de usuario coherente y atractiva.

Si lo quisieramos hacer con un framework como ReactJS sería se la siguiente forma:

import React from 'react';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <div>
      <h1>Bienvenido a Material-UI</h1>
      <Button variant="contained" color="primary">
        Mi botón Material Design
      </Button>
    </div>
  );
}

export default App;

 

En este ejemplo, se utiliza el componente de botón de Material-UI, que tiene las siguientes propiedades:

  • variant: El estilo del botón. En este caso, se utiliza "contained" para un botón con fondo y "outlined" para un botón con borde.
  • color: El color del botón. En este caso, se utiliza "primary" para un color azul y "secondary" para un color rojo.

Además, se puede personalizar el estilo del botón utilizando las herramientas de Material-UI, como los temas, paletas de colores y estilos globales.

Material-UI ofrece una amplia gama de componentes y herramientas para implementar Material Design en una aplicación de React. Con Material-UI, los desarrolladores pueden crear interfaces de usuario coherentes y visualmente atractivas que siguen las directrices de diseño de Material Design.

 

Conclusión

Los Design Tokens y los Design Systems son herramientas importantes para la creación de productos digitales coherentes y de alta calidad. Los Design Tokens permiten la reutilización eficiente de componentes de diseño, mientras que los Design Systems proporcionan una base sólida de componentes y patrones de diseño para construir una experiencia de usuario coherente y escalable.

Existen muchas herramientas y sistemas de diseño que se utilizan actualmente, y es importante que los equipos de diseño y desarrollo encuentren los que mejor se adapten a sus necesidades específicas. Al utilizar Design Tokens y Design Systems, los equipos pueden crear productos digitales de alta calidad de manera más eficiente y efectiva.

 

Descarga la app de Diario Tecnología W3Schools

Últimos posts

Contacto

info@diariotecnologia.es