SLDS patterns: messaging, states, icons and density
The SLDS 1 guidelines that make a custom UI behave like Lightning Experience: picking toasts, modals, popovers or inline text from the messaging framework, empty states and loading indicators, the 50/40-point color rule, icon types, labels and toggles, record layouts and display density, macropatterns, and lightningStylesheets for Visualforce.
Given a scenario, determine out-of-the-box design and configuration consistent with the look and feel of Lightning Experience.
~8 min read · 24 practice questions ·
What the exam expects
- Pick the SLDS messaging type, component and state for a scenario, and know when no toast is needed.
- Design empty states and loading indicators that follow SLDS.
- Apply SLDS color, icon, label and toggle guidance.
- Choose record layouts, display density and macropatterns consistent with Lightning Experience.
- Bring existing Visualforce pages closer to Lightning Experience with lightningStylesheets.
Key terms: messaging type (system, engagement, access or feedback, set by who triggered the message); toast (dismissible feedback after create, edit or delete); stencil (a placeholder shaped like the content being loaded); macropattern (a repeatable high-level workflow, such as creating any record); lightningStylesheets (an apex:page attribute that gives standard Visualforce components Lightning styling).
Key facts
- Detail
- System, engagement, access, feedback
- Detail
- After inline edit, or when create opens the new record
- Detail
- Warning modal, title matching the button
- Detail
- Error popover plus field-level messages
- Detail
- Message required; CTA (max two) and illustration optional
- Detail
- Full page loads over 300 ms
- Detail
- 50 points = 4.5:1; 40 points = 3:1
- Detail
- Only to save space with fewer than 10 fields
- Detail
- Labels left of fields, less spacing
- Detail
- Not in Classic, Experience Cloud sites or PDF
Sources for this section (10)
- Messaging Types (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Toasts (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Modals (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Popovers (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Empty State (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Loading (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Color Accessibility (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Data Entry (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Personalize Lightning Experience Displayhelp.salesforce.com (opens in a new tab)
- Lightning Stylesheets for Visualforcedeveloper.salesforce.com (opens in a new tab)
- Why does SLDS skip a toast after inline edit?
- When should a designer use horizontal field labels?
- Which record layout suits a team that collaborates mainly through activity and discussion?
- When does a one-off design become a pattern?
The questions are free to read. Answers with their sources and self-grading are included with the pack.
Keep reading with the Platform User Experience Designer pack
- Core concepts
- Exam traps
- Worked scenario
The pack includes:
- All 22 lessons of the Platform User Experience Designer guide, with reading progress
- Interactive decision walks and step-by-step sequence steppers
- Inline practice questions and one-click topic practice (24 questions for this lesson)
- An official source cited for every claim
- An AI tutor that answers from the guide
- Unlimited timed practice exams