Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MichaelZaporozhets/abstractconnect
A Design Token extractor for teams using Abstract & Javascript
https://github.com/MichaelZaporozhets/abstractconnect
abstract design-systems sketch
Last synced: 3 months ago
JSON representation
A Design Token extractor for teams using Abstract & Javascript
- Host: GitHub
- URL: https://github.com/MichaelZaporozhets/abstractconnect
- Owner: MichaelZaporozhets
- License: mit
- Created: 2020-02-13T06:25:57.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T16:12:13.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T11:57:51.785Z (7 months ago)
- Topics: abstract, design-systems, sketch
- Language: JavaScript
- Homepage:
- Size: 1.44 MB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-Design-Tokens - Abstract Connect
- awesome-design-systems - Abstract Connect - A Design tokens extractor for devs using Abstract & JavaScript. (Design tokens / Plugins)
README
# AbstractConnect
### A Design-Token extractor for teams using Abstract & Javascript
[![NPM Version and link](https://img.shields.io/npm/v/abstractconnect)](https://www.npmjs.com/package/abstractconnect)This package retrieves symbols from a specified sketch file stored in abstract, models the data neatly and transposes sketch format styles into more webdev(tm) friendly values.
### Usage
```javascript
import { getSymbols } from 'abstractconnect';getSymbols({
filter: symbol => symbol.name === 'MySymbol'
}).then(({ MySymbol }) => {//select your layer by name
const MyLayer = MySymbol.layers.MyLayerName//do whatever it is you want to do with design information
const someCSS = `
font-size: ${MyLayer.style.text.fontSize}px;
background: ${MyLayer.style.background};
`;//etc
});```
#### getSymbols
takes a single parameter, an object with config:
- `filter`: expects a standard js filter function
- `raw`: set to `true` to get the 'raw' symbol data from sketch
- `fromSHA`: target a specific commit in abstract
- `withFS`: force download to FS (ends up in the TEMP_PATH setup var below)### Setup
This package is configured using environment values. Simplest setup is to drop a `.env` file in your project directory.
```
ABSTRACT_TOKEN=
ABSTRACT_PROJECT_ID=
ABSTRACT_FILE_NAME=
ABSTRACT_BRANCH=
LOG_LEVEL=
TEMP_PATH=/temp```
**finding your project id**
The simplest way to find your project id is to open your project in browser, and collect the id from the url: `https://app.abstract.com/projects//`;