Información acerca de sistemas de diseño
Objetivos de aprendizaje
Después de completar esta unidad, podrá:
- Identificar las características y funciones de un buen sistema de diseño.
- Describir cómo los diseñadores y colaboradores utilizan, contribuyen en y gestionan sistemas de diseño.
- Explicar como ayuda el Salesforce Lightning Design System (SLDS) los desarrolladores a crear soluciones en la plataforma Salesforce.
- Describir cómo y por qué SLDS se diferencia de la mayoría de sistemas de diseño.
Salesforce Lightning Design System (SLDS) ahora tiene dos versiones.
Salesforce Lightning Design System 2 (SLDS 2) se incluyó en la edición Spring ‘25. El modelo SLDS original ahora se llama SLDS 1.
En esta insignia de Trailhead, nos enfocamos en los sistemas de diseño en general, SLDS en su totalidad y en SLDS 1. Para obtener más información acerca de SLDS 2, acceda a la ruta Primeros pasos con SLDS 2.
SLDS 2 se creó con un nuevo marco de trabajo de CSS que separa la estructura del diseño visual mediante los ganchos de estilo. Los ganchos de estilo son propiedades personalizadas de CSS que permiten lograr personalizaciones y temas más profundos, lo que ayuda a crear experiencias exclusivas de manera más rápida.
Para incluir SLDS 2, elija el tema Salesforce Cosmos en su organización. Consulte Tema Salesforce Cosmos y disponibilidad de SLDS 2.
¿Qué es un sistema de diseño?
Antes de profundizar y explorar sus poderes mágicos, definamos sistema de diseño.
Definición de sistema de diseño |
Explicación |
|---|---|
|
Un sistema de diseño es una recopilación de patrones de diseño repetitivos y elementos de IU reutilizables, a los que se hace referencia como componentes. Los componentes pueden incluir botones, menús, sonidos, animaciones, patrones visuales y mucho más. Algunos sistemas de diseño incluyen componentes completamente funcionales creados en una plataforma de IU. Otros sistemas de diseño, como SLDS, ofrecen componentes que son independientes de la plataforma. Los componentes proporcionan HTML y CSS, pero no el código funcional. Un patrón es una solución reutilizable y documentada para tareas o problemas comunes de usuarios. Un patrón está compuesto por una combinación específica de componentes, formatos e interacciones que crean una experiencia del usuario completa. A diferencia de un componente sencillo, un patrón proporciona contexto y mejores prácticas para el objetivo de un usuario o proceso, como un formulario de varios pasos o una pantalla de inicio de sesión. Dicho de forma sencilla, los patrones de IU brindan una guía sobre cómo se organizan los componentes e interactúan para brindar una experiencia del usuario óptima. |
Un sistema de diseño es un conjunto de estándares integrales que guían la creación de productos. Abarca una biblioteca de patrones, componentes, directrices y mejores prácticas, y garantiza que haya coherencia entre los diseños. Los sistemas de diseño proporcionan un marco de trabajo holístico y un vocabulario compartido para los equipos, lo que simplifica el proceso de desarrollo de productos. Los patrones de diseño, en cambio, ofrecen soluciones únicas y son elementos individuales dentro de la arquitectura más amplia de un sistema de diseño. Piense en los componentes como bloques de creación y en los patrones, las reglas y las directrices como instrucciones detalladas sobre cómo usar esos bloques de creación. |
Un sistema de diseño está guiado por estándares, principios y directrices claros y accesibles. |
Los componentes en un sistema de diseño son altamente estandarizados, con un aspecto reconocible. Los patrones ofrecen planes estructurados con propósito para combinar y usar los componentes. |
|
Los diseñadores combinan los componentes y los patrones para diseñar una IU. Los desarrolladores implementan los diseños de la IU creados por los diseñadores mediante la combinación de los componentes del sistema de diseño de varias maneras para crear aplicaciones en HTML y JavaScript. Las directrices de diseño sirven como instrucciones para ensamblar componentes en patrones para casos de uso específicos. Si hay un código de componente para los diseños de componente, los desarrolladores recurren a ese código. De lo contrario, los desarrolladores crean la IU usando su propio código HTML y JavaScript. Usan los patrones del sistema de diseño y las directrices para ayudarlos a crear el código. |
El componente no hace mucho en sí, pero pone estas partes juntas y puede crear casi cualquier cosa. |
Un buen sistema de diseño es:
-
Ampliable. Cuando un sistema de diseño madura, se emplea menos tiempo y dinero en crear elementos fundamentales (partes integrantes). Los desarrolladores reutilizan esos elementos en productos y funciones.
-
Eficiente. Los sistemas de diseño ahorran tiempo y energía liberando diseñadores y desarrolladores para centrarse en la capacidad de uso y el significado.
-
Visualmente unidos. Las instrucciones detalladas de un sistema de diseño (patrones, reglas, directrices) están ancladas a propósito. Sus elementos estéticos provienen de las necesidades del usuario. Los componentes estandarizados refuerzan tanto el estilo visual como la marca, dando como resultado productos y funciones con un aspecto coherente y proporcionan una experiencia del usuario coherente.
-
Compartidos. Los elementos reutilizables, documentados y accesibles admiten la colaboración, facilitando la tarea de asignar partes de un proyecto o crear en el trabajo de otros.
Comenzar a crear ahora
Como las partes integrantes, un sistema de diseño le ayuda a comenzar a crear de inmediato. El uso de componentes creados previamente le permite centrarse en resolver problemas complejos y entregar la mejor experiencia de usuario.
Otra importante ventaja de un sistema de diseño es que le permite gestionar diseño a escala. La biblioteca de componentes, los patrones, las reglas y las directrices ayudan a mantener la coherencia entre diseñadores, desarrolladores, equipos y productos. Un sistema de diseño evoluciona conforme cambian las necesidades, permitiendo a los diseñadores y desarrolladores actualizar las interfaces y herramientas de forma rápida y sencilla en una plataforma compleja.
Conocer los protagonistas
Cualquier sistema de diseño es simplemente tan bueno como sus partes interesadas.
-
Consumidores son los diseñadores, desarrolladores y partes interesadas que utilizan elementos del sistema de diseño para crear aplicaciones. Los consumidores provienen tanto de dentro como de fuera de la compañía que creó el sistema de diseño si la compañía, como Salesforce, tiene un ecosistema de clientes que crean aplicaciones en la plataforma de la compañía.
-
Colaboradores crean los elementos y patrones que componen el sistema de diseño. Para cada versión, cualquiera puede proponer nuevos patrones, componentes o directrices, o sugieren cambios para los existentes.
-
Administradores son custodios del sistema de diseño. Este equipo de ingenieros, diseñadores de productos y diseñadores virtuales mantiene el sistema de diseño, monitorea su código y enseña a la comunidad cómo utilizarlo. Los administradores revisan actualizaciones propuestas e incorporan actualizaciones para desarrollar el sistema de diseño.
Si está leyendo esto, probablemente sea un cliente o colaborador de SLDS.
Lightning Design System en Salesforce
En Salesforce, estamos impulsando sistemas de diseño. Una razón por la que Salesforce Platform es tan potente es que se adapta a las complejas necesidades de una amplia variedad de usuarios.
También estamos creciendo muy rápido, ampliando tanto nuestra cartera de productos como nuestra cantidad de empleados. Conforme crecemos, tratamos más necesidades del usuario. Es crucial que diseñemos una experiencia de producto cohesionada de forma eficiente y a escala.
SLDS ayuda los equipos de Salesforce a hacer eso. Utilice patrones específicos del caso para ayudar los diseñadores a iterar de forma más rápida y crear soluciones cohesionadas de forma más eficiente. Los desarrolladores de componentes siempre tienen el marco de trabajo más reciente, con marcado limpio y accesible y CSS perfecto hasta el último píxel, para ayudarles a trabajar de forma más rápida con menos errores. Los clientes y socios crean personalizaciones en Salesforce Platform utilizando un sistema coherente, limpio y actualizado con frecuencia que incluye explicaciones claras y ejemplos de diseño; eliminando la tentación de realizar ingeniería inversa sobre cualquier software.
La mayoría de los sistemas de diseño proporcionan código completamente funcional. Pero como SLDS es compatible con varias bases de código diferentes, como Componentes web Lightning (LWC) y React, debe permanecer independiente. Salesforce ofrece código funcional que implementa muchos de los diseños de componente SLDS mediante los componentes base Lightning. (Para obtener más información acerca de cómo se diferencia SLDS de otros sistemas de diseño, consulte los recursos al final de esta unidad.)
A continuación, realizamos un viaje en el pasado, hacia atrás, atrás al nacimiento de SLDS.