Gett's Design System code generator. Use Zeplin Styleguides as your R&D's Single Source of Truth.

Overview

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, 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

๐ŸŒˆ Getting Prism

There are five 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
  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 to https://www.figma.com. Then, go the Settings section under your profile:

Finding the Settings section in Figma

Scroll to the bottom of the Account tab, find the Personal access tokens section, and create your new token:

Generating a Figma Personal Access Token

You'll need to expose this token to run the prism CLI tool. Make sure you have a FIGMA_TOKEN environment variable with your token configured.

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

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

Zeplin

To use Prism with Zeplin, 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/styleguide, or a set of Figma files 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.
Comments
  • HTTP 404 during `prism generate`

    HTTP 404 during `prism generate`

    Thank you for the amazing tools!!

    I face the error below if I use the first project, any other project working fine. Screen Shot 2020-05-23 at 8 32 43 AM

    The first project related to the design system and it contains colors, style guides, and spacing. Screen Shot 2020-05-23 at 8 37 59 AM

    Appreciate your support

    opened by forsan 16
  • textStyle.fontSize does not roundedToNearest

    textStyle.fontSize does not roundedToNearest

    I notices some tokens output floats, where others seem to look like integer.

    • textStyle.fontSize gives a float
    • where textStyle.lineHeight appears to be an integer

    in some emitted languages one or the other might not be desirable, or will have to be specified. On further inspection i than noticed that roundToNearest always produces a float. So i assume that by not having any decimal places, it did not appear as one in the emit. This is already quite ideal for languages that don't need that . to specify the type.

    Would it be possible for fontSize to be consistent with that rounding? Or do you think different emits would be needed.

    I see that it would be nice to keep it rather simple.

    Thanks for creating this great project.

    opened by gdelmas 8
  • That one color.a edge case

    That one color.a edge case

    Now that you introduced inverting conditionals, the alpha component of the color token has come to my attention. In most cases, when it is 1.0, it can be ignored. Unfortunately if it is not, one might need a different emit. For example color.rgb vs color.argb.

    Do you think it would make sense to allow to use a conditional on color.a?

    In one possible implementation this could be {{% IF color.a %}}. This would match all but 1.0. Which i can see, might be confusing. As the value would cast to the opposite. Alternatively maybe

    • {{% IF color.hasAlpha %}}
    • {{% IF color.isOpaque %}}
    • {{% IF color.a == 1.0 %}}

    The latter probably being the most complicated to implement and just opening a completely different can of worms.

    Sorry for bombarding you with issues.

    opened by gdelmas 6
  • Allow installing via Homebrew

    Allow installing via Homebrew

    Hello, guys! At first, thanks for the tool! It looks useful and solid, especially for syncing. BTW, I use Zepcode, Zeplin extension for Swift code snippets, but extensions have no logic for syncing. Anyway, I tried to install Prism with attached release, but have two errors

    • โ€œprism-macOS.dmsโ€ cannot be opened because it is from an unidentified developer.. Classic security error.
    • The contents of "prism-macOS.dms" cannot be extracted with The Unarchiver after allowing to install the package. It's not convenient to download and build Prism from sources, especially for new releases. Are you going to add Homebrew support?
    enhancement Infra 
    opened by artemnovichkov 6
  • Rounding of letter spacing

    Rounding of letter spacing

    Here is my text style in Zeplin: Screenshot 2020-03-12 at 12 48 39 Here is generated code for the style:

    static let searchBarPlaceholder: TextStyle = {
            let style = TextStyle()
            style.font = .SFProText-Regular(ofSize: 17.0, weight: .semibold)
            style.kerning = -0.408
            style.color = .additional1d
            style.lineHeight = 22.0
            return style
    }()
    

    I guess there are some hidden rules of rounding. I use this logic for code generation. What do you think? Should Prism update digit values from Zeplin?>

    good first issue 
    opened by artemnovichkov 5
  • Text Style

    Text Style "properties" not exposed as tokens or missing

    Thanks @freak4pc for making it possible to test Prism on our project without text style colors. I really like the simplicity of it.

    I notices the following font styles are not exposed as tokens:

    • font_weight
    • font_style
    • font_stretch

    all but the last one are in the model and apparently not even optional in the API.

    opened by gdelmas 3
  • FontName SnakeCase for Android compatibility

    FontName SnakeCase for Android compatibility

    Hi @freak4pc!

    Nice work so far! Just found something that's annoying me At the Examples/Android folder for textStyles it's using:

    <item name="android:fontFamily">@font/{{% textStyle.fontName|lowercase|replace(-,_) %}}</item> On that part it's using the transformation lowercase and replace but when I run the prism generate I get an error โŒ Error: There is no transformation called 'replace(-,_) ' or lowercase if I delete that transformation. Is there something I'm missing? Do you think it make sense to add the snakecase token for this property also? Cheers

    opened by bvescovi-orangeloops 3
  • Support line spacing

    Support line spacing

    Hi! Thanks for this super helpful tool!

    I'm currently building templates for an Android app. In Zeplin the line height is defined for some of our text styles (e.g. 18.2) with a text size of e.g. 15. To configure this in Android we need to have the "line spacing extra" being 3.2 in this example (18.2 - 15).

    It would be great to do something like {{% textStyle.lineHeight - textStyle.fontSize %}} or a similar syntax.

    idea 
    opened by crysxd 2
  • Support isFirst/isLast tokens and inverted conditionals

    Support isFirst/isLast tokens and inverted conditionals

    This PR adds/fixes a bunch of things:

    • New isFirst / isLast tokens when within a loop (Resolves #27)
    • Allow flipping/inverting a conditional, for example: {{% IF !textStyle.isLast %}} or {{% IF !textStyle.alignment %}}
    • Better handling of multiple in-line conditions (e.g. multiple {{% IF x %}} in one line)
    • Add JSON examples
    • Fixes some issues with the new spacing features introduced in #17
    enhancement Infra feature 
    opened by freak4pc 2
  • Use new Linked Styleguides API

    Use new Linked Styleguides API

    This new API saves the need to manually reverse-iterate all styleguide ancestors: https://docs.zeplin.dev/changelog/october-7-2020-list-linked-stylguides

    Infra 
    opened by freak4pc 1
  • Allow configuring Prism with either a Project or Styleguide

    Allow configuring Prism with either a Project or Styleguide

    Resolves #39

    This PR comprises:

    • [x] Picking either a Project or Styleguide when running prism init
    • [x] Setting either project_id or styleguide_id in .prism/config.yml
    • [x] Fetch linked styleguides manually (ancestors), this might be solved by a new Zeplin API but we won't be waiting for this
    • [x] Fetching styleguide-specific resources
    • [x] New tests
    Infra feature use case 
    opened by freak4pc 1
  • Ignore style guide ids

    Ignore style guide ids

    Hi,

    @freak4pc asked if I wanted to open an issue discussing implementation see #46

    We want to be able to not fetch certain style guides, in our workspace we use the same naming in multiple style guides. Because of this, we want to be able to skip the fetching of certain style guides.

    Thanks!

    opened by LucaGobbo 0
  • Ignore style guide ids

    Ignore style guide ids

    Hi,

    We want to be able to not fetch certain style guides, in our workspace we use the same naming in multiple style guides. Because of this, we want to be able to skip the fetching of certain style guides.

    To accomplish this I've added the option to the configuration, so this is now possible. Hopefully, this can be added to the project

    Thanks!

    opened by LucaGobbo 3
  • Prism in-app

    Prism in-app "Hot Reload"

    Hi, I was wondering to know if there is the possiblity to allow Prism to automatically download the updated colours/font/whatever file directly from Zeplin even when the application is live.

    USE CASE:

    1. I released on the store the myApp v:1.0.0 where all my button are blue
    2. I change the buttonColor inside the Zeplin board from blue to green
    3. The very next time I open myApp it automatically download the new colour file and magically all my buttons turns to green.

    In my understanding at the moment this is not possible, because I have to manually generate the colours file from the console and then later add it in my Xcode project.

    Is it correct ?

    Thank you very much!

    use case 
    opened by LBarranco 1
  • Support == and != operands

    Support == and != operands

    Based on discussion in #31, it could be nice to support basic operands of equality and inequality for tokens, e.g. :

    {{% IF color.alpha == 1.0 %}}
    

    This could have potentially a bunch of edge-cases with numerics, etc, but still worth thinking over and experimenting with.

    feature 
    opened by freak4pc 0
Releases(0.6.0)
  • 0.6.0(Oct 4, 2020)

    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.

    image

    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.

    Source code(tar.gz)
    Source code(zip)
    prism.exe(7.32 MB)
  • 0.5.0(Aug 14, 2020)

  • 0.4.1(Jul 4, 2020)

    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)

    Source code(tar.gz)
    Source code(zip)
  • 0.4.0(Jun 16, 2020)

    • Add support for kebab-case and PascalCase identities (#32)
    • Allow using ! to invert template conditionals (#30)
    • Support isFirst and isLast for 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
    Source code(tar.gz)
    Source code(zip)
  • 0.3.0(Apr 30, 2020)

    ๐Ÿ“ฃ 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
    Source code(tar.gz)
    Source code(zip)
  • 0.2.0(Apr 30, 2020)

    ๐Ÿ“ฃ 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
    Source code(tar.gz)
    Source code(zip)
  • 0.1(Feb 25, 2020)

The Swift code generator for your assets, storyboards, Localizable.strings, โ€ฆ โ€” Get rid of all String-based APIs!

SwiftGen SwiftGen is a tool to automatically generate Swift code for resources of your projects (like images, localised strings, etc), to make them ty

null 8.3k Dec 31, 2022
OpenAPI/Swagger 3.0 Parser and Swift code generator

SwagGen SwagGen is a library and command line tool for parsing and generating code for OpenAPI/Swagger 3.0 specs, completely written in Swift. Swagger

Yonas Kolb 568 Jan 5, 2023
SandboxKit - Framework that makes it easy to launch a single Scene of your application

SandboxKit This framework makes debugging more efficient in your application. Sandbox is the name of a structure that improves the efficiency of debug

Aoi Okawa 10 Apr 24, 2022
Quizzler - iOS App Design Pattern(MVC) and Code Structuring

Quizzler iOS App Design Pattern(MVC) and Code Structuring What you will learn Ho

null 0 Jan 10, 2022
Rosetta Enforcer is a macOS utility designed to help developers convert Universal Binary application to Single Architecture, vice versa.

Rosetta Enforcer Rosetta Enforcer is a macOS utility designed to help developers convert Universal Binary application to Single Architecture, vice ver

John Seong 21 Sep 25, 2022
Are you sure the chemical compounds of your daily use are 100% safe? Use Chem-Aware, identify them right now!

View Project On Devpost: Built With: PubChem's REST API How To Install Chem Aware: Prerequiste: Latest Version of Xcode and Simulators installed The a

Jerry Zhang 5 Aug 23, 2022
Compare your implementation and design, see how much they match!

DesignDetective Preview Usage You may trigger anywhere, but I personally prefer using it via Shake Gesture import DesignDetective extension UIWindow

Enes Karaosman 43 Dec 13, 2022
OpenAPI specification generator for Vapor based Swift projects.

VaporToOpenAPI VaporToOpenAPI is a Swift library which can generate output compatible with OpenAPI version 3.0.1 from Vapor code. You can use generate

null 3 Dec 15, 2022
Blazingโšก๏ธFast BTC and ETH Wallet Generator library for React Native, Android and iOS

Blazing โšก๏ธ Fast BTC and ETH Wallet Generator library for React Native, Android and iOS.

Coingrig 3 Feb 21, 2022
A dynamic sitemap generator for Vapor

A dynamic sitemap generator for Vapor

Vapor Community 5 Apr 21, 2022
SwiftTypeReader - You can gather type definitions from Swift source code.

SwiftTypeReader - You can gather type definitions from Swift source code.

omochimetaru 23 Dec 12, 2022
High-quality source code, easy implementation

High-quality source code, easy implementation

T.M 0 Nov 8, 2021
The source code to the civic tech project ร–ppna Skolplattformen.

Give us a โญ if you appreciate what we do! ร–ppna skolplattformen We are parents who got fed up with Skolplattformen, the City of Stockholm's school adm

Skolplattformen.org 784 Dec 29, 2022
The source code to How to build a news app with react native ๐Ÿ“ฐ

Royal News ยท The source code to How to build a news app with react native article on NimreyCode, medium, and dev.to. Requirements: Android Studio or X

Mohammed Salman 96 Aug 16, 2022
ESP source code for Free Fire (iOS jailbreak)

ESP FreeFire ESP source code for Free Fire (iOS jailbreak, Free Fire version: 1.93.1). This source is for learning purpose only, please do not use it

Huy Nguyen 11 Dec 25, 2022
You can monitor your APIs and websites on your menubar. Gives you status code ๐ŸŽ‰ Cool & good

Hope not. Monitor your APIs and websites on your menubar. For macOS. Right now! YyeeeHav!

Steven J. Selcuk 10 Nov 29, 2022
How to use swiftlint to identify unused code or unused imports in a Swift codebase

Swift compilation database This repository demonstrates how to use swiftlint to identify unused code or unused imports in a Swift codebase. How to run

Andrรฉs Cecilia Luque 3 Aug 26, 2022
A zero-code template app that demonstrates how to use TheraForge's APIs and can be used for fast prototyping

TheraForge MagicBox 1.0.0-beta The Open TheraForge (OTF) MagicBox app is a template for creating digital health solutions that help people better mana

TheraForge 0 Dec 23, 2021
Snapify is an opensource tweak to make the messages app behave like Snapchat's sending system

Snapify A simple tweak to remove the send button in messages, replaced by keyboard key What is Snapify? Snapify is an opensource tweak to make the mes

Hallie 4 Oct 29, 2021