Salesforce
Lightning/

Salesforce
Lightning/

Salesforce
Lightning DS
From the speed of thought to Agile UAT.

Salesforce
Lightning DS
From
the speed of thought
to Agile UAT.

Salesforce
Lightning DS
From the speed of thought to Agile UAT.

Salesforce Lightning SLDS™ provides a unified design language that ensures a consistent look and feel across all Salesforce apps (Sales, Service, Marketing Clouds, etc.).

Salesforce Lightning SLDS™ provides a unified design language that ensures a consistent look and feel across all Salesforce apps (Sales, Service, Marketing Clouds, etc.).

Salesforce Lightning SLDS™ provides a unified design language that ensures a consistent look and feel across all Salesforce apps (Sales, Service, Marketing Clouds, etc.).

(SLDS)

(SLDS)

(SLDS)

Salesforce

Salesforce

Salesforce

Lightning Superpowers

Lightning Superpowers

Lightning Superpowers

/SLDS
Lightning Powers

SALESFORCE LIGHTNING POWERS BY CATEGORY Here are my seven best SLDS resources when building within the Salesforce ecosystem:

/SLDS
Lightning Powers

FIGMA Plugins for editing supercharge your workflow —automating text tweaks, refining visuals, resizing, aligning, renaming layers, and enhancing speed, precision, and creative control effortlessly.

/SLDS
Lightning Powers

FIGMA Plugins for editing supercharge your workflow—automating text tweaks, refining visuals, resizing, aligning, renaming layers, and enhancing speed, precision, and creative control effortlessly.

Utility-First Class System

SLDS offers a utility-first CSS class approach, similar to Tailwind. You can apply spacing, sizing, text alignment, visibility, and more directly via class names. This consistency helps users navigate seamlessly across different Salesforce tools with minimal learning curve.

01

Utility-First Class System

SLDS offers a utility-first CSS class approach, similar to Tailwind. You can apply spacing, sizing, text alignment, visibility, and more directly via class names. This consistency helps users navigate seamlessly across different Salesforce tools with minimal learning curve.

01

Utility-First Class System

SLDS offers a utility-first CSS class approach, similar to Tailwind. You can apply spacing, sizing, text alignment, visibility, and more directly via class names. This consistency helps users navigate seamlessly across different Salesforce tools with minimal learning curve.

01

Components Library

Includes a comprehensive set of UI components: buttons, forms, cards, modals, tables, icons, and more — all styled to match Salesforce’s look and feel.

02

Components Library

Includes a comprehensive set of UI components: buttons, forms, cards, modals, tables, icons, and more — all styled to match Salesforce’s look and feel.

02

Components Library

Includes a comprehensive set of UI components: buttons, forms, cards, modals, tables, icons, and more — all styled to match Salesforce’s look and feel.

02

Design Tokens

Tokens abstract visual design values such as color, spacing, typography, and elevation. They allow you to customize themes while maintaining design consistency.

03

Design Tokens

Tokens abstract visual design values such as color, spacing, typography, and elevation. They allow you to customize themes while maintaining design consistency.

03

Design Tokens

Tokens abstract visual design values such as color, spacing, typography, and elevation. They allow you to customize themes while maintaining design consistency.

03

Blueprint Markup

SLDS provides reusable HTML markup (called “blueprints”) that you can copy and customize to suit your design needs outside of Salesforce’s platform.

04

Blueprint Markup

SLDS provides reusable HTML markup (called “blueprints”) that you can copy and customize to suit your design needs outside of Salesforce’s platform.

04

Blueprint Markup

SLDS provides reusable HTML markup (called “blueprints”) that you can copy and customize to suit your design needs outside of Salesforce’s platform.

04

Scalability & Customization

While SLDS is strict in style enforcement to maintain brand cohesion, it also allows theming and extension for custom app design needs.

05

Scalability & Customization

While SLDS is strict in style enforcement to maintain brand cohesion, it also allows theming and extension for custom app design needs.

05

Scalability & Customization

While SLDS is strict in style enforcement to maintain brand cohesion, it also allows theming and extension for custom app design needs.

05

Iconography Set

Offers an extensive set of SVG-based icons that are accessible and easy to implement across applications.

06

Iconography Set

Offers an extensive set of SVG-based icons that are accessible and easy to implement across applications.

06

Iconography Set

Offers an extensive set of SVG-based icons that are accessible and easy to implement across applications.

06

Documentation and Support

Rich documentation with live examples, code snippets, and design guidance. Plus, it’s backed by the robust Salesforce ecosystem.

07

Documentation and Support

Rich documentation with live examples, code snippets, and design guidance. Plus, it’s backed by the robust Salesforce ecosystem.

07

Documentation and Support

Rich documentation with live examples, code snippets, and design guidance. Plus, it’s backed by the robust Salesforce ecosystem.

07

SLDS Components

User Interface (UI) components are the building blocks of digital experiences. —reusable elements like buttons, input fields, modals, navigation bars, and cards that work together to create consistency and clarity across a product. Well-designed components follow established design systems and accessibility standards, ensuring a seamless user journey while also streamlining development. As a UX designer, defining and refining UI components means balancing aesthetic precision with functional purpose—ensuring every interaction feels intuitive, responsive, and aligned with user needs across devices and platforms.


Salesforce Lightning Design System (SLDS) — a powerful and thoughtfully crafted front-end framework designed for building Salesforce applications with consistent UX/UI.

Whether prototyping remotely or on-site with Figma, optimizing UI tools and workflows, or scaling for Web3, FIG.™ is here to streamline your Agile atomic design systems.


Whether prototyping remotely or on-site with Figma, optimizing UI tools and workflows, or scaling for Web3, FIG.™ is here to streamline your Agile atomic design systems.


Salesforce
Lightning
Design
System

(SLDS)

Salesforce
Lightning
Design
System
(SLDS)

Animations/Effects

Color Styles

Carousel

Link Styles

Overlays

Responsive Design

SEO & Performance

Text Styles

Sticky Scrolling

Parallax Scrolling

Content (CMS)

Custom Cursors

Forms

.

1

3

UAT

Workflow

Workflow

Workflow

User Acceptance Testing It’s the final phase of the software testing process, where real users (or client stakeholders) test the system to ensure it can handle required tasks in real-world scenarios, according to the business needs.


One of those behind-the-scenes terms that doesn’t always show up in creative workflows and yet, we all know it is known as well, as:


  • Validating final UI implementations against design specs and/or user stories.

  • Coordinating feedback loops with real users, power users or stakeholders before launch.

  • Identifying design gaps during product release prep.

  • Signing off on design readiness based on real-world usage scenarios.

UAT Process in Seven Steps: A quick breakdown of how each step fits into the overall UAT workflow:


01 Business Requirements
This is essential for understanding what needs to be tested. UAT is driven by business needs, so analyzing requirements ensures tests align with expected outcomes.


02 Create a UAT Test Plan
A UAT test plan outlines the scope, objectives, timelines, responsibilities, and criteria for success. It’s a foundational document in the process.


03 Identify Test Scenarios
Test scenarios are high-level situations that will be tested during UAT. These scenarios derive from real business processes.


04 Create UAT Test Cases
These are the detailed steps to validate each scenario. They include inputs, actions, and expected results.


05 Prepare Test Data
Accurate test data is needed to simulate real-world usage and validate functionality properly.


06 Run the UATs
This is the execution phase where end users carry out the test cases to validate the system.


07 Confirm Compliance
This involves verifying that the application meets business requirements and is ready for production. It often leads to a formal sign-off.

Alpha Testing

Alpha Testing

Alpha Testing

Alpha Testing is an internal quality check performed before a product is released to external users. Conducted in a controlled environment—often by the design, QA, or development team—Alpha Testing helps identify functional gaps, usability flaws, and design inconsistencies early on. In UX, it’s a critical moment to validate that design intent translates into real behavior. It’s also when edge cases, accessibility concerns, and responsive performance are examined under realistic but supervised use.

Beta Testing

Beta Testing

Beta Testing

Beta Testing happens after Alpha, involving real users outside the core product team. It’s the product’s first exposure to live feedback in authentic environments. For UX, Beta Testing offers essential insights into user satisfaction, behavioral trends, and overlooked pain points. It allows you to measure if design decisions resonate with users at scale—and whether adoption flows, interaction patterns, or copy choices need refining before the full launch.

Think it,
Build it,
Ship it,
and Tweak it.
Agile

Think it,
Build it,
Ship it,
and Tweak it.
Agile

Think it,
Build it,
Ship it,
and Tweak it.
Agile

Adobe SDS

Adobe Spectrum — the design system powering consistent, accessible, and scalable experiences across Adobe apps. Built to help teams move faster, stay aligned, and design with clarity.

Adobe SDS

{

01

}

Apple SDK

{

02

}

Google Material

{

03

}

Salesforce LDS

{

04

}

Meta Horizon

{

05

}

Atomic Design

{

06

}

Adobe SDS

Adobe Spectrum — the design system powering consistent, accessible, and scalable experiences across Adobe apps. Built to help teams move faster, stay aligned, and design with clarity.

Adobe SDS

{

01

}

Apple SDK

{

02

}

Google Material

{

03

}

Salesforce LDS

{

04

}

Meta Horizon

{

05

}

Atomic Design

{

06

}

Adobe SDS

Adobe Spectrum — the design system powering consistent, accessible, and scalable experiences across Adobe apps. Built to help teams move faster, stay aligned, and design with clarity.

Adobe SDS

{

01

}

Apple SDK

{

02

}

Google Material

{

03

}

Salesforce LDS

{

04

}

Meta Horizon

{

05

}

Atomic Design

{

06

}

* SCROLL DOWN * or SCROLL UP
* SCROLL DOWN * or SCROLL UP