Lightning Design System

Free

Dark Mode, Design Tokens

Lightning Design System Figma: Building the Salesforce Experience

Product teams need an integrated approach when building enterprise applications. Therefore, the Salesforce Lightning Design System (SLDS) is the definitive resource for creating UIs consistent with the entire Salesforce ecosystem. For both designers and developers working on the Salesforce Platform, using the official Lightning Design System Figma library is essential. This system is more than just a sticker sheet; in fact, it provides the core design systems principles, components, and utilities required to deliver a unified, high-quality user experience across Sales Cloud, Service Cloud, and custom LWC applications.

Salesforce recently updated the SLDS architecture to version 2. This new version prioritizes CSS custom properties (called Styling Hooks) over older Sass methods. Consequently, this modernization decouples structure from visual style. It opens the way for advanced theming capabilities, including native dark mode support. Designers can now work with the latest components in the official Figma kit, so their mockups will perfectly align with the production code.

SLDS: The Bridge from Design to LWC Code

A component’s primary color is changed via a styling hook in the org’s branding settings. Immediately, every component referencing that hook updates automatically. This is a crucial feature for enterprises managing multi-brand or highly customizable internal applications.

For developers, the Lightning Design System Figma components translate directly into reusable, accessible LWC code. The system’s styling hooks and design tokens store critical attributes like colors, spacing, and font sizes. This approach ensures scalability and consistency, preventing the “design drift” that occurs with hard-coded values. To that end, you should use the global styling hooks instead of older design tokens. This ensures your components comply with the latest WCAG 2.1 color contrast standards and prepares you for the transition to SLDS 2. Finally, for a detailed technical dive into the styling methodology, you can refer to the official developer guide on Styling with Design Tokens in LWC.

Accelerate your Salesforce development cycle. Download the official Lightning Design System Figma UI Kit and explore the documentation today!