vutran / dslint

✨ DSLint is an extensible linting tool for designers.

DSLint

DSLint is an extensible linting tool for designers. Similar to code linting, design linting can be used to find problematic patterns in your design files.

Install

If you'd like to use the CLI version, you can instally it globally:

$ npm i -g dslint

If you'd like to use the JavaScript API for your own applications, you can install it as a dependency:

$ npm i -S dslint

CLI Usage

Environmental Variables

• FIGMA_TOKEN - A personal access token from Figma API

Basic usage:

$ dslint abcdefg1234567890

JavaScript API

Linting a file

import {dslint, getCoreRulesPath} from 'dslint';

const fileKey = 'abcdefg1234567890';
const token = 'my-figma-token';

const rulesPaths = [
  // optionally include the core set of rules already provided
  getCoreRulesPath(),
  // optionally add more rules directory
  path.resolve(__dirname, './rules'),
];

dslint(fileKey, token, rulesPaths).then(failures => {
  console.log(failures);
});

Linting an object tree

import {lint} from 'dslint';

// Figma.File
const file = { ... };

// DSLint.Rules.AbstractRule[]
const rules = [ ... ];

const failures = lint(file, rules);

Writing a Custom Lint Rule

DSLint ships with some basic rules you can apply to your design systems. However, these rules may not account for some of the best practices your team follows. DSLint was written to allow you to extend the system with your own custom rules which can be written in JavaScript. See below for a TypeScript example.

Requirements

• The exported module should be a class named Rule.
• All rules should extend the AbstractRule class.
• All rules must implement the apply() method that return a list of failures.

import {AbstractRule, RuleWalker} from 'dslint';

/**
 * Simple rule that detects for component nodes.
 */
export class Rule extends AbstractRule {
  static metadata = {
    ruleName: 'my-custom-rule',
    description: 'Logs when a component is detected.',
  };

  apply(file: Figma.File): DSLint.Rules.Failure[] {
    const ruleName = Rule.metadata.ruleName;
    return this.applyWithWalker(new ComponentWalker(file.document, {ruleName}));
  }
}

class ComponentWalker extends RuleWalker {
  visitComponent(node: Figma.Nodes.Component) {
    this.addFailure({
      location: node.id,
      message: `Component detected: ${node.name}`,
    });
  }
}