Using Design System in Lightning Components

Using Design System in Lightning Components

 Raja Rao DV  Developer Evangelist  [email protected]  @rajaraodv  

Learn how to build reusable components that use Design System

 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

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

Introduction to SLDS Subtitle placeholder

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

Introduction to Lightning Components Subtitle placeholder

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

Dividing The App Into Components

How would you divide this app?

Here is one way to divide the app

Loading SLDS

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

Mapping SLDS To LC A Pattern

Map SLDS attributes to Component Attributes

Building SLDS Components – Step 1

2 1

3

1 23

Usage:

Add some JavaScript to generate the markup or add additional functionalities

Building SLDS Components – Step 2

Listening To Clicks And Passing Data

Use Aura.Action And data-*


1 2

2 1

Usage:


SLDS Sample Components Project (SLDSX)

Open Source project

SLDS Sample Components

Adding Components To Lightning Experience

Open Source project

Layouts The following slides are the basic, default layout options built into the template

 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

Title Slide A

 First Name Last Name  Title of Presenter  [email protected]  @twitterhandle  

Subtitle placeholder

Title Slide B Subtitle placeholder

 First Name Last Name  Title of Presenter  [email protected]  @twitterhandle  

Title Slide C Subtitle placeholder

First Name Last Name Title of Presenter [email protected] @twitterhandle

Title Slide C Working example

First Name Last Name Title of Presenter [email protected] @twitterhandle

Basic 2 Layout  Subtitle placeholder

 Either of these placeholders can hold text, table, charts, smart art, or media.


2-Column Layout  Subtitle placeholder



2-Column Gray Layout  Subtitle placeholder

 These three placeholders can hold text, table, charts, smart art, or media.



 Subtitle placeholder 3-Column Layout




 Subtitle placeholder 3-Column Gray

 Lorem ipsum dolor sit amet, consectetur

 Cras egestas mauris ut faucibs cursus

 Pellentesque et risus ac turpis maximus


 Cras egestas mauris ut faucibus cursus





Salesforce Content Salesforce Content Salesforce Content

Subtext placeholder Subtext placeholder Subtext placeholder

3-Column With Titles  Subtitle placeholder

Placeholder for text Placeholder for text Placeholder for text

 Subtitle placeholder 3-Column Photos Layout

 These placeholders can hold text, tables, charts, images, or media.




 Subtitle placeholder 4-Column Layout

4-Column Multi Layout

 These four placeholders can hold text, table, charts, smart art, or media.




 Subtitle placeholder

4-Column Photos

Placeholder for text Placeholder for text Placeholder for text Placeholder for text


Grow pipeline










Increase sales productivity

Improve rep performance Complete insight




Split 4-Column Layout

 “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

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




Vertical Split Layout  Subtitle placeholder

Third Split Layout

 Text, images, charts, tables can be put in this placeholder.


Third Split 2 Layout

 Text, images, charts, tables can be put in this placeholder.


Basic Dark Layout Subtitle placeholder







 Example of subtly highlighted text

 Example of boldly highlighted text

Divider Subtitle placeholder

Speaker slide A Title, company placeholder

Speaker slide B Title, company placeholder

Thank you

Chart and Data Examples The following are slides that show the flexibility of the default layouts

 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

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

Sales

1st Qtr 2nd Qtr 3rd Qtr 4th Qtr

Chart title or slide subtitle Example of a Pie Chart (Default)

Source: placeholder

Chart title or slide subtitle Example of a Pie Chart (Custom)

1st Quarter

2nd Quarter

3rd Quarter

4th Quarter


Source: placeholder

0

1

2

3

4

5

6


Chart Title

Series 1 Series 2 Series 3 Series 4

Chart title or slide subtitle Example of a Line Chart (Default)

Source: placeholder

0

6



Chart title or slide subtitle Example of a Line Chart (Custom)

4.3

4.4

Source: placeholder

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




Source: placeholder

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


1st Quarter

2nd Quarter

3rd Quarter

4th Quarter


Source: placeholder

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

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

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



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.















Example of a Table  Table title or slide subtitle




































Table title or slide subtitle Example of a Table

Example of a Table Table title or slide subtitle


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

Graphic Assets

 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

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

Connect with your customers in a whole new way The Customer Success Platform

Sales Service

Marketing

Community Apps

Analytics

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

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

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

Complete Grid Layout

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

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.







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

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

Sales

Analytics

Service Marketing

Platform

Default

Communities

Icons

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

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

Lumia 925 Nexus 5

Additional Devices

Note: Phones are to scale in relationship to one another, use this slide as a reference

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.

Device Shadow  Resize and layer as needed

In color Salesforce Brand Extension Logos (In Salesforce Sans)

In white Salesforce Brand Extension Logos (In Salesforce Sans)

In color Additional Logos (In Salesforce Sans)

In white Additional Logos (In Salesforce Sans)

Salesforce Logo  No tagline

Salesforce Corporate Signature Logo (In Salesforce Sans)  Vertical tagline stacked (2 Line Preferred)

Salesforce Corporate Signature Logo (In Salesforce Sans)  Vertical taglines (2 Line Preferred)

Salesforce1 Logos

Service Cloud  Subtitle placeholder







 Example of highlighted text

Sales Cloud  Subtitle placeholder








Marketing Cloud  Subtitle placeholder








Platform  Subtitle placeholder








Analytics Cloud  Subtitle placeholder








Community Cloud Subtitle placeholder








Setting Up the Template Salesforce 2015

 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

 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

Advanced Features and Setup

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.


•  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

 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


•  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 (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.

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.

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

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.


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.


Welcome to Salesforce Sans Salesforce 2015

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

How To Find and Replace Fonts on a PC

2

3

1

Select any text>Home Tab>Replace>Select Replace Fonts>Replace

 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

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

Using Design System in Lightning Components

Technology

Transcript of Using Design System in Lightning Components