Skip to main content

Explorar recursos do SLDS

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

  • Descrever os principais recursos do SLDS 1: diretrizes de design, planos de componente e tokens de design.
  • Acessar a documentação do SLDS 1 para ver diretrizes relativas ao design, à acessibilidade e ao tom e à linguagem no SLDS 1.

Apresentando a equipe do sistema de design

Você sabe que a equipe do sistema de design é responsável pelo SLDS 1. Mas suas responsabilidades não acabam aqui. Seu objetivo oficial é:

Estabelecer uma experiência de alta qualidade alinhada com a marca em todo o nosso produto por meio de diretrizes humanas e ferramentas internas.

Vamos entender isso melhor.

A equipe do sistema de design oferece diretrizes humanas permitindo que designers e desenvolvedores produzam soluções de design de alta qualidade alinhadas com a marca. A equipe também ajuda os colaboradores a entender como pequenas mudanças podem afetar o sistema como um todo, e como contribuir com elementos que funcionem entre produtos e em vários casos de uso. Por fim, a equipe cria ferramentas, como diretrizes de interação e de design visual, que abordam conceitos gerais, padrões de design e tipos de página.

Os fundamentos do SLDS 1

Agora chegamos às engrenagens do SLDS. Para manter seus produtos alinhados com a experiência de usuário do Salesforce, as equipes de produto podem encontrar um conjunto completo de recursos de design em lightningdesignsystem.com.

Raio cercado de parafusos, porcas e engrenagens

As diretrizes de design no SLDS 1 são o que chamamos de padrões no SLDS 2. As diretrizes de design descrevem como usar padrões e componentes baseados em casos de uso específicos. As diretrizes de design lidam com questões mais amplas sobre a experiência de usuário do Salesforce, como: Como os dados são exibidos? Como os dados são inseridos? Como a pesquisa é gerenciada? Como a IU indica que a informação está sendo carregada? O SLDS 1 tem dois tipos de diretrizes de design.

Os planos de componente são HTML e CSS estáticos, independentes da estrutura e acessíveis para elementos da interface do usuário, como caixas de seleção, cabeçalhos de página e menus dinâmicos. Os desenvolvedores usam planos para criar componentes. Os componentes básicos do Lightning costumam ser totalmente funcionais, mas o HTML5 e o CSS no SLDS são estáticos. Você precisa integrar um plano do SLDS a uma estrutura JavaScript para que um usuário possa interagir com ele.

Os tokens de design são entidades nomeadas que armazenam atributos de design visual. O SLDS 1 usa tokens em vez de valores embutidos em código (como valores hexadecimais para cores ou valores de pixel para espaçamento). Os tokens nos ajudam a manter uma IU escalonável e consistente no SLDS 1. O uso de tokens de design pode economizar tempo para os designers e ajudar a manter a consistência. O mais importante, quando um designer usa um token, cada instância dele é atualizada automaticamente sempre que o valor desse token é atualizado no SLDS, sem a necessidade de atualizações manuais. O uso de tokens para definir os valores de atributos de design facilita a atualização e o dimensionamento dos elementos de design entre aplicativos Web e nativos pela equipe do sistema de design.

Note

A arquitetura do SLDS 2 é diferente da do SLDS 1.

O SLDS 2 separa a estrutura do estilo visual para fornecer verdadeiros recursos de personalização e temas, preparando o terreno para o modo escuro. O SLDS 2 prioriza propriedades CSS personalizadas como linguagem visual e diminui o uso de tokens de design. O SLDS 2 enfatiza componentes básicos do Lightning prontos para uso, em vez de planos para implementações personalizadas. Essa é a base para componentes compatíveis com IA em versões futuras.

Há muito mais para descobrir sobre o SLDS 2: consulte nossa documentação para obter mais informações e saber como migrar seu código de design para SLDS 2.

Mais recursos

O SLDS 1 também inclui:

  • Ferramentas como APIs, plug-ins e kits de design que facilitam e agilizam a criação com SLDS.
  • Diretrizes de tom e linguagem para tornar o conteúdo do Salesforce claro, consistente e cativante, seja em um aplicativo ou online. Essas diretrizes se aplicam a todos os textos do Salesforce, desde comunicações oficiais a instruções na tela e mensagens de erro.
  • Diretrizes de acessibilidade que ajudam pessoas com necessidades especiais a perceber, entender, navegar, interagir com e contribuir para aplicativos Salesforce. Todos os aplicativos Salesforce buscam atender ao padrão da indústria WC3 WCAG 2.0 AA para serem perceptíveis, operáveis, compreensíveis e robustos para todos os usuários. Alguns exemplos:
    • Oferecimento de alternativas de interação por teclado para todas as ações feitas pelo mouse
    • Rótulos adequados em todos os campos e botões de formulário
    • Oferecimento de alternativas baseadas em texto para todas as imagens, vídeos, ícones e SVGs

Cada componente do SLDS 1 deve transmitir sua identidade, modelo de operação e estado às tecnologias assistenciais, e deve usar marcação ARIA para se identificar aos usuários de tecnologias assistenciais. Para saber mais sobre acessibilidade, explore os recursos abaixo.

O futuro do SLDS

Uma estação espacial futurista chamada SLDS

A Salesforce é uma das líderes na indústria de sistemas de design. O SLDS 1 foi o primeiro sistema de design empresarial de código aberto no mundo. Atualmente, a equipe do SLDS faz as seguintes perguntas em relação ao sistema de design de última geração, o SLDS 2:

Como um sistema de design pode usar inteligência artificial e agentes? Podemos viabilizar o uso de componentes Web do Lightning por todos em todas as plataformas JavaScript? Podemos fazer isso sem refazer o código? Como vários sistemas de design podem evoluir com base uns nos outros para estender casos de uso a outros tópicos?

Sejam quais forem as respostas, as perguntas continuarão a surgir. Esperamos que você se junte a nós nessa jornada enquanto o SLDS continua a evoluir.

Recursos

Compartilhe seu feedback do Trailhead usando a Ajuda do Salesforce.

Queremos saber sobre sua experiência com o Trailhead. Agora você pode acessar o novo formulário de feedback, a qualquer momento, no site Ajuda do Salesforce.

Saiba mais Continue compartilhando feedback