Platforms

iOS

Getting Started

Use our iOS integration to style your native iOS applications to be consistent with the Salesforce Lightning Design System.

The Salesforce Lightning Design System iOS Static Library includes:

  • Compiled Design Tokens
  • The Salesforce Sans Font
  • The Salesforce Lightning Design System Icons
  • Helper Classes

While we encourage a holistic integration of the entire design system, you are free to include as many or as few of the following modules as you need in your app. Each module will import a small subset of design tokens or icons.

Simple InstallSimple Install

Install CocoaPods:

$ sudo gem install cocoapods

Navigate to your iOS project directory and run:

$ pod init

A Podfile will be created at the root of your project directory.

Add the following to your Podfile under use_frameworks!:

pod 'DesignSystem'

Run:

$ pod install

A workspace for you project will be created (ending in .xcworkspace)

Open this workspace file in xcode. Use this workspace for future builds.

After opening the workspace go to YourProject -> YourProjectTarget -> Build Settings -> Header Search Paths, and remove everything but $(inherited) non-recursive.

Manual-Submodule-Subproject-SetupManual Submodule/Subproject Setup

See here.

Sample-AppSample Application

See Sample App for a library browser and sample code.

Swift-UsageSwift Usage

Swift-SetupSetup

Import the library in each file:

import DesignSystem

SLDS extensions and constants are now accessible within your file.

Swift-ExamplesExamples

Colors

let backgroundColor = UIColor.sldsBackgroundColor(.colorBackground)

let borderColor = UIColor.sldsBorderColor(.colorBorderBrand)

let fillColor = UIColor.sldsFill(.brand)

let textColor = UIColor.sldsTextColor(.colorTextDefault)

Color Overrides

Set up an override then use colors as you normally would throughout your application.

UIColor.sldsOverrideBackgroundColor(.colorBackground, with: UIColor.cyan)
let backgroundColor = UIColor.sldsBackgroundColor(.colorBackground)

UIColor.sldsOverrideBorderColor(.colorBorderBrand, with: UIColor.cyan)
let borderColor = UIColor.sldsBorderColor(.colorBorderBrand)

UIColor.sldsOverrideFill(.brand, with: UIColor.cyan)
let fillColor = UIColor.sldsFill(.brand)

UIColor.sldsOverrideTextColor(.colorTextBrand, with: UIColor.cyan)
let textColor = UIColor.sldsTextColor(.colorTextDefault)

Fonts and Text Sizes

label.font = UIFont.sldsFont(.bold, with: .medium)

Icons

Action Icons

let icon = UIImage.sldsActionIcon(.addContact, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldsActionIcon(.addContact, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)

Custom Icons

let icon = UIImage.sldsCustomIcon(.custom1, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldCustomIcon(.custom1, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)

Standard Icons

let icon = UIImage.sldsStandardIcon(.account, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldsStandardIcon(.account, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)

Utility Icons

let icon = UIImage.sldsUtilityIcon(.addContact, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldsUtilityIcon(.addContact, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)

Obj-C-UsageObjective-C Usage

Obj-C-ExamplesExamples

Colors

#import <DesignSystem/SalesforceDesignSystem.h>

...

UIColor* backgroundColor = [UIColor sldsBackgroundColor:SLDSCardColorBackground];

UIColor* borderColor = [UIColor sldsBorderColor:SLDSColorBorderBrand];

UIColor* fillColor = [UIColor sldsFill:SLDSFillBrand];

UIColor* textColor = [UIColor sldsTextColor:SLDSColorTextBrand];

Color Overrides

Set up an override then use colors as you normally would throughout your application.

#import <DesignSystem/SalesforceDesignSystem.h>

...

UIColor sldsOverrideBackgroundColor:SLDSCardColorBackground with:UIColor.cyanColor];
UIColor* backgroundColor = [UIColor sldsBackgroundColor:SLDSCardColorBackground];

[UIColor sldsOverrideBorderColor:SLDSColorBorderBrand with:UIColor.cyanColor];
UIColor* borderColor = [UIColor sldsBorderColor:SLDSColorBorderBrand];

[UIColor sldsOverrideFill:SLDSFillBrand with:UIColor.cyanColor];
UIColor* fillColor = [UIColor sldsFill:SLDSFillBrand];

[UIColor sldsOverrideTextColor:SLDSColorTextBrand with:UIColor.cyanColor];
UIColor* textColor = [UIColor sldsTextColor:SLDSColorTextBrand];

Fonts and Text Sizes

#import <DesignSystem/SalesforceDesignSystem.h>

...

UIFont* f = [UIFont sldsFont:SLDSFontRegular withSize:SLDSFontSizeXLarge];

Icons

Action Icons

#import <DesignSystem/SalesforceDesignSystem.h>

...

UIImage *icon = [UIImage sldsActionIcon:SLDSIconActionNewCustom98 withSize:20.0f];

Custom Icons

#import <DesignSystem/SalesforceDesignSystem.h>

...

UIImage *icon = [UIImage sldsCustomIcon:SLDSIconCustom1 withSize:20.0f];

Standard Icons

#import <DesignSystem/SalesforceDesignSystem.h>

...

UIImage *icon = [UIImage sldsStandardIcon:SLDSIconStandardAccount withSize:20.0f];

Utility Icons

#import <DesignSystem/SalesforceDesignSystem.h>

...

UIImage *icon = [UIImage sldsUtilityIcon:SLDSIconUtility3dots withSize:20.0f];