项目作者: ronijaakkola

项目描述 :
Sketch Assistant for Helsinki Design System
高级语言: TypeScript
项目地址: git://github.com/ronijaakkola/hds-assistant.git
创建时间: 2020-08-11T17:20:44Z
项目社区:https://github.com/ronijaakkola/hds-assistant

开源协议:MIT License

下载


HDS Assistant


Sketch Assistant for Helsinki Design System team


Keeps our Sketch files consistent :gem: and tidy :broom:


Helsinki Design System Assistant for Sketch

Features

  • Styles: makes sure shared styles are used correctly
  • Layout: keeps everything aligned to the pixel grid
  • Naming: prevents default names and enforces descriptive naming
  • Layers and groups: keeps layers organised and removes redundant ones

Usage

Installing

The easiest way to install HDS Assistant is to click this link. The link will automatically install the assistant to your current Sketch file.

You can also download the latest tarball from releases and add the archive manually in Sketch assistant window.

Updating

Currently Sketch does not update assistants automatically. The only way to update assistant to a newer version is to follow the install instructions again. Upon reinstalling, the old version will be replaced with the new one.

Rules

Styles


:heavy_check_mark: Respect the shared layer styles. Don’t customise or break the linking to original style.

:heavy_check_mark: Respect the shared text styles. Don’t customise or break the linking to original style.

:heavy_check_mark: Remove disabled fills.

:heavy_check_mark: Remove disabled borders.

:heavy_check_mark: You have identical non-shared layer styles. All styles used in HDS components should be found in HDS libraries.

:heavy_check_mark: You have identical non-shared text styles. All typography used in HDS components should be found in HDS libraries.

Layout


:heavy_check_mark: Align elements and artboards to pixel grid.

Naming


:heavy_check_mark: Give artboards names that state their purpose or content.

:heavy_check_mark: Give pages names that state their purpose or content.

:heavy_check_mark: Give groups names that state their purpose or content.

:heavy_check_mark: Give shapes names that state their purpose or content.

:heavy_check_mark: Give symbols names that state their purpose or content. Use forward slash separator.

Layers and groups


:heavy_check_mark: Delete empty groups.

:heavy_check_mark: Delete hidden groups and layers.

:heavy_check_mark: Ungroup unnecessary groups.

:heavy_check_mark: Avoid groups that have only one another group in them.

Development

Setting up

  1. Install Node.js. You need at least version 12 or greater.
  2. Clone this repository.
  3. Go to the project root and run npm install to install dependencies.
  4. To build assistant package, run npm run package-tarball.
  5. There is now a file called hds-assistant-<version>.tgz in the project root folder.

Running tests

In the project root folder, run npm test. This will run the test set and show you the results.

Adding new rules

Follow instructions in Sketch Assistant documentation. Remember also to add tests to your new rule. Tests are added to index.test.ts file in the __tests__/ folder.