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//`;