DesignOps: using Tokens with Angular.js

With our product becoming more complex every day we are in need of new processes for the design to engineering handoff

We are building a sophisticated Gen-AI platform that enables people to use state-of-the-art AI tools in their daily job routine. This platform is a white label product and needs to represent our customers visual values. This is where Tokens can help tremendously to save valuable engineering time that is certainly needed elsewhere.

Design and test in Figma

For every client we have a dedicated design system, for the purpose of prototyping ideas and building demos for sale and most importantly: designing features.

This is because in our organization not only designers design. It’s basically everyone who has an idea and feels confident enough translating it to a tangible design. The systemic approach allows everyone to use the right fonts, colors, spaces, etc to quickly iterate on ideas.

Another important aspect, why we separate design systems, is to easily export token to a dedicated JSON. Once we have made changes to a feature that is already being built (not shipped), engineering can easily implement those changes without worrying to much about where to find the right values and variables.

Handoff procedure

Now to the fun part. Once we have generated the JSON from our Design System with the Design Tokens Plugin we take a quick look. Here we can already determine the design system in its full glory. This is the exact file we’re going to use in our Angular project.

Having an Angular project running, the src/assets folder is the proper place for the JSON. We create a new folder, naming it “tokens”. This might change due to the implementation structure of our app. The baseline structure is a wrapper (Head, Sidebar) and content (Modules). For testing purposes I used a fresh angular test environment and the asset file structure can be done like this:

Now we’re telling Angular to build a variable.css out of it. This is done with a config file: style-dictionary.config.js. Find the documentation here. Make sure the path is directing to the Token JSON. The config files content looks like this:

    source: ["src/assets/tokens/8020_tokens.json"],
    platforms: {
      web: {
        transformGroup: "css",
        buildPath: "src/assets/tokens/",
        files: [
          {
            destination: "variables.css",
            format: "css/variables",
          },
        ],
      },
    },
  };

Now the only thing left is to build the variable.css. Once the paths and naming is right this is straightforward. Use

npx style-dictionary build --config ./style-dictionary.config.js

Everything that follows is DevOps and here are some thoughts. We could merge the dedicated JSON (clientA.json, clientB.json, etc) into one big file and see what conflicts and overlappings come out of it. I assume it would be wise to create one big compressed library out of the several systems. That’s up for debate I guess. ¯\_(ツ)_/¯

QA process

Design QA often feels tedious but remains critical for ensuring quality. By aligning Figma tokens with Angular implementations, we simplify this process. Consistent colors, typography, and shadows mean that QA can focus on interaction details and functionality. To make it less tedious our Figma Token to Angular process should help reduce clutter and confusion. First we can make sure everything that has a value to it is being implemented the right way. Colors, font variants, shadows, etc are no longer a matter during QA.

Sum up

By leveraging design tokens, we’ve streamlined our workflow from Figma to Angular. This not only saves time but also ensures brand consistency across projects. Moving forward, we’re exploring ways to optimize the merging of token files to further enhance collaboration.