Skip to content
DSLint is an extensible linting tool for designers.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
screenshots
src
typings
.gitignore
.prettierrc
LICENSE
README.md
package-lock.json
package.json
tsconfig.json

README.md

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.

Figma

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}`,
    });
  }
}
You can’t perform that action at this time.