Swiftpack.co - Package - GettEngineering/Prism

Prism: Design System Code Generator logo
Build Status Code Coverage for Prism on codecov Swift Package Manager Support

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 Started

📹 Videos

🌈 Getting Prism

There are four options to install prism:

  1. Install with Homebrew: brew install GettEngineering/tap/prism
  2. Install using Mint: mint install GettEngineering/Prism
  3. Build from source: make install
  4. 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:

Generating a Zeplin Personal Access Token

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.

When running prism in a CI environemnt, we recommend adding ZEPLIN_TOKEN as an Environment Secret.

When using prism locally or bootstrapping your project for the first time, you can simply run export ZEPLIN_TOKEN='zeplin_personal_token' before running prism locally.

👢 Bootstrap Prism for your Project

Inside your project folder, run prism init.

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.

Prism looks for something called Tokens inside your templates. These tokens follow the following format: {{%token%}}. You can find a couple of sample templates in the Examples folder.

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

Colors.swift.prism:

Color.swift iOS Prism Template

colors.xml.prism:

Color.swift Android Prism Template

Development

  • Run make or make install to build a release binary of the prism CLI tool and install it to /usr/local/bin.
  • Run make build to build a release binary of the prism CLI tool
  • Run make project to create an Xcode project and start working.
  • Run make test to run all tests.
  • Run make clean to clear the generated Xcode project.

Github

link
Stars: 225

Used By

Total: 0

Releases

Prism 0.2 - 2020-03-20 20:51:30

📣 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!)
  • prism now 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_colors (along with reserved_textstyles) in .prism/config.yml

Prism 0.1 - 2020-02-25 13:52:07

Initial version! 🥳