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 a Zeplin project or styleguide 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 project's Zeplin Styleguide or Project).
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 five 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
- Running on Windows (experimental)
🔑 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 or styleguide 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.
Running on Windows (Experimental)
Due to the official release of Swift for Windows, an experimental build of
prism is now available for Windows.
You'll need to install a few dependencies before running for the first time:
- Install the Microsoft Visual C++ Redistributable for Visual Studio 2019.
- Install the latest Swift Toolchain for Windows.
- Finally, get the prism.exe executable from the Releases page.
Note: Building from source is somewhat more involved. Let me know if you're interested in doing so and I'll do my best to assist.
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.
You may find interesting
Prism v0.6, It's Windows time! - 2020-10-04 17:48:47
Thanks to the release of Swift for Windows, this version includes an experimental, yet fully-featured release of Prism for windows. See attached prism.exe in this release including instructions in the README file.
Thanks to @compnerd for his massive assistance in making this work.
This version also fixes an existing issue where templates stored in any folder hierarchy were processed as a flat hierarchy to the output folder. Now, the directory structure is preserved.
Prism 0.5.0 - 2020-08-14 03:41:43
- Allow generating code from either a Project or a Styleguide [#40]
- Various internal improvements
Prism 0.4.1 - 2020-07-04 15:03:22
This is a recommended bug fix / patch release
Fix an issue where a styleguide might not be found if the consumer isn't a member of the styleguide, even if they're a member of the linked project. (#37)
Better support for special characters in asset identities (#38)
Prism 0.4.0 #BlackLivesMatter - 2020-06-16 14:54:40
- Add support for kebab-case and PascalCase identities (#32)
- Allow using
!to invert template conditionals (#30)
isLastfor asset loops (colors, text styles, spacings) (#30)
- Add support for font weight, font style and font stretch (#29)
- Support text styles that have no color attached to them (#22)
- Round font size to nearest two decimal points (#33)
- Various bug fixes and optimizations
Prism 0.3.0 - 2020-04-30 16:36:55
📣 Prism 0.3.0 is out! 🎉😃
Thanks for all the great feedback and ideas for Prism! Keep 'em coming, we're always excited to improve and expand Prism's capabilities and support.
Here are some updates since 0.2:
- Support for Zeplin's new Spacing feature (#17)
- Recursively fetch resources (colors, text styles) in multi-paged settings (e.g. when there are more than 100 of either) (#16)
- Fix edge-cases where transformations have spacing around them (#20)
- Fully support Linux
- Update Swift Tools to 5.2
Prism 0.2.0 - 2020-04-30 16:20:37
📣 Prism 0.2 is out! 🎉😃
Thanks for all the great feedback and ideas for Prism! Here are some updates since 0.1:
- Letter Spacing & Line Height now have friendly 2-precision rounding #15 (Thanks @artemnovichkov!)
prismnow uses swift-argument-parser for parsing its arguments
- We also switched to CI for this repo to use GitHub Actions!
- Add examples on generating SwiftUI style code with custom modifiers
- You can now install Prism via Homebrew
- Add instructions for installation via Mint
- Build-in reserved colors have been removed, but they can still be set in
reserved_textstyles) in .prism/config.yml
Prism 0.1 - 2020-02-25 13:52:07
Initial version! 🥳