Natura Design System for iOS

What for

Library with iOS components defined by Natura Group Design System Team.

Tech Stack

Swift 5
Supports iOS 10 to 14
CocoaPods
Swift Package Manager
Fastlane
Bitrise
Swiftlint
Jazzy

NOTE: For versions 6.2.0 and previous, Git-LFS is also a dependency.

How to Install

CocoaPods

CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects. You can install it with the following command:

gem install cocoapods

You can also check Cocoapods' installation guide for other options.

To integrate NatDS into your Xcode project using CocoaPods, specify it in your Podfile:

target '<Your Target Name>' do
    pod 'NatDS'
end

Then, run the following command:

pod install

Swift Package Manager

To use NatDS in your project with Swift Package Manager, you need to add it from the Xcode menu. Follow the path File > Swift Packages > Add Package Dependency and then provide it the git url for this repository: https://github.com/natura-cosmeticos/natds-ios.git. Xcode will manage the imports.

How to configure

The library provide the components according to the Design System brand themes, which must be chosen before using the components (usually, at your app's launch). All themes available are options in the AvailableTheme enum.

To choose a theme, configure the library with the following code:

DesignSystem().configure(with: AvailableTheme)

Reminder: This step is mandatory. If the Design System is not configured with a brand theme, a fatalError will be raised.

How to add icons

This library does not have the Design System icons. Since version 3.0.0, they're stored in the icon library NatDSIcons, which can also be used with Cocoapods.

To use the icons, specify their pod in your Podfile:

target '<Your Target Name>' do
    pod 'NatDSIcons'    
end

If you're using a NatDS version older than 3.0.0 there are available icons in the library. Nonetheless, some newer icons won't be available.

NatDSIcons versions

To check all available versions for NatDS Icons, you can check the changelog, or run a pod command from your terminal:

pod search NatDSIcons --simple

Check the documentation on how to use icons in your code.

Sample App

The Sample App has visual and code implementation examples for the Design System's components and tokens. To run it, download this repository, install its dependencies following the project setup, then build and run.

Check how to use the Sample App.