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

Explorar recursos de SLDS

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

  • Describir los recursos principales de SLDS: directrices de diseño, planos de componentes y tokens de diseño.
  • Acceder a la documentación de SLDS para obtener directrices relacionadas con diseño, accesibilidad y voz y tono para SLDS.

Presentación del equipo del sistema de diseño

Sabe que el equipo del sistema de diseño es responsable de SLDS. Pero sus responsabilidades ni acaban aquí. Su objetivo oficial es:

Establecer una experiencia de alta calidad alineada con la marca en nuestro producto a través de directrices humanas y herramientas internas.

Detallemos eso. 

El equipo del sistema de diseño proporciona directrices humanas capacitando diseñadores y desarrolladores para producir soluciones de diseño alineadas con la marca de alta calidad. El equipo también ayuda los colaboradores a comprender cómo pueden pequeños cambios afectar el sistema más grande, y cómo aportar elementos que funcionan en productos y para múltiples casos de uso. Finalmente, el equipo crea herramientas, como directrices de interacción y directrices de diseño visual, que tratan conceptos de alto nivel, patrones de diseño y tipos de página.

Los entresijos de SLDS

Ahora llegamos a los entresijos de SLDS. Para mantener sus productos alineados con la experiencia de usuario de Salesforce, los equipos de producto pueden encontrar un conjunto completo de recursos de diseño en lightningdesignsystem.com.

Rayo de Lightning rodeado por tuercas, rayos y engranajes

Las directrices de diseño describen patrones basándose en casos de uso específicos. Los patrones están asociados con planos (CSS documentado accesible). Los consumidores utilizan planos para crear aplicaciones nativas y web con Lightning Experience. Las directrices de diseño dirigen preguntas de perspectiva global acerca de la experiencia de usuario de Salesforce, como: ¿Cómo se muestran los datos? ¿Cómo se ingresan los datos? ¿Cómo se gestiona la búsqueda? ¿Cómo indica la interfaz de usuario que esa información se está cargando? SLDS tiene dos tipos de directrices de diseño.

  • Planos, un tipo de directriz de diseño, son estáticos, independientes del marco, HTML y CSS accesible para elementos de la interfaz de usuario como casillas de verificación, encabezados de página y menús dinámicos. Los desarrolladores utilizan planos para crear componentes. (El nombre completo para planos es planos de componente. Las personas a menudo hacen referencia a ellos como solo componentes, pero no es completamente preciso. Los componentes son generalmente completamente funcionales, pero HTML5 y CSS en SLDS son estáticos. Debe integrar un plano de SLDS con un marco de JavaScript antes de que un usuario interactúe con él.)
  • Tokens, otro tipo de directrices de diseño, se denominan entidades que almacenan atributos de diseño visual. En Salesforce, los utilizamos en vez de valores codificados (como valores hexadecimales para valores de color y píxeles para espacio). Los tokens nos ayudan a mantener una interfaz de usuario ampliable y coherente. El uso de tokens de diseño puede ahorrar tiempo a los diseñadores y mantener la coherencia. Lo más importante, cuando un diseñador utiliza un token, cada instancia de él se actualiza automáticamente cada vez que se actualiza el token en SLDS, sin actualizaciones manuales necesarias. El uso de tokens para representar atributos de diseño facilita al equipo del sistema de diseño la tarea de actualizar y ampliar elementos de diseño en aplicaciones web y nativas.

Más recursos

SLDS también incluye:

  • Herramientas como las API, los complementos y los kits de diseño que hacen que la creación con SLDS sea más rápida y sencilla.
  • Directrices de voz y tono para hacer que el contenido de Salesforce sea claro, coherente y atractivo, ya sea en aplicación u online. Estas directrices se aplican a todo el texto de Salesforce, desde comunicaciones oficiales a instrucciones en pantalla y mensajes de error.
  • Directrices de accesibilidad que ayudan las personas con discapacidad a percibir, comprender, navegar, interactuar y colaborar en aplicaciones Salesforce. Todas las aplicaciones Salesforce luchan por cumplir con el estándar de la industria WC3 WCAG 2.0 AA para ser perceptibles, operables, comprensibles y robustas para todos los usuarios. Algunos ejemplos incluyen:

    • Proporcionar alternativas de interacción del teclado para todas las acciones basadas en el ratón
    • Etiquetar de forma apropiada todos los botones y campos de formulario
    • Proporcionar alternativas basadas en texto para todas las imágenes, videos, iconos y SVG

Cada componente de SLDS debe reflejar su identidad, modelo de funcionamiento y estado en tecnologías de asistencia, y debe utilizar el marcado ARIA para identificarse para usuarios de tecnologías de asistencia. Para obtener más información acerca de accesibilidad, explore los recursos a continuación.

El futuro de SLDS

Un espacio espacial futurista denominada SLDS

Salesforce es un líder de la industria en el espacio del sistema de diseño. SLDS era el primer sistema de diseño de compañías de código abierto del mundo. En la actualidad, el equipo de SLDS están formulando preguntas como estas acerca del sistema de diseño de siguiente generación: ¿Cómo podría un sistema de diseño utilizar la inteligencia artificial? ¿Podemos hacer posible que todos utilicen componentes web Lightning en cualquier plataforma de JavaScript? ¿Podemos hacerlo sin volver a redactar códigos? ¿Cómo pueden múltiples sistemas de diseño basarse los unos en los otros, ampliando casos de uso a otros temas?

Con independencia de las respuestas, las preguntas continuarán surgiendo. Esperamos que se una a nosotros en el recorrido conforme SLDS continúa evolucionando.

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