Skip to content

gridaco/design-lint

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

89 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

deisgn lint

lint

lint is currently being developed for assistant, it's dependancy requires this repository to run under /assistant/packages/lint. which you can clone this repository directly, but not stable branches might have some incompatibility among the dependencies.

reflect's linting plugin & design lint engine

Rules & Documentation

available in figma

Installation

yarn add @reflect-ui/lint

Example

example plugin for figma available here

Lints

  • Structure Lint
  • Visual Lint
  • Name Linting

Docs

linting specification docs at notion

Features

Basics

  • Missing textstyle (missing typography)
  • Non Library color (when using non system/library colors)
  • Missing Constraints (when no constraint is defined for complex layouts or components)
  • Similar Components
  • Case lint (when non developer-friendly naming convention is used)
    • wrong naming convention
    • name not defined
  • Not used screens
  • Not used components
  • naming conflicts
    • screen conflict
    • component conflict
  • Hidden layers warning
  • Overlapped layers warning

Visual Linting

  • aesthetic rate score
  • usability & reachability score
  • eye tracking score
  • reference score

Linting standards

STRUCTURAL (the underlyign graphical resource is owned by bridged.xyz and cannot be used without referencing.)

structure-linting

naming-linting

visual-linting

References