Gulp plugin to translate core design tokens across mobile & web platforms
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
_assets/icons
_tokens
gulp
.gitignore
.travis.yml
CONTRIBUTING.md
LICENSE
README.md
config.json
gulpfile.js
package.json

README.md

Dragoman

GitHub version Build Status Dependency Status license

[drag-uh-muh n] noun

  1. 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).

To translate every language in the tool, run dragoman without any options:

$ gulp dragoman

To translate only one language, run dragoman with options:

$ 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