Dragoman

[drag-uh-muh n] noun

a professional interpreter.

Translate your web & mobile product suite into a consistent experience with universal design tokens.

What is it?

Dragoman is a plugin for creating applications with a token-based design systems approach. Using gulp with yaml "tokens", Dragoman generates multi-platform assets for core design attributes.

This allows you build unified & consistent applications with a core set of cross-platform variables

Targeted Languages & Platforms

Less
Sass
Scss
Stylus
Android XML
iOS Swift

Getting Started

Define your paths, and the languages you intend to build your applications in the ./config.json file (language selection in progress).

$ gulp dragoman-[options]

Options:

[default] - translates tokens to all languages
scss
sass
less
stylus
android (xml)
ios (swift)
[option]-icons - generates icons along with language translation
web - translates all web languages & generates icons
mobile - translates android, ios, & generates icons for both

eg. If you want to translate tokens into .less along with web iconography, run:

$ gulp dragoman-less-icons

Default Design Tokens

Colors
Fonts
Spacing
Iconography
Typography

These are the core design assets that need to be controlled cross-platform variables. You can add more tokens as you need; simply include them in the 'styles.yml' token, which includes all partials for an easy import file for your CSS stylesheets.

Writing Variables in Tokens:

When using a variable as a value, use % prefix. Defining a variable (as the key), no prefix is necessary.

my-color: "%color-primary"

Example

Default color.yml file

color:
  orange: "#f26322"
  purple: "#783084"
  light-green: "#52ff7a"

Output as Scss:

$color-orange: #f26322;
$color-purple: #783084;
$color-light-green: #52ff7a;

Output as Android XML:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <color name="color-orange">#f26322</color>
    <color name="color-purple">#783084</color>
    <color name="color-light-green">#52ff7a</color>
</resources>

Output as iOS Swift: (in progress)

import UIKit
extension UIColor {
  class func color-orange() -> UIColor {
    return UIColor(red: 242/255.0, green: 99/255.0, blue: 34/255.0, alpha: 1.0; 
  }

  class func color-purple() -> UIColor {
    return UIColor(red: 120/255.0, green: 48/255.0, blue: 132/255.0, alpha: 1.0; 
  }

  class func color-light-green() -> UIColor {
    return UIColor(red: 82/255.0, green: 255/255.0, blue: 122/255.0, alpha: 1.0; 
  }
}

Future Goals

Ultimately, I would like this tool to be able to read shareable design sourcefiles and perform the translations from those. For example, this input could be:

Craft (by InVision) Libraries
Adobe Libraries
System color palettes (.clr files)
Incorporate documentation in tokens

GustavoKatel/Dragoman