Salesforce UX Designer Exam - SLDS Scenario-Based Questions PDF

Salesforce UX Designer Exam - SLDS Scenario-Based Questions =========================================================== 1. 1\. You are designing a new Lightning Web Component (LWC) for a customer dashboard. The requirement is to maintain a consistent Salesforce look and feel without writin...

Salesforce UX Designer Exam - SLDS Scenario-Based Questions =========================================================== 1. 1\. You are designing a new Lightning Web Component (LWC) for a customer dashboard. The requirement is to maintain a consistent Salesforce look and feel without writing custom CSS. How should you achieve this? - A\) Manually define styles for fonts and colors in a CSS file - \*\*B) Use SLDS class names in your LWC's HTML markup (Correct Answer)\*\* - C\) Import SLDS styles in the JavaScript file 2. 2\. A stakeholder reports that a button in your LWC does not match the standard Salesforce UI. It looks different from other buttons in Lightning Experience. What should you do? - A\) Write a custom CSS rule to style the button - \*\*B) Apply the \`slds-button\` class to the button (Correct Answer)\*\* - C\) Use JavaScript to modify the button's appearance dynamically 3. 3\. Your team is building a mobile-responsive Salesforce application. How can you ensure that all UI components adjust properly across different screen sizes? - \*\*A) Use \`slds-grid\` and \`slds-col\` for responsive layouts (Correct Answer)\*\* - B\) Set fixed \`px\` widths in CSS for consistent sizing - C\) Write custom JavaScript to detect screen size and adjust styles 4. 4\. Your company wants to standardize branding colors across all Salesforce applications without modifying each component individually. What is the best approach? - A\) Override SLDS styles using \`!important\` in custom CSS - \*\*B) Use the Lightning Token Editor to modify SLDS design tokens (Correct Answer)\*\* - C\) Apply inline styles to each component 5. 5\. A form layout looks cluttered because input fields are misaligned, making it hard to read. How can you improve form readability while maintaining SLDS compliance? - \*\*A) Use \`slds-form\_horizontal\` for desktop and \`slds-form\_stacked\` for mobile (Correct Answer)\*\* - B\) Increase padding manually using CSS overrides - C\) Reduce the number of visible form fields 6. 6\. Your manager asks you to create a data table where users can select multiple rows. How should you implement this using SLDS? - A\) Add checkboxes manually inside each table row - \*\*B) Use the \`slds-table\--selectable\` class (Correct Answer)\*\* - C\) Apply \`slds-datatable\` and enable JavaScript-based selection 7. 7\. A customer wants required fields in an LWC form to be clearly marked. How should you indicate required fields according to SLDS best practices? - \*\*A) Add the \`slds-required\` class to the label element (Correct Answer)\*\* - B\) Manually append an asterisk (\`\*\`) to the label text - C\) Use JavaScript to change the label's color dynamically 8. 8\. A data table in your LWC is truncating long text entries, making it hard for users to read. How can you allow text wrapping while keeping SLDS compliance? - \*\*A) Apply the \`slds-cell-wrap\` class to table cells (Correct Answer)\*\* - B\) Manually set \`white-space: normal\` in custom CSS - C\) Increase column width to accommodate longer text 9. 9\. A stakeholder wants to add a searchable dropdown to an LWC form. Which SLDS component should you use? - \*\*A) \`slds-combobox\` (Correct Answer)\*\* - B\) \`slds-dropdown\` - C\) \`slds-picklist\` 10. 10\. You need to display an error message when a user enters incorrect data into a form field. What is the SLDS-compliant way to handle this? - A\) Change the input field's border color to red using custom CSS - \*\*B) Use the \`slds-form-element\_\_help\` class to show an error message (Correct Answer)\*\* - C\) Display a JavaScript alert message 11. 11\. Your company wants to update the default font used across all Salesforce Lightning pages. What is the best way to apply this change? - \*\*A) Use the \`\$font-family-base\` design token (Correct Answer)\*\* - B\) Override SLDS styles using \`\@font-face\` in a CSS file - C\) Import a Google Font in the component's HTML 12. 12\. A visually impaired user reports difficulty distinguishing text from the background in your LWC application. How can you improve accessibility? - \*\*A) Use SLDS high-contrast color tokens (Correct Answer)\*\* - B\) Add a grayscale filter to all UI elements - C\) Increase text size using custom CSS 13. 13\. You are designing a Salesforce page for right-to-left (RTL) languages like Arabic and Hebrew. How can you ensure proper text alignment? - A\) Manually set text alignment using CSS - \*\*B) Use SLDS RTL-specific classes (Correct Answer)\*\* - C\) Add JavaScript logic to mirror the layout 14. 14\. Your company wants to apply a custom brand color to all primary buttons in Lightning Experience. What is the best approach? - \*\*A) Update the \`\$button-brand-background\` design token (Correct Answer)\*\* - B\) Override SLDS styles globally using custom CSS - C\) Manually assign a custom background color to each button 15. 15\. A user reports that a form field's label is not being read by a screen reader. How can you fix this issue? - \*\*A) Ensure the label has an associated \`for\` attribute linked to the input field (Correct Answer)\*\* - B\) Add a placeholder instead of a label - C\) Increase the font size of the label 16. 16\. Your LWC page loads slowly because it contains a very large data table with hundreds of rows. What is the best way to improve performance? - \*\*A) Implement pagination or lazy loading (Correct Answer)\*\* - B\) Remove SLDS styling from the table - C\) Increase the Salesforce instance memory allocation 17. 17\. A developer wants to add custom icons to a Lightning page without increasing load time. What is the best approach? - A\) Upload custom image files for each icon - \*\*B) Use SLDS utility classes for SVG icons (Correct Answer)\*\* - C\) Load icons from an external CDN 18. 18\. You need to implement a progress indicator for a multi-step user journey in Salesforce. Which SLDS component should you use? - \*\*A) \`slds-progress\` (Correct Answer)\*\* - B\) \`slds-stepper\` - C\) \`slds-timeline\` 19. 19\. A customer wants modal dialogs in their Lightning Experience to be fully accessible and support keyboard navigation. What should you do? - A\) Add custom JavaScript event listeners for keyboard support - \*\*B) Use \`slds-modal\` with ARIA attributes and keyboard focus trapping (Correct Answer)\*\* - C\) Increase the modal size for better visibility 20. 20\. A team member suggests overriding SLDS styles with global CSS rules to fine-tune the UI appearance. What should you tell them? - A\) This is the best way to achieve a unique design in Salesforce - \*\*B) This is not recommended because SLDS updates can break custom styles (Correct Answer)\*\* - C\) This is required to ensure SLDS styles apply correctly in LWCs