Skip to main content
Build the future with Agentforce at TDX in San Francisco or on Salesforce+ on March 5–6. Register now.

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.

¿Qué es un sistema de diseño?

Antes de profundizar y explorar sus poderes mágicos, definamos sistema de diseño

Una persona preguntándose qué es un sistema de diseño

Definición de sistema de diseño

Explicación

Un sistema de diseño es un conjunto de patrones de diseño repetitivos y código reutilizable, a los que se hace referencia como componentes.

Los componentes incluyen botones, menús, sonidos, animaciones, patrones visuales y mucho más. En algunos sistemas de diseño, puede ser completamente funcionales y creados en una plataforma de interfaz de usuario. En otros, incluyendo SLDS permanecen independientes de la plataforma.

Piense en un sistema de diseño como un conjunto de partes integrantes (quizás incluso esos icónicos de plástico entrelazados queridos por niños y adultos).

Un sistema de diseño está guiado por estándares, principios y documentación claros y accesibles.

Al igual que esos queridos bloques, los componentes en un sistema de diseño son altamente estandarizados, con un aspecto reconocible.

Los desarrolladores combinan los componentes del sistema de diseño de varias formas para crear aplicaciones en JavaScript. Las directrices de diseño sirven como instrucciones para ensamblar componentes en patrones para casos de uso específicos.

El componente no hace mucho en sí, pero pone estas partes juntas y puede crear casi cualquier cosa.

Las partes integrantes organizadas y reunidas para crear una astronave

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. Los patrones de un sistema de diseño están anclados 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, las reglas y las directrices ayudan a mantener la coherencia entre diseñadores, desarrolladores, equipos y productos. Un sistema de diseño evoluciona confirme cambian las necesidades, permitiendo a los diseñadores y desarrolladores actualizar 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 la plataforma Salesforce es tan potente es que se adapta a las complejas necesidades de una amplia variedad de usuarios.

Las partes integrantes organizadas y reunidas para formar una astronave

También estamos creciendo increíblemente rápido, ampliando tanto nuestro ámbito de productos como nuestro número 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 la plataforma Salesforce 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 y React, debe permanecer independiente. (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.

Recursos

Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantaría saber más sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

Más información Continuar a Compartir comentarios