The Lightning Design System is a framework for building dynamic user experiences on the Salesforce Platform and it now has a free plugin for Sketch.
Sketch is a design toolkit built to help you create wireframes, mockups, sample screens & more. With the plugin, you can quickly mock up Salesforce user interfaces using the collection of prebuilt components in this plugin.
In this article, I’ll show you how to use the Sketch plugin to quickly design and deploy Salesforce user interfaces.
Setup
First, you need to get the Sketch application: you can grab a free trial here. It’s generally used by product designers but is very intuitive and easy to use. If I got my head around the basics within minutes you can too!
Top Tip: Sketch is only available on Mac computers.
Once you have the application ready, download the plugin.
Double click to install and hit Command + J to open in Sketch. You’ll then see a screen similar to the image below, make sure you tick all the options.
Ticking all the options ensures you are downloading all the available libraries so that you have all icons, charts, actions, etc available for your designs.
Try it out!
Place a new artboard on the canvas (insert + artboard) and choose on the right if you are designing for mobile, tablet, or desktop.
You’ll notice from the Sketch plugin that there’s a search bar to look for components; you can also browse the navigation sections by libraries.
By clicking on a component you get a description and, when available, the different variants that this component has.
Select the background and navigation from the standard artboard, fit it to the dimensions of your Sketch canvas. You can add ‘cards’ to define some page sections.
You can insert a path by simply typing in the search bar and dragging it from the plugin into your canvas, look for a data table, button, icon, alert, chart… you name it!
You’ll see that multiple similarities appear in the search, they’ve designed this feature with synonyms to easily relatable searches, so you’ll return results even if your terms don’t directly match the name.
Yes, it’s that simple.
And guess what? It doesn’t have to be Salesforce to the core, you can use some of the components to help you define spacing and areas on your canvas. I was doing this just the other day to define a Heruku app React page.
My #SalesforceSaturday is being rather fun so far, nice outside 5k run, lovely breakfast & not playing with #SLDS with @sketch https://t.co/S7KQGtKdZs exciting times ahead! What are you up to? pic.twitter.com/kyQNiw42UC
— Ines Garcia 🌎 (@Inescapinezka) August 1, 2020
Share it
Don’t spend too much time on it, the idea is that it’s quick, so you can spin up an idea and share it with your team.
Once you are ready, export by selecting the name of your artboard in the canvas and you will see on the right hand side export options for your file (pdf, jpeg, or png).
Summary
You may have previously used pen and paper or a simple Google drawing to discuss a UI design idea, now you can use Sketch to do it with high resolution and spec, fast! Using the prebuilt components on the fly, you can have application prototypes designed quickly, reducing waste when developing on the Salesforce Platform in the Lightning Design System.
Check out this Trailmix in Trailhead to help you get started.
Comments: