Prism is a Design System code generator developed by the team at Gett 🚕.

Synchronizing design teams with engineering teams is a huge challenge.

As teams scale, new growing pains start around how to properly align colors, text styles, spacing and other design details between teams, in a uniform way, from a single source of truth.

Prism was built to solve this very problem! It takes either Zeplin project/styleguide or a set of Figma files as input, and generates any output code you want from these based on a set of templates in your project, resulting in cross-platform code that is always synchronized from a single source-of-truth (Your design files).

Prism is especially useful when used in your CI/CD process to remove the friction of design handoff and review, and making sure all of your teams are properly synchronized in regards to naming, values, and more.

Getting Started

📹 Videos

• A 60 seconds introduction to Prism
• Design a Design System @ Swift Heroes, Italy(25 minutes)

🌈 Getting Prism

There are five options to install prism:

1. Install withHomebrew:brew install GettEngineering/tap/prism
2. Install usingMint:mint install GettEngineering/Prism
3. Build from source:make install
4. Run directly with SPM:swift run prism generate
5. Running on Windows(experimental)

🔑 Getting a Provider API Token

Figma

To use Prism with Figma, you'll need to generate a Personal Access Token (JWT) to Figma's API by going tohttps:// figma.Then, go theSettingssection under your profile:

Scroll to the bottom of theAccounttab, find thePersonal access tokenssection, and create your new token:

You'll need to expose this token to run theprismCLI tool. Make sure you have aFIGMA_TOKENenvironment variable with your token configured.

When runningprismin a CI environemnt, we recommend addingFIGMA_TOKENas an Environment Secret.

When usingprismlocally or bootstrapping your project for the first time, you can simply runexport FIGMA_TOKEN='zeplin_personal_token'before runningprismlocally.

Zeplin

To use Prism with Zeplin, you'll need to generate a Personal Access Token (JWT) to Zeplin's API by going tohttps://app.zeplin.io/profile/developerand click theCreate new tokenbutton in thePersonal access tokenssection:

You'll need to expose this token to run theprismCLI tool. Make sure you have aZEPLIN_TOKENenvironment variable with your token configured.

When runningprismin a CI environemnt, we recommend addingZEPLIN_TOKENas an Environment Secret.

When usingprismlocally or bootstrapping your project for the first time, you can simply runexport ZEPLIN_TOKEN='zeplin_personal_token'before runningprismlocally.

👢 Bootstrap Prism for your Project

Inside your project folder, runprism init.

It will guide you through selecting a Zeplin project/styleguide, or a set of Figma files as source along with other useful information for proper code generation. Onceprism initis successful, you'll find a new.prismfolder with aconfig.ymlfile outlining your preferences.

🎨 Creating Templates

Prism uses templates with the.prismsuffix located in your project's.prismfolder. These Prism templates are basically plain text files — Prism doesn't really care what format or language you use, it can makeany kind of outputas long as you can express it in a Prism template file.

Prism looks for something calledTokensinside your templates. These tokens follow the following format:{{%token%}}.You can find a couple of sample templates in theExamplesfolder.

Here are two short example of generating colors code for iOS and Android using Prism templates.

Colors.swift.prism:

colors.xml.prism:

Development

• Runmakeormake installto build a release binary of theprismCLI tool and install it to/usr/local/bin.
• Runmake buildto build a release binary of theprismCLI tool
• Runmake projectto create an Xcode project and start working.
• Runmake testto run all tests.
• Runmake cleanto clear the generated Xcode project.