Introduction

The Specify GitHub app helps you distribute your design tokens and assets from your Specify to your GitHub repositories.

We highly recommend you to test your configuration with the CLI before using it in your GitHub repositories. In opposition to GitHub, the CLI is the perfect environment to create and test your configuration because you'll be able to get feedback from Specify.

Follow the installation guide to set up our Specify GitHub app.

Installation

To distribute your design data from your Specify to your GitHub repositories you need to:

  1. Install GitHub from Specify's applications catalog. By the way, you can control which GitHub repositories Specify can have access to.
  2. Use our ready-to-use configuration templates or create your own configuration using the CLI.
  3. Add your newly created .specifyrc.json Specify configuration file at the root of your GitHub repository.

That's it 🎉

Now you have a working configuration file in your GitHub repository, Specify will be able to detect any differences between your Specify and GitHub repositories. Once your target Specify repository is updated, Specify will automatically generate a pull request.

Config File

The file must be named .specifyrc.json and must be put at the root of your GitHub repository.

Properties

  • repository string required

    The repository property is composed of two information:

    • the name of your organization in Specify (e.g. "@acme").
    • the name of the Specify repository containing the design data you're requesting (e.g., "brand")

    It follows the pattern @owner/repositoryName (e.g., "@acme/brand").

  • rules Array required

    The list of all the rules that will be applied during the design tokens extraction.

  • head string optional

    The name of the branch used to create pull requests.

  • base string optional

    The name of the branch where pull requests will be merged.

Example .specifyrc.json

{
  "repository": "@owner/repositoryName",
  "head": "specify",
  "rules": [
    {
      "name": "Design Tokens / Colors",
      "path": "assets/styles/variables/colors.css",
      "filter":{
        "types": ["color"]
      },
      "parsers": [
        {
          "name": "kebabcasify",
          "options": {
            "keys": ["name"]
          }
        },
        {
          "name": "sort-by",
          "options": {
            "keys": ["name"]
          }
        },
        {
          "name": "to-css-custom-properties"
        }
      ]
    }
  ]
}

Usage

Here are two use cases to hel you distribute your design data from Specify to GitHub.

ℹī¸ We highly recommend you to test your configuration with the CLI before using it in your GitHub repositories.

Basic use case: Get colors in CSS Custom Properties

This configuration is composed of a single rule named Design Tokens / Colors.

Let's break it down:

  1. We get design tokens from the brand repository in the @acme organization
  2. We only get color design tokens from this Specify repository
  3. We get colors in a single file named colors.css placed in a assets/styles/variables/ folder...
  4. ... with their name formated in kebabcase thanks to the kebabcasify parser...
  5. ... and generated as CSS Custom Properties thanks to the to-css-custom-properties parser

Advanced use case: Get many design tokens in CSS Custom Variables and optimized icons

This configuration helps us get design tokens and assets from the brand repository in the @acme organization

We want this configuration to create a Pull Request:

  1. on a branch named design/specify/brand
  2. merged on a branch named staging

It is composed of 3 different rules:

  1. One rule named Design Tokens / Colors to generate our colors in their own format (hsl) and in their own SCSS file colors.scss
  2. One rule named Design Tokens / General to generate all other design tokens in their own SCSS file general.scss
  3. One rule named Assets to generate our vectors in their own target folder assets/

Now let's deep dive into each rule 👇

Design Tokens / Colors

  1. We only get color design tokens from the @acme/brand Specify repository
  2. We get colors in a single file named dark-theme.scss placed in a assets/styles/variables/ folder...
  3. ... with their name formated in kebabcase thanks to the kebabcasify parser...
  4. ... sorted alphabetically thanks to the sort-by parser...
  5. ... and generated as CSS Custom Properties in hsl in the :root[data-theme='dark'] CSS selector thanks to the to-css-custom-properties parser

Design Tokens / General

  1. We get all other types of design tokens from the @acme/brand Specify repository
  2. We generate them in a single file named general.scss placed in a assets/styles/variables/ folder...
  3. ... with their name formated in kebabcase thanks to the kebabcasify parser...
  4. ... sorted alphabetically thanks to the sort-by parser...
  5. ... and generated as CSS Custom Properties thanks to the to-css-custom-properties parser

Assets

  1. We get our vector assets from the @acme/brand Specify repository
  2. We generate them as separate SVG files in a folder named assets/
  3. We optimize them thanks to the svgo parser...

Example .specifyrc.json for colors in CSS Custom Variables

{
  "repository": "@acme/brand",
  "rules": [
    {
      "name": "Design Tokens / Colors",
      "filter":{
        "types": ["color"]
      },
      "path": "assets/styles/variables/colors.css",
      "parsers": [
        {
          "name": "kebabcasify",
          "options": {
            "keys": ["name"]
          }
        },
        {
          "name": "to-css-custom-properties"
        }
      ]
    }
  ]
}

Example .specifyrc.json for advanced flow

{
  "repository": "@acme/brand",
  "base": "staging",
  "head": "design/specify/brand",
  "rules": [
    {
      "name": "Design Tokens / Colors",
      "path": "assets/styles/variables/colors.scss",
      "filter": {
        "types": ["color"]
      },
      "parsers": [
        {
          "name": "kebabcasify",
          "options": {
            "keys": ["name"]
          }
        },
        {
          "name": "sort-by",
          "options": {
            "keys": ["name"]
          }
        },
        {
          "name": "to-css-custom-properties",
          "options": {
            "formatTokens": {
              "color": "hsl"
            },
            "formatConfig": {
              "selector": ":root[data-theme='dark']"
            }
          }
        }
      ]
    },
    {
      "name": "Design Tokens / General",
      "path": "assets/styles/variables/general.scss",
      "filter": {
        "types": ["border", "depth", "duration", "gradient", "measurement", "opacity", "shadow"]
      },
      "parsers": [
        {
          "name": "kebabcasify",
          "options": {
            "keys": ["name"]
          }
        },
        {
          "name": "sort-by",
          "options": {
            "keys": ["name"]
          }
        },
        {
          "name": "to-css-custom-properties"
        }
      ]
    },
    {
      "name": "Assets",
      "path": "assets/",
      "filter": {
        "types": ["vector"]
      },
      "parsers": [
        {
          "name": "svgo",
          "options": {
            "svgo": {
              "plugins": [
                {
                  "removeDimensions": true
                },
                {
                  "removeAttrs": {
                    "attrs": "*:(fill|stroke)"
                  }
                },
                {
                  "addAttributesToSVGElement": {
                    "attributes": ["width=\"1em\"", "height=\"1em\""]
                  }
                }
              ]
            }
          }
        }
      ],
    }
  ]
}