Using Design System in Lightning Components

Using Design System in Lightning Components  Raja Rao DV  Developer Evangelist  rraodv@salesforce.com  @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

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

Map SLDS attributes to Component Attributes Building SLDS Components – Step 1 21 3 1 2 3 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-* Listening To Clicks And Passing Data 1 2 21

Usage: Listening To Clicks And Passing Data

SLDS Sample Components Project (SLDSX)

Open Source project SLDS Sample Components

Adding Components To Lightning Experience

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@salesforce.com  @twitterhandle   Subtitle placeholder

Title Slide B Subtitle placeholder  First Name Last Name  Title of Presenter  email@salesforce.com  @twitterhandle

Title Slide C Subtitle placeholder First Name Last Name Title of Presenter email@salesforce.com @twitterhandle

Title Slide C Working example First Name Last Name Title of Presenter email@salesforce.com @twitterhandle

Basic 2 Layout  Subtitle placeholder

 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

 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

 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

 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

 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 placeholderSubtext 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.  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

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

4-Column Photos Placeholder for text Placeholder for text Placeholder for text Placeholder for text  Subtitle placeholder

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

 “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

 Lorem ipsum dolor sit amet, consectetur  Cras egestas mauris ut faucibus cursus  Pellentesque et risus ac turpis maximus Vertical Split Layout  Subtitle placeholder

Third Split Layout  Text, images, charts, tables can be put in this placeholder.  Subtitle placeholder

Third Split 2 Layout  Text, images, charts, tables can be put in this placeholder.  Subtitle placeholder

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

Speaker slide A Title, company placeholder

Speaker slide B Title, company placeholder

Chart and Data Examples The following are slides that show the ﬂexibility 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 Title 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 Insert a text box here to focus on this one large piece Source: placeholder

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

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

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

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

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

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.

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

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

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 CommunityApps Analytics

Connect with your customers in a whole new way The Customer Success Platform Sales Service Marketing CommunityApps 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 diﬀerent 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

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 Speciﬁc 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 Oﬀ Windows: ALT + F9 or Right click in blue area oﬀ 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

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

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 ﬁnding solid business beneﬁts 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 eﬃcitur 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)

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

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

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

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

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

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

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>DocumentsCustom 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>DocumentsCustom 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

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.

 PowerPoint For Mac 2011 •  Open the PowerPoint ﬁle. •  Click on the Theme tab. •  Click “Save Theme”. •  Click Save. Installing the Theme on a Mac PowerPoint for Mac 2011Salesforce

 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

 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

 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. PowerPoint for Mac 2011

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

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

More Related Content

Viewers also liked

Similar to Using Design System in Lightning Components

More from Salesforce Developers

Recently uploaded

Using Design System in Lightning Components