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 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 a Zeplin project as input, and generates any output code you want from a project's styleguide 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 project's Zeplin Styleguide).
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 Prism
There are four options to install prism:
- Install with Homebrew:
brew install GettEngineering/tap/prism
- Install using Mint:
mint install GettEngineering/Prism
- Build from source:
- Run directly with SPM:
swift run prism generate
🔑 Getting a Zeplin API Token
To use Prism, you'll need to generate a Personal Access Token (JWT) to Zeplin's API by going to https://app.zeplin.io/profile/developer and click the Create new token button in the Personal access tokens section:
You'll need to expose this token to run the
prism CLI tool. Make sure you have a
ZEPLIN_TOKEN environment variable with your token configured.
prism in a CI environemnt, we recommend adding
ZEPLIN_TOKEN as an Environment Secret.
prism locally or bootstrapping your project for the first time, you can simply run
export ZEPLIN_TOKEN='zeplin_personal_token' before running
👢 Bootstrap Prism for your Project
Inside your project folder, run
It will guide you through selecting a Zeplin project as source along with other useful information for proper code generation. Once
prism init is successful, you'll find a new
.prism folder with a
config.yml file outlining your preferences.
🎨 Creating Templates
Prism uses templates with the
.prism suffix located in your project's
.prism folder. These Prism templates are basically plain text files — Prism doesn't really care what format or language you use, it can make any kind of output as long as you can express it in a Prism template file.
Here are two short example of generating colors code for iOS and Android using Prism templates.
make installto build a release binary of the
prismCLI tool and install it to /usr/local/bin.
make buildto build a release binary of the
make projectto create an Xcode project and start working.
make testto run all tests.
make cleanto clear the generated Xcode project.