DS Analysis : Saleforce’s Lightning Design System
By: Justin Marsan
Tags: Design System, Webdev, Webdesign, Design

I’m pretty sure everyone interested in DS has seen or heard about this one already ! It’s indeed a pioneer or a very good example on many topics and is often cited as a good example ! Let’s take a look at some of the things that Saleforce does really well !

Saleforce’s Lightning Design System’s Homepage

Exhaustive documentation

While it can get a bit overwheling at first, the documentation of each component really goes deep into explaining what a component is, what it does, and how it must be used for designers and all the possible variations and states available to developers.

There are many states and variations possible for Activity Timelines

It’s not just about how it looks, but it’s also about how it works, how it’s made accessible, how users can interact with their keyboard with it… If you want to go through it all, it might take a while, but there’s definitely a lot to learn in there !

I’m sure there’s a better way to present all this information, probably splitting it a little but this is already very good : a DS should give access to everything there is to know about something, and this gets the job done fairly well, especially considering how many components and variations there are !

Styling Hooks using CSS Variables

I had not seen it used this way before and honestly I think it’s a very good idea, very well implemented !

Along with Design Tokens, Lightning uses variables for many proprieties of its component, such as the text or background color of an element. This enables users of the DS to customize how a component renders, not only through all their projects which is commonly done with preprocessor variables, but also in every possible context they want.

An example of Lightning’s Styling Hook in practice

It’s not always going to make sense and it’s not easy to implement especially if you need backwards compatibility, but I think this is something very good to keep in mind should you ever need to offer the ability of the DS’s users to customise the look and feel of their applications.

Incredible Design Guidelines

It’s as if they thought of everything really ! What to display when there’s no content to load, how should loaders be shown when loading just a specific feature, or a full page…

Various loading contexts

Many of these guidelines are written like tutorials too : they guide whoever is reading and teach them how to design great content. This is great as it helps bring new collaborators up to speed quickly but it’s also very nice because it shares the thinking that went behind how previous products were built and helps everyone improve the quality of future work as well, especially when process can’t be followed and when teams have to improvise !

Extensive Tooling

Some DS share a list of useful tools and plugins that they recommend using, which is great if you want to help people adhere to company standards on things they’re not really familiar with (for example a given tool for code accessibility) or to simply make sure everyone is using the same toolset.

But Lightning couldn’t just do that, they did so much better : they made many tools, including Sketch plugins, Web Apps to help customize some of their content, a live Component Playground, and also many downloadable assets for the most common design tools out there…

Just a few of the tools Lightning offers to their users

I don’t think any company should hope to do as good a job as this to be honest, but at least it would be a good idea to list must-have and recommended tools and provide users with all the required assets they need to do a good job.

Lightning even has an FAQ

It may sound weird at first and I honestly clicked unsure what I would find in it… But yeah it does, and it is packed with good information too !

From browser support to tech how-to’s, it a dense page with a lot of information that wouldn’t really belong anywhere else. This only works because they have a good search implemented, otherwise there’s a good chance any information in there would never been seen, but I think this is a very good idea, and it could probably be just a place to store (and answer) questions that people ask whoever is responsible for the DS until a good place is found to put it. I mean what browsers should all apps support ? Good question right, but what is the good place and time to answer it ? Hard to say… But at least in the FAQ it’s somewhere and can be found and linked to !

Parting thoughts

Saleforce’s Lightning Design System really is a good example when it comes to exhaustivity : they really seem to have thought about every use case and make a very good effort to document it all. If I had to find one negative thing, it’d be how design principles and development documentation are mixed together, which in my opinion isn’t ideal as it makes the whole page very long at hard to browse at times.

That being said the code examples are simple but really do the trick, showcasing the result and just a couple of lines of code, which can be expanded as needed. Not as shiny as many more recent playground embed solutions but it’s more than enough, especially considering the fact that it mostly shows the HTML.

I remember reading about their page about animation but couldn’t find it, unfortunately. It’s too bad because this is one topic that’s often very hard to work on at scale for many reasons : it’s difficult to communicate about motion, it’s hard to do and it feels like things can work without it, even though times and times again studies and tests have shown that motion can really help users figure out what’s going on !

Anyways, there are things to improve but a lot more to get inspired by in this DS and I hope reading this gave you a few ideas about what you could do better in your own projects !