using design system in lightning components
TRANSCRIPT
![Page 1: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/1.jpg)
Using Design System in Lightning Components
Raja Rao DV Developer Evangelist [email protected] @rajaraodv
Learn how to build reusable components that use Design System
![Page 2: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/2.jpg)
Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
Safe Harbor
![Page 3: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/3.jpg)
Agenda Interactive Session
1. Basics
• Introduction to SLDS
• Introduction to Lightning Components
• SLDS + LC
2. SLDSX open-source project
• Overview
3. Adding Components To SFX
![Page 4: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/4.jpg)
Introduction to SLDS Subtitle placeholder
![Page 5: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/5.jpg)
A downloadable set of CSS, HTML, icons, color palettes, and a custom font
Enables you to build custom applications with a look and feel that is consistent with Salesforce core features
Provides a platform-agnostic CSS framework
Delivers access to all of the Salesforce core visual and interaction design patterns
What is the Design System? A brief overview
![Page 6: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/6.jpg)
Introduction to Lightning Components Subtitle placeholder
![Page 7: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/7.jpg)
Lightning Components Framework is a JavaScript framework that helps you build JS apps by dividing it into components. Components are made up of: • Markup • JavaScript • CSS
Backbone for all the latest apps built by Salesforce. • S1 Mobile App • Lightning App Builder • Lightning Process Builder • Lightning Experience (Desktop) • .. and more
Lightning Components Framework
![Page 8: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/8.jpg)
Dividing The App Into Components
![Page 9: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/9.jpg)
How would you divide this app?
![Page 10: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/10.jpg)
Here is one way to divide the app
![Page 11: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/11.jpg)
Loading SLDS
![Page 12: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/12.jpg)
1. Add SLDS as static resource and load it using ltng:require component 2. Add a div with class “slds”
Static Resource & “slds” div container
![Page 13: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/13.jpg)
Mapping SLDS To LC A Pattern
![Page 14: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/14.jpg)
Map SLDS attributes to Component Attributes
Building SLDS Components – Step 1
2 1
3
1 23
Usage:
![Page 15: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/15.jpg)
Add some JavaScript to generate the markup or add additional functionalities
Building SLDS Components – Step 2
![Page 16: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/16.jpg)
Listening To Clicks And Passing Data
![Page 17: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/17.jpg)
Use Aura.Action And data-*
Listening To Clicks And Passing Data
1 2
2 1
![Page 18: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/18.jpg)
Usage:
Listening To Clicks And Passing Data
![Page 19: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/19.jpg)
SLDS Sample Components Project (SLDSX)
![Page 20: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/20.jpg)
Open Source project
SLDS Sample Components
![Page 21: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/21.jpg)
Adding Components To Lightning Experience
![Page 22: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/22.jpg)
![Page 23: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/23.jpg)
Open Source project
![Page 24: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/24.jpg)
Layouts The following slides are the basic, default layout options built into the template
![Page 25: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/25.jpg)
This slide is made for easy layout of text, charts, tables, images, and other media
First level text is set at 20 point Salesforce Sans
• Second line bullets are 18 point Salesforce Sans
• Third level text is set at 16 point Salesforce Sans
• Limit the number of bullets on a slide
Fourth level text Fifth level text for text sourcing
Example of subtly highlighted text
Example of boldly highlighted text
Subtitle placeholder 24 points Basic Layout
![Page 26: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/26.jpg)
Title Slide A
First Name Last Name Title of Presenter [email protected] @twitterhandle
Subtitle placeholder
![Page 27: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/27.jpg)
Title Slide B Subtitle placeholder
First Name Last Name Title of Presenter [email protected] @twitterhandle
![Page 28: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/28.jpg)
Title Slide C Subtitle placeholder
First Name Last Name Title of Presenter [email protected] @twitterhandle
![Page 29: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/29.jpg)
Title Slide C Working example
First Name Last Name Title of Presenter [email protected] @twitterhandle
![Page 30: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/30.jpg)
Basic 2 Layout Subtitle placeholder
![Page 31: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/31.jpg)
Either of these placeholders can hold text, table, charts, smart art, or media.
Either of these placeholders can hold text, table, charts, smart art, or media.
2-Column Layout Subtitle placeholder
![Page 32: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/32.jpg)
Either of these placeholders can hold text, table, charts, smart art, or media.
Either of these placeholders can hold text, table, charts, smart art, or media.
2-Column Gray Layout Subtitle placeholder
![Page 33: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/33.jpg)
These three placeholders can hold text, table, charts, smart art, or media.
These three placeholders can hold text, table, charts, smart art, or media.
These three placeholders can hold text, table, charts, smart art, or media.
Subtitle placeholder 3-Column Layout
![Page 34: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/34.jpg)
These three placeholders can hold text, table, charts, smart art, or media.
These three placeholders can hold text, table, charts, smart art, or media.
These three placeholders can hold text, table, charts, smart art, or media.
Subtitle placeholder 3-Column Gray
![Page 35: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/35.jpg)
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibs cursus
Pellentesque et risus ac turpis maximus
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
Salesforce Content Salesforce Content Salesforce Content
Subtext placeholder Subtext placeholder Subtext placeholder
3-Column With Titles Subtitle placeholder
![Page 36: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/36.jpg)
Placeholder for text Placeholder for text Placeholder for text
Subtitle placeholder 3-Column Photos Layout
![Page 37: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/37.jpg)
These placeholders can hold text, tables, charts, images, or media.
These placeholders can hold text, tables, charts, images, or media.
These placeholders can hold text, tables, charts, images, or media.
These placeholders can hold text, tables, charts, images, or media.
Subtitle placeholder 4-Column Layout
![Page 38: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/38.jpg)
4-Column Multi Layout
These four placeholders can hold text, table, charts, smart art, or media.
These four placeholders can hold text, table, charts, smart art, or media.
These four placeholders can hold text, table, charts, smart art, or media.
These four placeholders can hold text, table, charts, smart art, or media.
Subtitle placeholder
![Page 39: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/39.jpg)
4-Column Photos
Placeholder for text Placeholder for text Placeholder for text Placeholder for text
Subtitle placeholder
![Page 40: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/40.jpg)
Grow pipeline
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
Increase sales productivity
Improve rep performance Complete insight
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
Split 4-Column Layout
![Page 41: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/41.jpg)
“We take more orders than ever with Salesforce.”
Bullets are set in 20 point Salesforce Sans
Limit the number of bullets on a slide
Try not to go below the recommended font sizes
Customer Hero A
Buddy Valastro, President & CEO, Carlo’s Bakery
![Page 42: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/42.jpg)
Customer Hero B
“We take more orders than ever with Salesforce.” Buddy Valastro, President & CEO, Carlo’s Bakery
Bullets are set in 20 point Salesforce Sans
Limit the number of bullets on a slide
Try not to go below the recommended font sizes
![Page 43: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/43.jpg)
Lorem ipsum dolor sit amet, consectetur
Cras egestas mauris ut faucibus cursus
Pellentesque et risus ac turpis maximus
Vertical Split Layout Subtitle placeholder
![Page 44: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/44.jpg)
Third Split Layout
Text, images, charts, tables can be put in this placeholder.
Subtitle placeholder
![Page 45: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/45.jpg)
Third Split 2 Layout
Text, images, charts, tables can be put in this placeholder.
Subtitle placeholder
![Page 46: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/46.jpg)
Basic Dark Layout Subtitle placeholder
This slide is made for easy layout of text, charts, tables, images, and other media
First level text is set at 20 point Salesforce Sans
• Second line bullets are 18 point Salesforce Sans
• Third level text is set at 16 point Salesforce Sans
• Limit the number of bullets on a slide
Fourth level text Fifth level text for text sourcing
Example of subtly highlighted text
Example of boldly highlighted text
![Page 47: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/47.jpg)
Divider Subtitle placeholder
![Page 48: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/48.jpg)
Speaker slide A Title, company placeholder
![Page 49: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/49.jpg)
Speaker slide B Title, company placeholder
![Page 50: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/50.jpg)
Thank you
![Page 51: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/51.jpg)
Chart and Data Examples The following are slides that show the flexibility of the default layouts
![Page 52: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/52.jpg)
Change all text within charts to the Salesforce Sans font.
It is recommend that you also change number values to Salesforce Sans, however you may keep Numerical values as associated with bars as Arial for ease of use.
If you are Creating a chart with number values that are not built into the template change them Salesforce Sans
Charts and Graphs Font Treatment
1st Quarter
2nd Quarter
3rd Quarter
4th Quarter
Insert a text box here to focus on this one large piece
4.3
2.5
3.5
4.5
Series 1
Chart Ti t le
Category 1 Category 2 Category 3 Category 4
![Page 53: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/53.jpg)
4.3
2.4 2.0
2.5
4.4
2.0
3.5
1.8
3.0
4.5
2.8
5.0
2.9
4.0
2.0
3.2 3.1
2.5
Series 1 Series 2 Series 3
Chart Title
Category 1 Category 2 Category 3 Category 4 Category 5 Category 6
Chart title or slide subtitle Example of a Bar Chart (Custom)
Source: placeholder
![Page 54: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/54.jpg)
4.3
2.4 2.0
2.5
4.4
2.0
3.5
1.8
3.0
4.5
2.8
5.0
2.9
4.0
2.0
3.2 3.1
2.5
Series 1 Series 2 Series 3
Chart Title
Category 1 Category 2 Category 3 Category 4 Category 5 Category 6
Chart title or slide subtitle Example of a Bar Chart (Custom)
Source: placeholder
![Page 55: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/55.jpg)
Sales
1st Qtr 2nd Qtr 3rd Qtr 4th Qtr
Chart title or slide subtitle Example of a Pie Chart (Default)
Source: placeholder
![Page 56: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/56.jpg)
Chart title or slide subtitle Example of a Pie Chart (Custom)
1st Quarter
2nd Quarter
3rd Quarter
4th Quarter
Insert a text box here to focus on this one large piece
Source: placeholder
![Page 57: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/57.jpg)
0
1
2
3
4
5
6
Category 1 Category 2 Category 3 Category 4
Chart Title
Series 1 Series 2 Series 3 Series 4
Chart title or slide subtitle Example of a Line Chart (Default)
Source: placeholder
![Page 58: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/58.jpg)
0
6
Category 1 Category 2 Category 3 Category 4
Series 1 Series 2 Series 3 Series 4
Chart title or slide subtitle Example of a Line Chart (Custom)
4.3
4.4
Source: placeholder
![Page 59: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/59.jpg)
Example of a Chart with Supporting Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae est nec massa imperdiet faucibus eget et magna. Cras non sapien at eros sollicitudin dignissim ut vitae nunc. Donec non.
• Key takeaway one
• Key takeaway two
• Key takeaway three
• Key takeaway four 0
6
Category 1 Category 2 Category 3 Category 4
Series 1 Series 2 Series 3 Series 4
Subtitle placeholder
Source: placeholder
![Page 60: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/60.jpg)
Example of a Chart with Supporting Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae est nec massa imperdiet faucibus eget et magna. Cras non sapien at eros sollicitudin dignissim ut vitae nunc. Donec non.
• Key takeaway one
• Key takeaway two
• Key takeaway three
• Key takeaway four
Subtitle placeholder
1st Quarter
2nd Quarter
3rd Quarter
4th Quarter
Insert a text box here to focus on this one large piece
Source: placeholder
![Page 61: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/61.jpg)
Source: placeholder
8.2
3.2
1.4
1.2
Salesforce
IaaS
PaaS
On Premise
Service
Example of Charts Using the 2 Column Layout Subtitle placeholder
$12B Q1
58%
Q4
9% Q3
10%
Q2
23%
Source: placeholder
![Page 62: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/62.jpg)
Column title Column title Column title
Row title $00.00 $00.00 $00.00
Row title $00.00 $00.00 $00.00
Row title $00.00 $00.00 $00.00
Row title $00.00 $00.00 $00.00
Row title $00.00 $00.00 $00.00
Table title or slide subtitle Example of a Table
Source: placeholder
![Page 63: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/63.jpg)
Example of a Table Table title or slide subtitle
Intro heading text
Key takeaway text here, table title text here
Some additional detail text. If this table is presented in large room, do not use this chart, because it will be too small to read.
If this is going to be presented online or other personal presentation space, this text is as small as it should go.
Column title, can be multi-line
Column title, can be multi-line
Column title, can be multi-line
Row title Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse congue turpis maximus dignissim posuere.
Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse congue turpis maximus dignissim posuere.
Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse congue turpis maximus dignissim posuere.
Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
Row title Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse congue turpis maximus dignissim posuere.
Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse congue turpis maximus dignissim posuere.
Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse congue turpis maximus dignissim posuere.
Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
![Page 64: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/64.jpg)
Example of a Table Table title or slide subtitle
Column title Column title Column title
Row title Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse congue turpis maximus dignissim posuere.
Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse congue turpis maximus dignissim posuere.
Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse congue turpis maximus dignissim posuere.
Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
Row title Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse congue turpis maximus dignissim posuere.
Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse congue turpis maximus dignissim posuere.
Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse congue turpis maximus dignissim posuere.
Quisque sit amet justo ultrices, finibus massa eu, vehicula dui.
![Page 65: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/65.jpg)
Column title Column title Column title
Row title Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row title Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row title Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row title Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row title Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Table title or slide subtitle Example of a Table
![Page 66: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/66.jpg)
Example of a Table Table title or slide subtitle
Column title Column title Column title
Row title $00.00 $00.00 $00.00
Row title $00.00 $00.00 $00.00
Row title $00.00 $00.00 $00.00
Row title $00.00 $00.00 $00.00
Row title $00.00 $00.00 $00.00
Source: placeholder
![Page 67: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/67.jpg)
Graphic Assets
![Page 68: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/68.jpg)
Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
Safe Harbor
![Page 69: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/69.jpg)
Customer Success Platform As a navigational/breadcrumb tool
Right align and top align to this lock-up for
consistent placement
Sales Service Marketing
Community Analytics Apps
Sales Service
Marketing
Community Apps
Analytics
![Page 70: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/70.jpg)
Connect with your customers in a whole new way The Customer Success Platform
Sales Service
Marketing
Community Apps
Analytics
![Page 71: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/71.jpg)
10 palette colors Color Usage
Header/title
Bold Highlight
Subtle Highlight
Body
Typography Color Palette
These are the colors that the chart and table will default to, from left to right. More than six categories in a chart will cause the colors to automatically adjust to different shades of these six colors.
Logo colors
R 208 G 217 B 222
R 25 G 50 B 92
R 0 G 161 B 224
R 124 G 134 B 141
R 0 G 178 B 169
R 150 G 60 B 189
R 237 G 139 B 0
R 255 G 199 B 44
R 38 G 38 B 38
R 255 G 255 B 255
Subtle highlight can be found here
Bold Text (Salesforce
Blue)
Standard Text
Chart colors
High Contrast Colors (Avoid using unless necessary)
Analytics Color
Service Color
Marketing Color
Community Color
PowerPoint Background
208, 217, 222 25, 50, 92
![Page 72: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/72.jpg)
Salesforce Brand Color Family For colors not already in the PowerPoint palette, manually enter the RGB codes
0, 71, 187
0, 24, 113
146, 193, 233
65, 143, 222
167, 123, 202
150, 60, 189
100, 204, 201
0,178, 169
241, 180, 52
237, 139, 0
Brand Extensions
Corporate Colors
Secondary
0, 161, 224 124, 134, 141
242, 242, 242 208, 217, 222 124, 152, 174 25, 50, 92
Sales Service Marketing
251, 219, 101
255, 199, 44
Community Analytics Platform
78, 116, 139 0,60,77
PowerPoint Specific Background
Salesforce Blue Salesforce Gray
![Page 73: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/73.jpg)
Standard Drawing Guide Placement Layout Slide (Margins)
Realigning Guides Guides can can easily be bumped and moved accidentally.
This slide layout show you how to reset your guides.
NOTE: When working on any older deck, be sure to check and ensure that the guides in your deck are set.
1. Turn on your guides
2. Insert a new slide the using the Guide Layout slide option.
3. Do your guides align with the orange lines in the new slide? If yes, your guides are set, if not, proceed then realign each of the lines to line up with the lines shown on this page.
4. Once guides are reset, delete the Guide Layout Slide
What are Drawing Guides? Drawing guides are thin lines that that appear on all pages in the same spot, but don’t show up when you print or view deck in Show mode.
Think of them as internal margins for the proper alignment and consistent placement of content. Object will snap to them and they are also perfect for cropping an image to.
This template has pre-made guides that delineate where your workspace is. How to Turn Guides On and Off Windows: ALT + F9 or Right click in blue area off workspace >Grids and Guides>Display Drawing Guides on Screen
Mac 2011: Control + Option + Command + G or View>Guides>Static Guides
MAC 2008: Command + G or View>Guides>Static Guides The left and right top and bottom corners only
area you should work within on each slide.
Use this layout for realigning basic drawing guides or reference them as needed
![Page 74: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/74.jpg)
Complete Grid Layout
![Page 75: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/75.jpg)
Top bar
Change this to another color in the palette by placing a rectangle of measurement .1 height, and 12.96 width over the top. No shadows should be applied.
Align the rectangle to the top and right of the slide (How to: Drawing tools tab, Align, “Align to slide”: top, then right)
Sales
Service
Marketing
Community
Analytics
Platform
![Page 76: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/76.jpg)
Text Styles Ctrl+alt+C the text below to copy a text style; select the new text then click Ctrl+alt+V to paste the style Text styles can vary widely. The spacing between lines, paragraphs, and letters should organize the text into easily readable blocks, varied by the size of the font. Below are some text styles you can easily apply to your own text blocks.
The text style is using the sixth color in the color palette. The line spacing is single line spacing. The space between the paragraphs is set to 6 before, and 6 after.
To copy the style of this text box to your text boxes, select the entire text box (not the text inside), and click Ctrl+alt+C to copy the entire box style (not just the text style). Then select your own entire text box, and click Ctrl+alt+V.
If you select just your text and do the above, the paragraph spacing will not be copied.
The text style uses the sixth color in the color palette.
The line spacing is set to single space.
The space between the paragraphs is set to 6 before, 6 after.
The text style uses the sixth color in the color palette.
The line spacing is set to single space.
The space between the paragraphs is set to 6 before, 6 after.
The text style uses the sixth color in the color palette.
The line spacing is set to single space.
The space between the paragraphs is set to 6 before, 6 after.
![Page 77: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/77.jpg)
Slide Graphics
The style of Salesforce PowerPoint graphical elements are clean and bright. Use these styles consistently throughout your presentation so the visuals effectively support your presentation.
Ctrl+alt+C to copy a style from a graphic below; Ctrl+alt+V to paste that style to your own graphics
Shapes and gradients In general, the shapes should be flat colored (no gradient). The corners can have slightly rounded edges.
If a gradient fill is needed, use one that varies between different tints of the same color, not a gradient between two different colors.
Arrows Use arrows that have a closed, wide head.
Lines Lines should be thin, with flat ends. The exact width of the line will vary with need. The lines on this slide are 1 pt thick.
Shadows are subtle
Subtle Highlight Color
![Page 78: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/78.jpg)
Icon Examples
These are examples of how icons should be designed.
Make the icon white if the icon is enclosed (ie in a circle or some other shape).
Sales Service Marketing Community Analytics Platform
![Page 79: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/79.jpg)
Sales
Analytics
Service Marketing
Platform
Default
Communities
Icons
![Page 80: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/80.jpg)
Infographic Elements Use these samples to start your own infographic slides
70%
An IDC report sponsored by Salesforce shows that customers are finding solid business benefits with the platform:
Faster app development
83% More apps developed
520% ROI Proof: By the Numbers
Salesforce PaaS On-premise IaaS SaaS
Salesforce Cloud Infrastructure by the numbers
Always On
99.9% + Uptime (no sleeping here)
Speed
1.9 Billion + transactions a day with an average response time of less than 250ms
Innovation
4 Million + applications
Trust Built On
Transparency trust.salesforce.com
![Page 81: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/81.jpg)
Salesforce Devices Slide Device layout and shadows
iPhone 6 Galaxy S5
Note: Phones are to scale in relationship to one another, use this slide as a reference
![Page 82: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/82.jpg)
Lumia 925 Nexus 5
Additional Devices
Note: Phones are to scale in relationship to one another, use this slide as a reference
![Page 83: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/83.jpg)
Showing devices with text (example)
Integer porttitor metus non odio tincidunt, vitae porttitor magna interdum.
Pellentesque lobortis metus non enim viverra ornare.
Quisque efficitur nisl vel ligula tempus ornare.
Morbi sit amet erat luctus, ultrices libero sit amet, sollicitudin erat.
• Spec 1
• Spec 2
• Spec 3
Phasellus hendrerit nunc ac pharetra hendrerit. Cras fringilla convallis libero et faucibus.
![Page 84: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/84.jpg)
Device Shadow Resize and layer as needed
![Page 85: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/85.jpg)
In color Salesforce Brand Extension Logos (In Salesforce Sans)
![Page 86: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/86.jpg)
In white Salesforce Brand Extension Logos (In Salesforce Sans)
![Page 87: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/87.jpg)
In color Additional Logos (In Salesforce Sans)
![Page 88: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/88.jpg)
In white Additional Logos (In Salesforce Sans)
![Page 89: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/89.jpg)
Salesforce Logo No tagline
![Page 90: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/90.jpg)
Salesforce Corporate Signature Logo (In Salesforce Sans) Vertical tagline stacked (2 Line Preferred)
![Page 91: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/91.jpg)
Salesforce Corporate Signature Logo (In Salesforce Sans) Vertical taglines (2 Line Preferred)
![Page 92: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/92.jpg)
Salesforce1 Logos
![Page 93: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/93.jpg)
Service Cloud Subtitle placeholder
This slide is made for easy layout of text, charts, tables, images, and other media
First level text is set at 20 point Salesforce Sans
• Second line bullets are 18 point Salesforce Sans
• Third level text is set at 16 point Salesforce Sans
• Limit the number of bullets on a slide
Fourth level text Fifth level text for text sourcing
Example of highlighted text
![Page 94: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/94.jpg)
Sales Cloud Subtitle placeholder
This slide is made for easy layout of text, charts, tables, images, and other media
First level text is set at 20 point Salesforce Sans
• Second line bullets are 18 point Salesforce Sans
• Third level text is set at 16 point Salesforce Sans
• Limit the number of bullets on a slide
Fourth level text Fifth level text for text sourcing
Example of highlighted text
![Page 95: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/95.jpg)
Marketing Cloud Subtitle placeholder
This slide is made for easy layout of text, charts, tables, images, and other media
First level text is set at 20 point Salesforce Sans
• Second line bullets are 18 point Salesforce Sans
• Third level text is set at 16 point Salesforce Sans
• Limit the number of bullets on a slide
Fourth level text Fifth level text for text sourcing
Example of highlighted text
![Page 96: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/96.jpg)
Platform Subtitle placeholder
This slide is made for easy layout of text, charts, tables, images, and other media
First level text is set at 20 point Salesforce Sans
• Second line bullets are 18 point Salesforce Sans
• Third level text is set at 16 point Salesforce Sans
• Limit the number of bullets on a slide
Fourth level text Fifth level text for text sourcing
Example of highlighted text
![Page 97: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/97.jpg)
Analytics Cloud Subtitle placeholder
This slide is made for easy layout of text, charts, tables, images, and other media
First level text is set at 20 point Salesforce Sans
• Second line bullets are 18 point Salesforce Sans
• Third level text is set at 16 point Salesforce Sans
• Limit the number of bullets on a slide
Fourth level text Fifth level text for text sourcing
Example of highlighted text
![Page 98: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/98.jpg)
Community Cloud Subtitle placeholder
This slide is made for easy layout of text, charts, tables, images, and other media
First level text is set at 20 point Salesforce Sans
• Second line bullets are 18 point Salesforce Sans
• Third level text is set at 16 point Salesforce Sans
• Limit the number of bullets on a slide
Fourth level text Fifth level text for text sourcing
Example of highlighted text
![Page 99: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/99.jpg)
Setting Up the Template Salesforce 2015
![Page 100: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/100.jpg)
PC PowerPoint 2010 • Open the PowerPoint file.
• Chose File, Save As, <name>. Select PowerPoint Template (.potx) for the file type. Your computer will automatically navigate to the folder on your computer where the file should go.
• Choose save.
PC PowerPoint 2013 • Extract the template.
• Open the PowerPoint file.
• Choose File, Save As, Browse. Navigate to: C:\Users\<you>\Documents\Custom Office Templates\ <you> = your network login name / computer name
• Select (.potx) for the file type.
• Choose save.
Installing the Template
Note: The new PowerPoint template starts with a large number of sample slides, making the file size closer to that of a final file. Once you’ve started your new file from this template, it would be best to immediately remove all sample slides that you will not need to reference or use.
C:\Users\<you>\Documents\Custom Office Templates\
Filename
PowerPoint 2013
![Page 101: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/101.jpg)
PowerPoint For Mac 2011
• Open the PowerPoint template (.pptx).
• Click File, Save As, then change the Format to PowerPoint Template (.potx). The location will change to the correct Mac folder for storing PowerPoint for Mac 2011 templates.
• Click Save.
Installing the Template on a Mac
Note: The new PowerPoint template starts with a large number of sample slides, making the file size closer to that of a final file. Once you’ve started your new file from this template, it would be best to immediately remove all sample slides that you will not need to reference or use.
PowerPoint for Mac 2011
![Page 102: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/102.jpg)
Advanced Features and Setup
![Page 103: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/103.jpg)
Inserting Footer/Source Automatically Insert a Footer
1
2
A pre formatted text box will appear in the proper place at the bottom left of the page. Use this text box for sourcing material.
Mac 2008 and 2011: View > Header & Footer > Check Mark Footer > Apply
PC 2007 and PC 2011: Insert > Header & Footer > Check Mark Footer > Apply
NOTE: Do not apply to all. Only Apply a footnote on the page you are working on or you will potentially replace all footnotes throughout the deck with the one you are Applying to All with.
![Page 104: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/104.jpg)
PowerPoint For Mac 2011
• Open the PowerPoint file.
• Click on the Theme tab.
• Click “Save Theme”.
• Click Save.
Installing the Theme on a Mac
PowerPoint for Mac 2011 Salesforce
![Page 105: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/105.jpg)
PowerPoint 2010
• Open PowerPoint.
• Click File, New, My Templates.
• Select the template from the list and choose Ok.
• Choose Window button, Save As, rename your presentation and edit as needed.
PowerPoint 2013
• Choose File, New.
• Click Personal.
• Click on the template.
• Click the Create button.
Starting a New File
PowerPoint 2013
![Page 106: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/106.jpg)
PowerPoint For Mac 2011
• Open PowerPoint.
• Click File, New From Templates, My Templates.
• Select the template from the list and choose Ok.
• Choose File, Save As, rename your presentation and edit as needed.
Starting a New File on a Mac
PowerPoint for Mac 2011
![Page 107: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/107.jpg)
PowerPoint (2010 or 2013)
• Click File, select New, Blank Presentation.
PPT2010: adjust the new presentation size to be 13.33” wide and have a 10” height. PPT 2013, this will already be the default.
• Click on the Design tab. At the bottom right is a triangle to expand the menu further. Click it.
• Click “Browse for Themes…”
• Navigate to the template or any other file that uses the template. Click apply.
• The master layouts for the template will now be applied to the new document.
Starting a file this way applies the layouts to the backend, but does create a new file with all the sample slides.
Starting a New File Using the Theme
PowerPoint 2010 / 2013
Note: Applying the theme to an existing file will apply the layouts to the existing slides, but some artifact design elements may remain. Go to View, Slide master to remove the artifact elements. This method is only recommended for advanced users.
![Page 108: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/108.jpg)
Starting a New File Using the Theme on a Mac
PowerPoint for Mac 2011 PowerPoint For Mac 2011
(assumes the theme is installed) • Click File, select New Presentation.
• Click on the Theme tab.
• Select the Salesforce theme.
• Under Theme tab, Click “Slide Size”.
• Click Page size, and enter 13.33 for width and 7.5 for height.
• Alternatively
• Click “Browse for Themes…”
• Select “Salesforce” under My Themes Folder.
• Under Theme tab, Click “Slide Size”.
• Click Page size, and enter 13.33 for width and 7.5 for height.
![Page 109: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/109.jpg)
Making and Using Chart Masters Useful for streamlining the creation of a particular look on charts
Saving
• Adjust the fill colors, line colors/widths, axis options, legend and title options, etc.
• With the finished chart selected:
PowerPoint 2010: in the design tab of the chart tools tab click “Save as template”.
PowerPoint 2013: right click, then click “Save as template”.
• Give the chart master a descriptive name (ex. Horz bar chart).
Create new or applying to existing
• Select the chart you want to apply a chart master to.
• Navigate to Chart tools, Design, Change Chart Type, Templates.
• Select the chart you are looking for.
• Some adjustments maybe be necessary to accommodate the new set of data (the chart master was designed around a certain data set, and the new data may be much different).
PowerPoint 2010 / 2013
![Page 110: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/110.jpg)
Making Chart Templates for Mac Useful for streamlining the creation of a particular look on charts
Saving
• Adjust the fill colors, line colors/widths, axis options, legend and title options, etc.
• With the finished chart selected right click on the chart and select Save as Template.
• Give the chart master a descriptive name (ex. Horz bar chart).
• The save screen must be directing your saved file to the location “Chart Templates” (see screenshot right). If it is not, try closing, reopening, and trying again.
PowerPoint for Mac 2011
![Page 111: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/111.jpg)
Using Chart Templates for Mac Useful for streamlining the creation of a particular look on charts
Create new or applying to existing
• Select the chart you want to apply a chart template to.
• Navigate to Chart tab, then click the down button next to “Other” (see screenshot right).
• At the bottom of the options in the gallery are the chart templates you have created. Select the one you want, then make adjustments to the chart as necessary.
PowerPoint for Mac 2011
![Page 112: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/112.jpg)
Welcome to Salesforce Sans Salesforce 2015
![Page 113: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/113.jpg)
This Template Uses the Custom Salesforce Sans Font It is pre-installed on all Salesforce computers.
If You Are Copying Slides from an Older Deck Be Sure to Change All Text to Salesforce Sans You can do this manually or go globally by using the Find Replace Font Feature.
What if You Do Not Have Salesforce Sans Installed on Your Computer? If you are working on a computer that doesn’t have the Salesforce Sans font installed, please replace all instances of Salesforce Sans with Arial.
What if You Are Sending it to Someone that Doesn’t Have the Font Installed It is is recommended that you save your presentation as a PDF before sending it to third parties.
Use Find and Replace to Change Fonts Across Entire Deck or Within a Slide
1
2
3
4
How To Find and Replace Fonts on a Mac Select any text, go to Format>Replace Fonts>Change it to the New Font
OR
![Page 114: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/114.jpg)
How To Find and Replace Fonts on a PC
2
3
1
Select any text>Home Tab>Replace>Select Replace Fonts>Replace
![Page 115: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/115.jpg)
In earlier versions of the Corporate PowerPoint Template some paragraph line spacing may have been set to .9 or 8.5. This was to create lines of text that were tighter together.
The new Salesforce Sans Font needs to be set to single space.
You may need to manually change the value of paragraph line spacing in slides taken from previous versions of the template to ensure some letters don’t touch.
About Paragraph Line Spacing in Salesforce Sans Font
3
1
2
OR 1
2
![Page 116: Using Design System in Lightning Components](https://reader034.vdocuments.mx/reader034/viewer/2022042723/587197a51a28ab044e8b4faf/html5/thumbnails/116.jpg)
Text Character Spacing
In earlier Versions of PowerPoint the font Character Spacing may have been set to Condensed .02 or higher to create lettering that is tighter together.
In the new Salesforce Sans font, all Character spacing should be set to Normal.
You may need to manually change the value of character spacing in your text that comes from previous versions of the deck.
1
2 4
5
3