Parsers

Parsers are the magic that you need to transform your design data into any company standard output. The parsers can be adjusted to your needs.

Let’s have a look at how they work!

See all parsers

How does it work?

Generating icons for React

Collect icons from Figma

Let’s pretend we’re a React developer who needs to use icons in a React project. The icons are created as components in Figma and in this example we will use a parser to convert the icons into JSX components.

For the sake of simplicity, we will only focus on a single icon defined as a variant of a Figma component named “chat-alt”.

Store icons in a Specify repository

On the right you can see all of our icons in a Specify repository. Now, let’s pull them into our codebase by using the Specify CLI.

Specify CLI: Raw JSON by default

The Specify CLI is the perfect tool to help you see how Specify transforms your design data.

In this example we would like to have them in JSON first to see the data Specify returns.

The following configuration file filters vector assets from a group named "Icons" and generates an vectors.json file containing our icon in JSON.

Input

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Get vectors from `Icons` group",
      "parsers": [
        {
          "name": "filter",
          "options": {
            "query": {
              "where": {
                "group": "^Icons$",
                "andWhere": {
                  "token": ".*",
                  "withTypes": {
                    "include": [ "vector" ]
                  },
                  "select": {
                    "token": true,
                    "parents": {
                      "collections": true
                    }
                  }
                }
              }
            }
          }
        },
        {
          "name": "to-json",
          "output": {
            "type": "file",
            "filePath": "public/vectors.json"
          }
        }
      ]
    }
  ]
}

After setting the output property in the `to-json` parser and pulling our icon with the `pull` command, we receive the following output: `./output/icons.json` - see the image on the right hand side.

output/icons.json

{
  "menu": {
    "$type": "vector",
    "$value": {
      "default": {
        "variationLabel": null,
        "format": "svg",
        "url": "<url-of-your-svg-file>"
      }
    }
  }
}

Output

svgo

Optimize and transform our SVG with SVGO

By default, Specify returns SVG strings as they are created in Figma. Before using the SVG string inside our final JSX component we need to optimize and transform it.

The svgo parser is based on the famous SVGO package and helps us do just that.

Input

.specifyrc.json

"parsers": [
  ...
  {
    "name": "svgo",
    "options": {
      "svgo": {
        "plugins": [
          { "name": "removeDimensions" },
          {
            "name": "convertColors",
            "params": {
              "currentColor": true
            }
          }
        ]
      }
    }
  }
]

chat-alt-outline.svg

<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M9.25 9.25V3.5H4C3.72386 3.5 3.5 3.72386 3.5 4V9.25H9.25ZM9.25 10.75H3.5V16C3.5 16.2761 3.72386 16.5 4 16.5H9.25V10.75ZM10.75 16.5H16C16.2761 16.5 16.5 16.2761 16.5 16V10.75H10.75V16.5ZM4 18C2.89543 18 2 17.1046 2 16V4C2 2.89543 2.89543 2 4 2H10H16C17.1046 2 18 2.89543 18 4V10V16C18 17.1046 17.1046 18 16 18H4ZM16.5 9.25V4C16.5 3.72386 16.2761 3.5 16 3.5H10.75V9.25H16.5Z" fill="currentColor" />
</svg>

Output

svg-to-jsx

Wrapping our SVG inside a JSX component

Now that we are satisfied with our SVG string let’s generate a JSX component out of it.

Let’s use the svg-to-jsx parser to do this.

Input

.specifyrc.json

"parsers": [
  ...
  {
    "name": "svg-to-jsx",
    "output": {
      "type": "directory",
      "directoryPath": "output/assets"
    }
  }
]

chatAltOutline.jsx

export default () => (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9.25 9.25V3.5H4C3.72386 3.5 3.5 3.72386 3.5 4V9.25H9.25ZM9.25 10.75H3.5V16C3.5 16.2761 3.72386 16.5 4 16.5H9.25V10.75ZM10.75 16.5H16C16.2761 16.5 16.5 16.2761 16.5 16V10.75H10.75V16.5ZM4 18C2.89543 18 2 17.1046 2 16V4C2 2.89543 2.89543 2 4 2H10H16C17.1046 2 18 2.89543 18 4V10V16C18 17.1046 17.1046 18 16 18H4ZM16.5 9.25V4C16.5 3.72386 16.2761 3.5 16 3.5H10.75V9.25H16.5Z" fill="#788BA5" />
    </svg>
);

Output

output/icons.json

{
  "menu": {
    "$type": "vector",
    "$value": {
      "default": {
        "variationLabel": null,
        "format": "svg",
        "url": "<url-of-your-svg-file>"
      }
    }
  }
}

Output

In summary

The different steps that have been executed in this example can be combined into one configuration file. This means you only have to set it up once and let Specify do the automated magic for you.

Small recap: In this example we covered how to generate JSX components using the Specify CLI. We combined and chained several parsers together to optimize and transform our SVG, and to generate our final JSX component.