Prime Design System Kit is created with a unique modular structure that lets you design conveniently. The Kit contains multiple sketch files so you can easily collaborate with your team or replace each file to fit your project needs. Your Sketch library is not a design system You can write words explaining how to properly use a toaster, draw pictures of toasters, and even create more efficient ways to draw pictures of toasters. But at the end of the day, if you don't have a functioning toaster, all that effort is for naught. Design Systems helps you follow Sketch app best practices too, with a modular approach based on components that helps you work smarter and faster. All Design System's components are linked with Sketch Symbols. Design Systems: The secret sauce. 5 quick tips when creating a Design System in Sketch. November 5, 2020 In this article I hope to bring you a few valuable tips for when you're building a Design System, or working with any large file in Sketch for that matter.
These sketch libraries are a collection of resources to support designing and prototyping using Lightning Design System components, tokens, and design patterns. There are also useful resources to help make design workflows more efficient with artifacts like page templates, wireframes, key product screens, and components for writing specifications.
SLDS Components for Web
Sketch equivalents of component blueprints and tokens as seen on the SLDS website
SLDS Components for Mobile (coming soon)
Sketch collection of native mobile patterns and mobile web coded components
SLDS Icon Library
A file of design system icons which is automatically generated from design system code
Pattern: Builder
Builder design guideline customized component symbols
Pattern: User Engagement
User engagement design guideline customized component symbols
Pattern: Chart
Chart design guideline customized component symbols
Pattern: Rules, Filters, and Logic
Rules, Filters, Logic design guideline customized component symbols
Standard Artboards
Based on user data, Sketch artboards are sized to the common viewport dimensions used
Spec Library
A collection of symbols to use when documenting dimensions and details of designs for engineers
Wireframes
Grey box stencils of common Lightning interfaces
Key Screens
A collection of the most common product screens on mobile and desktop (coming soon)
A good design system makes everyone's life easier. It gives designers the elements and guidance they need to work within an approved structure. It helps developers work with predictable, consistent components. And it helps businesses design and build new products, faster — all with consistent user experiences.
And if you know design systems, you probably know Salesforce. Salesforce's Lightning Design System is an industry leader, with thousands of components, clear instructions, and sensible, considered decisions about color and sizing. Plus, it comes with a Sketch Library, so it's super simple to pick up and use.
The Lightning Design System has evolved a great deal since its launch in 2015, but after speaking to Kirupa Chinnathambi, Senior Director of PM on the system, it's clear that the core goals remain the same today. 'As Stephanie Rewis, one of the founding engineers of the Lightning Design System describes, the initial goals were around providing a scalable and maintainable way for teams to adopt the latest evolution of our UX guidance,' he says. For the team, that means great documentation, plenty of visual assets, strong communication channels and feedback loops across the ecosystem, and much more.
'Today, we take these two goals and their outputs for granted,' Kirupa continues. 'But when the Lightning Design System was first coming online, the team was really paving new ground with little prior art to reference.' Today, the team is constantly evolving what the Lightning Design System does — and basing that evolution on research, customer feedback, telemetry and industry trends. But those original two goals are never far from the forefront.
But there's another key aspect that makes the Lightning Design System such a huge success — one that is more about people than design.
Making it personal
'One of the biggest aspects for us is having good relationships with the teams that use our design system to build their UX,' says Kirupa. With the Lightning Design System, that's everyone from internal teams at Salesforce that are evolving the company's various products, to external designers and developers who use the platform for their own solutions.
'One of the biggest aspects for us is having good relationships with the teams that use our design system to build their UX'
'Keeping in close communication — directly and indirectly — across our vast ecosystem is a time-consuming task. But it's also really rewarding, because it ensures we spend our time building the right things.'
And those relationships have another valuable benefit for the team, too— providing behind-the-scenes glimpse at how the roles of design and engineering are constantly evolving. 'We get a more accurate, dotted-line roadmap that we can be creative in filling out,' Kirupa explains. 'Our investments in design and developer tools, which are fairly unique for a design system team, is one example of how we react to these insights in a targeted way.'
For Salesforce, those tools include a powerful Sketch plugin, dedicated UI design kits and, most recently, a new Assistant — the Lightning Design System Linter.
Rules are made to be followed
When we released Assistants with Sketch 68, we wanted to help you spot issues with your documents, stay consistent with design systems and prepare your files for collaboration. For Salesforce, creating an Assistant that helped users follow the Lightning Design System rules was a no-brainer.
'Keeping in communication across our vast ecosystem is time-consuming. But it's also really rewarding, because it ensures we spend our time building the right things.'
'Defining rules for using the system is hugely important — both on the design and engineering side,' says John Earle, Lead Software Engineer on the Lightning Design System. But for the Salesforce team, it's just as important to make those rules easy to follow.
'With a system as expansive as the Lightning Design System, it's easy for even seasoned Salesforce designers to use color values or text sizes that don't correspond to tokens,' he continues. These small errors have a cascading effect, resulting in hardcoded values in code. And because it's hard to change those later on, it makes the end user's experience inconsistent.
Using the Lightning Design System Linter with a Sketch document is simple. Flavours 1 0 10. Once you've added it, it'll run in the background, showing notifications if there are any aspects of your design that don't follow the Lightning Design Systems's rules.
How To Share A Sketch Design System
'Keeping users informed of these rules — and making sure they're enforced — is just as important as the rules themselves,' continues John. Blender animation tools. 'Most of our rules live directly within the system, in metadata. An API disseminates these rules, which is why we can build and use enforcement tools, such as our SLDS Validator, and now, the Lightning Design System Linter.'
Part of the family
When combined with the Lightning Design System's Sketch plugin, the Sketch UI kit, and the fonts, colors and icons that Salesforce offers, it's a seriously powerful combination. Not only do you have all the components and assets you need to design, you have information on how to use it correctly — and an Assistant to tell you if you make a mistake.
'The audience for our design system spans all skill levels — from designers, developers and product managers to admins and ‘accidental' designers for whom the designer hat is just one of the many hats they already wear,' says Kirupa. 'The most rewarding part is seeing our customers across all these diverse skillsets use the guidance, tools, and out-of-the-box solutions we provide to bring their own user experiences to life.'
Home Sketch Design
For users, this all means that it doesn't matter if you spend all your time in Sketch:
Or if you like to write code:
However you work, the Lightning Design System can help you — to borrow from the company's mission statement — build beautiful, performant, and accessible product experiences. And now, that's all backed up by a powerful Assistant.
Assistant simplicity
Before we let the Salesforce team go, we wanted to ask about their experience of building their Lightning Design System Linter. Our team designed Assistants to be easy-to-create — did their hard work pay off?
'I've had a blast building our Assistant!' smiles John. 'Setup was quick — I had my first rule up and running in minutes. I love that the context object gives me easy access to document properties, so I don't need to crawl through layers to find what I need. The Typescript environment helps me adhere to the proper interface, and guides me with autocomplete in VS Code. And to top it all off, I can have Jest watch for changes as I'm developing so I don't need to recompile my code manually. The development experience is well-documented and modern — a pleasure to work in.'
Pattern: User Engagement
User engagement design guideline customized component symbols
Pattern: Chart
Chart design guideline customized component symbols
Pattern: Rules, Filters, and Logic
Rules, Filters, Logic design guideline customized component symbols
Standard Artboards
Based on user data, Sketch artboards are sized to the common viewport dimensions used
Spec Library
A collection of symbols to use when documenting dimensions and details of designs for engineers
Wireframes
Grey box stencils of common Lightning interfaces
Key Screens
A collection of the most common product screens on mobile and desktop (coming soon)
A good design system makes everyone's life easier. It gives designers the elements and guidance they need to work within an approved structure. It helps developers work with predictable, consistent components. And it helps businesses design and build new products, faster — all with consistent user experiences.
And if you know design systems, you probably know Salesforce. Salesforce's Lightning Design System is an industry leader, with thousands of components, clear instructions, and sensible, considered decisions about color and sizing. Plus, it comes with a Sketch Library, so it's super simple to pick up and use.
The Lightning Design System has evolved a great deal since its launch in 2015, but after speaking to Kirupa Chinnathambi, Senior Director of PM on the system, it's clear that the core goals remain the same today. 'As Stephanie Rewis, one of the founding engineers of the Lightning Design System describes, the initial goals were around providing a scalable and maintainable way for teams to adopt the latest evolution of our UX guidance,' he says. For the team, that means great documentation, plenty of visual assets, strong communication channels and feedback loops across the ecosystem, and much more.
'Today, we take these two goals and their outputs for granted,' Kirupa continues. 'But when the Lightning Design System was first coming online, the team was really paving new ground with little prior art to reference.' Today, the team is constantly evolving what the Lightning Design System does — and basing that evolution on research, customer feedback, telemetry and industry trends. But those original two goals are never far from the forefront.
But there's another key aspect that makes the Lightning Design System such a huge success — one that is more about people than design.
Making it personal
'One of the biggest aspects for us is having good relationships with the teams that use our design system to build their UX,' says Kirupa. With the Lightning Design System, that's everyone from internal teams at Salesforce that are evolving the company's various products, to external designers and developers who use the platform for their own solutions.
'One of the biggest aspects for us is having good relationships with the teams that use our design system to build their UX'
'Keeping in close communication — directly and indirectly — across our vast ecosystem is a time-consuming task. But it's also really rewarding, because it ensures we spend our time building the right things.'
And those relationships have another valuable benefit for the team, too— providing behind-the-scenes glimpse at how the roles of design and engineering are constantly evolving. 'We get a more accurate, dotted-line roadmap that we can be creative in filling out,' Kirupa explains. 'Our investments in design and developer tools, which are fairly unique for a design system team, is one example of how we react to these insights in a targeted way.'
For Salesforce, those tools include a powerful Sketch plugin, dedicated UI design kits and, most recently, a new Assistant — the Lightning Design System Linter.
Rules are made to be followed
When we released Assistants with Sketch 68, we wanted to help you spot issues with your documents, stay consistent with design systems and prepare your files for collaboration. For Salesforce, creating an Assistant that helped users follow the Lightning Design System rules was a no-brainer.
'Keeping in communication across our vast ecosystem is time-consuming. But it's also really rewarding, because it ensures we spend our time building the right things.'
'Defining rules for using the system is hugely important — both on the design and engineering side,' says John Earle, Lead Software Engineer on the Lightning Design System. But for the Salesforce team, it's just as important to make those rules easy to follow.
'With a system as expansive as the Lightning Design System, it's easy for even seasoned Salesforce designers to use color values or text sizes that don't correspond to tokens,' he continues. These small errors have a cascading effect, resulting in hardcoded values in code. And because it's hard to change those later on, it makes the end user's experience inconsistent.
Using the Lightning Design System Linter with a Sketch document is simple. Flavours 1 0 10. Once you've added it, it'll run in the background, showing notifications if there are any aspects of your design that don't follow the Lightning Design Systems's rules.
How To Share A Sketch Design System
'Keeping users informed of these rules — and making sure they're enforced — is just as important as the rules themselves,' continues John. Blender animation tools. 'Most of our rules live directly within the system, in metadata. An API disseminates these rules, which is why we can build and use enforcement tools, such as our SLDS Validator, and now, the Lightning Design System Linter.'
Part of the family
When combined with the Lightning Design System's Sketch plugin, the Sketch UI kit, and the fonts, colors and icons that Salesforce offers, it's a seriously powerful combination. Not only do you have all the components and assets you need to design, you have information on how to use it correctly — and an Assistant to tell you if you make a mistake.
'The audience for our design system spans all skill levels — from designers, developers and product managers to admins and ‘accidental' designers for whom the designer hat is just one of the many hats they already wear,' says Kirupa. 'The most rewarding part is seeing our customers across all these diverse skillsets use the guidance, tools, and out-of-the-box solutions we provide to bring their own user experiences to life.'
Home Sketch Design
For users, this all means that it doesn't matter if you spend all your time in Sketch:
Or if you like to write code:
However you work, the Lightning Design System can help you — to borrow from the company's mission statement — build beautiful, performant, and accessible product experiences. And now, that's all backed up by a powerful Assistant.
Assistant simplicity
Before we let the Salesforce team go, we wanted to ask about their experience of building their Lightning Design System Linter. Our team designed Assistants to be easy-to-create — did their hard work pay off?
'I've had a blast building our Assistant!' smiles John. 'Setup was quick — I had my first rule up and running in minutes. I love that the context object gives me easy access to document properties, so I don't need to crawl through layers to find what I need. The Typescript environment helps me adhere to the proper interface, and guides me with autocomplete in VS Code. And to top it all off, I can have Jest watch for changes as I'm developing so I don't need to recompile my code manually. The development experience is well-documented and modern — a pleasure to work in.'
Simple video editor online. 'I've had a blast building our Assistant! The development experience is well-documented and modern — a pleasure to work in.' Navicat for mysql 12 1 19.
It's great to hear this kind of feedback from a team as big and successful as Salesforce. But this isn't the end of their plans for design validation in Sketch. 'We've really just scratched the surface with our initial release of the Assistant,' says John. 'In the future we're looking to validate spacing between and within layers. And we'd like to connect the Assistant to our Lightning Design System Plugin to generate specifications for engineers. These specs will reference design system token values and component blueprints, so engineers don't need to go out of their way to find what they need to use.'
Looking ahead
Build Sketch
Beyond its Assistant, the future is bright for Salesforce. And while Kirupa can't talk too much about their plans, he does share a few little tidbits. 'We'll continue to invest in the big areas we've been actively talking about over the past year, including guidance and documentation, tooling support, richer component styling (via Styling Hooks), accessibility support (including WCAG 2.0 and 2.1), mobile-friendly enhancements, an improved color system, and much more.'
But for Kirupa, what's more exciting than any of these future plans is seeing how people use the Lightning Design System to create amazing work. Sometimes, they go far beyond what the team could ever have planned. 'My favorite cool story is when someone dropped by our booth at Dreamforce and explained how they are using the design system to help build a Virtual Reality experience for navigating through their data,' he laughs. 'I often wonder if they were from the future!'
