dslint's Introduction

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}`,
    });
  }
}

dslint's People

Contributors

Stargazers

Watchers

dslint's Issues

Minor issues.

Hi, thanks for this incredible work that you've done. I have a few minor issues and suggestions:

When running CLI against a test Figma file I'm seeing duplicate outputs for prefer-local-style rule, error message is just repeated twice
Contrast ratio is only checked for master components, but not the instances which may contain overridden properties with inaccessible combinations applied. Checking generally against instances (and just frames in general) may be more useful, especially considering Figma librarires functionality
I couldn't trigger the must-be-in-frame error in my sample file, the rule should be checking all immediate children of the canvas or am I not understanding how that should work?

Recommend Projects