- [John] Hey everyone, my name is John Earle
and I'm a UX Engineer at Salesforce.
And today I'm joined by Becca Yukelson
who is a Product Designer here.
We both work on the Lightning Design System, or SLDS,
which is a framework for building dynamic experiences
on the Salesforce platform.
Today, we'll be demoing the new SLDS Sketch plugin.
It's a free plugin that's available right now.
This plugin allows users to quickly mock up Salesforce UIs,
using our collection of pre-built components in Sketch.
Now, Sketch is a tool that product designers use
to mock up UI experiences.
In many ways, it's the modern day Photoshop
for designing web products and websites.
Now although Sketch is a design tool,
the SLDS Sketch plugin isn't just for designers.
We've built it to be used by all trailblazers
who design or build experiences on Salesforce.
In the past, you may have tried
to convey an idea with pen and paper,
but now you can just as easily design
in a higher fidelity way.
The ability to quickly create new experiences
is particularly important right now,
as businesses must adapt their Salesforce instances
in response to COVID-19.
We really believe the SLDS Sketch plugin
is key to enhancing productivity
in your journey to reopening.
Now I'm going to hand it off to Becca,
who will demo the plugin for us.
- [Becca] Thanks, John.
Hey everyone, before we get started,
you'll want to make sure you have a Mac computer,
Sketch downloaded and the plugin installed.
If you're not set up just yet,
you can pause the video and press play when you're ready.
Now, you're ready to start building your first UI in Sketch.
For today's demo, we're going to create
a fictitious opportunity page.
Imagine you have a customer who wants to see
all their contacts in an opportunity record similar
to the standard opportunity page.
However, they'd also like to see a data visualization
of their lead breakdown on the right hand side.
You're going to use the Sketch plugin
to quickly mock up this idea for your stakeholders.
First, you'll make sure to have Sketch opened
and you'll start by placing a new Artboard on your Canvas.
You'll want to click Insert, Artboard.
Then, you'll choose your artboard
from the options on the right.
We'll start with the Desktop HD size.
Now, we're ready to unleash the power of the plugin.
With your keyboard, hit Command+J to open it up.
As you can see, this panel pops out
with onboarding instructions.
I'm going to go ahead and click Next.
When you get to this Art Library screen,
you'll want to check all the options
to follow along with the demo.
Then you'll click Next,
and you'll get a confirmation screen.
And once you've completed the onboarding,
you'll see the main UI.
At the top, there's a search bar to search for components.
On the left, that's the navigation
to switch between libraries.
If you click on a component name,
you can see the description and the different variants.
Now, let's get started.
The SLDS Sketch plugin offers a great starting point for you
with our standard artboards.
We're going to navigate to that section
and select the artboard that already
has a background and navigation.
I'm going to click on this component
and place it roughly on my artboard.
Now, in order to get my canvas to fit the dimensions
of my standard artboard sample,
I'm going to just click on the Artboard here,
and then click the Fit button over here in Sketch.
Now, my standard artboard is matching the dimensions
of my Sketch canvas.
Next, we'll add some cards to compartmentalize our UI a bit.
I'm going to navigate back to All Libraries,
and I'm going to search for a card
and start dragging a card onto my page.
Eventually, my canvas is going to start
to look something like this.
Now we're going to add some components
that we know our users will love.
I'm going to look for a sales path by typing in Path.
I'll click on this Sales Path component
and place it here where Sales Path
would typically live in the product.
Next, I know I want a data table to see my contacts.
So I'm going to search for a data table
and click on this component here and place it on my canvas.
I can keep dragging data table symbols here
and placing it on my canvas.
And the page is going to start to look something like this.
Now I want to build out my data visualization
on the right hand side.
I'm going to navigate to the Charts component library here.
And this donut chart looks good to me.
So I'm going to click on it and place it on my canvas.
Finally, we'll add some icons by navigating over
to our Icon library.
As an example, I want a phone icon.
So I'm going to search the word Phone.
As you can see, there are a bunch of icons
that match the search term Phone.
This is because we have built in synonyms
so users can search for icons that are related
even if it doesn't directly match the name.
If I want to put the phone icon on my canvas,
I just simply click on it and place it on my artboard.
Your final design could look something like this.
But remember, this doesn't necessarily need
to be pixel-perfect if you're just trying to get an idea
across to your stakeholders.
Now that you've built your first UI using the Sketch plugin,
you'll want to export it so you can share it with your team.
All you have to do is select your final artboard
by clicking the name of the artboard
in the upper left hand corner,
then you'll navigate to the Export section
of your Sketch file.
You may have presets already, but if you don't,
you can click this Plus sign here.
You can select the file format,
whether it's PDF, JPEG, or PNG.
And then once you've selected that,
you just click Export Selected.
Thank you for listening.
And now I'm going to hand it back to John.
- [John] Thanks for the demo, Becca.
Now obviously, feel free to customize your design
to best fit your use case
or the problem you're trying to solve.
It really is a great way to quickly communicate ideas
without writing any code.
Now we hope you're as excited about the plugin as we are.
Just in case you weren't able to follow along right now,
here are the links to get you up and running.
We're continuing to develop the plugin
and add new features constantly.
We're already hard at work on the next version.
Some features in this version might include design linting,
and automatic specifications for developers.
But we'd love to hear from you
about what would best improve your workflow.
If you have any feedback or feature ideas,
you can fill out our feedback form directly in the plugin
by clicking on the Settings wheel.
The SLDS Sketch plugin is just one part of our growing suite
of designer and developer tools,
built around the Salesforce Lightning Design System.
Once your design has been finalized using the plugin,
check out our brand new SLDS VScode extension
to help code it up.
We're working on creating even more design curriculum
and tools for you.
Please tell us what would help you most
by taking this quick survey.
Thank you so much for taking the time
to learn about the SLDS Sketch plugin.
We really hope it helps your team
to quickly create impactful experiences on Salesforce.