https://github.com/gridaco/design-lint

🖍 reflect design linting specifications
https://github.com/gridaco/design-lint

code-export design design-lint design-linting figma figma-linting-plugin lint

Last synced: 1 day ago
JSON representation

🖍 reflect design linting specifications

• Host: GitHub
• URL: https://github.com/gridaco/design-lint
• Owner: gridaco
• License: mit
• Created: 2020-09-16T08:11:35.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-03-11T08:41:07.000Z (almost 2 years ago)
• Last Synced: 2024-05-22T23:28:46.320Z (8 months ago)
• Topics: code-export, design, design-lint, design-linting, figma, figma-linting-plugin, lint
• Language: TypeScript
• Homepage: https://grida.co
• Size: 6.27 MB
• Stars: 11
• Watchers: 3
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
![deisgn lint](./branding/lint-eye-final-cover-export.png)

# lint

> lint is currently being developed for [assistant](https://github.com/bridgedxyz/assistant/tree/master/packages), 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](https://www.figma.com/file/ED6WOfsoYnnYHY8RJwU9Xw/reflect?node-id=50%3A0)

## Installation

```sh

yarn add @reflect-ui/lint

```

## Example

> example plugin for figma available [here](./example/plugin)

## Lints

- Structure Lint

- Visual Lint

- Name Linting

## Docs

[linting specification docs at notion](https://www.notion.so/bridgedxyz/lint-8d231e26f2394dd984594d6de32d47c2)

## 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](./docs/images/structure-linting.png)

![naming-linting](./docs/images/naming-linting.png)

![visual-linting](./docs/images/visual-linting.png)

## References

- https://github.com/destefanis/design-lint

- https://www.figma.com/community/plugin/801195587640428208/Design-Lint

- https://lintyour.design/