Sketch…meet the Lightning Design System

How I used Sketch to prototype a new timeline lightning web component for usability and maintainability

Photo by Med Badr Chemmaoui


Getting Started

Download the Sketch UI kit from the Lightning Design System website
Starting to build a page using Salesforce supplied base components. Adding a global header and navigation bar
Override the default layout by changing the components attributes. In this case changing the icon and icon background colour.

First prototype

Initial prototype — based on Health Cloud
Contact Detail Page Layout prototype with the timeline taking up the full width of the page
Timeline prototype for a sub tab — this shows the reduced real estate available
Original icon design
Based on feedback use the standard icons to maintain consistency when displayed with related lists and the standard activity timeline
Old description truncated at 15 characters
New description field truncated at 30 characters
Original action area allowing users to select the default zoom start and range
Simplified action bar with only the filter
Data range used for the timeline now displayed
Original hover with limited information displayed
New hover with consistent design and multiple fields displayed — based on the compact layout


1 — How I setup which records to plot for each parent object

2 — The runtime attributes of the timeline component itself

Mockup of the administrator page builder with configurable attributes

3 — Non Functional

No data to display. The query is successful but no records were found
Incorrect field name specified — SOQL query fails — Tells me which field and object.
An unhandled exception — the default and last resort — message displayed directly


Final prototype for the timeline. Fewer SVGs, simplified action bar and bar chart for the bottom x-axis aggregating records instead of plotting individual records
Mockup of the Contact Detail Page with tooltip

Developer Advocate @ MuleSoft || Interested in solving unique challenges using different cloud service providers || All opinions are mine.