Platforms

iOS

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

The Lightning Design System iOS Static Library includes:

  • Compiled Design Tokens
  • The Salesforce Sans Font
  • The 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.

SetupSetup

The iOS Design Tokesn use Cocoapods to integrate with your project. If you are already set up with pods add the line below to your Podfile. Otherwise go to cocoapods.org to get set up.

pod 'DesignSystem'

Then run:

pod install

Swift UsageSwift Usage

Swift IntegrationSwift Integration

To use the SLDS library in Swift, create a bridging header:

#ifndef slds_bridging_header_h
#define slds_bridging_header_h

#import <SalesforceDesignSystem/SalesforceDesignSystemExtended.h>

#endif
  1. Create slds-bridging-header.h.
  2. In build settings, locate the “Swift Compiler – Code Generation” section.
  3. Next to “Objective-C Bridging Header,” add the header file (e.g. slds-bridging-header.h).

SLDS extensions and constants are now accessible to all files in your project/workspace. There is no need to import the Design system to each file.

ColorsColors

let textColor = UIColor.sldsColorText(.default)

let borderColor = UIColor.sldsColorBorder(.brand)

let backgroundColor = UIColor.sldsColorBackground(.brand)

Fonts and Text SizesFonts and Text Sizes

In addition to supporting the default (SaleforceSans) font, users can substitute fonts as needed.

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

// Setup and use a custom font
UIFont.sldsUse("customFontName", fromBundle: "CustomFontBundleName", for: .light)
label.font = UIFont.sldsFont(.bold, with: .light)

// Undo a custom font override
UIFont.sldsUseDefaultFont(for: .light)

IconsIcons

Action Icons

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

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

Custom Icons

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

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

Standard Icons

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

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

Utility Icons

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

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

Obj-C UsageObj-C Usage

ColorsColors

Text Colors

#import <DesignSystem/DesignSystem.h>

...

UIColor* c = [UIColor sldsColorText:SLDSColorTextInverse];

Background Colors

#import <DesignSystem/DesignSystem.h>

...

UIColor* c = [UIColor sldsColorBackground:SLDSColorBackgroundAltInverse];

Border Colors

#import <DesignSystem/DesignSystem.h>

...

UIColor* c = [UIColor sldsColorBorder:SLDSColorBorderBrand];

Fonts and Text Sizes

Fonts and Text Sizes

In addition to supporting the default (SaleforceSans) font, users can substitute fonts as needed.

#import <DesignSystem/DesignSystem.h>

...

UIFont* lightFont = [UIFont sldsFontLightWithSize:SLDSFontSizeXLarge];

UIFont* regularFont = [UIFont sldsFontRegularWithSize:SLDSFontSizeXLarge];

UIFont* strongFont = [UIFont sldsFontStrongWithSize:SLDSFontSizeXLarge];

// Override with a custom font
[UIFont sldsUse:"customFontName", fromBundle: "CustomFontBundleName", for: SLDSFontTypeLight];
UIFont* customFont = [UIFont sldsFontLightWithSize:SLDSFontSizeXLarge];

// Undo a font override
[UIFont sldsUseDefaultFontFor: SLDSFontTypeLight];

IconsIcons

Action Icons

#import <DesignSystem/DesignSystem.h>

...

UIImage* actionIcon = [UIImage sldsIconAction:SLDSIconActionApproval withSize:SLDSSquareIconSmall];

Custom Icons

#import <DesignSystem/DesignSystem.h>

...

UIImage* customIcon = [UIImage sldsIconCustom:SLDSIconCustom1 withSize:SLDSSquareIconSmall];

Standard Icons

#import <DesignSystem/DesignSystem.h>

...

UIImage* standardIcon = [UIImage sldsIconStandard:SLDSIconStandardAccount withSize:SLDSSquareIconSmall];

Utility Icons

#import <DesignSystem/DesignSystem.h>

...

UIImage* utilityIcon = [UIImage sldsIconUtility:SLDSIconUtilityAnnouncement withSize:SLDSSquareIconSmall];