# elm-sketch-importer

> An Elm importer from Sketch

Latest version **0.0.3** (published 2017-07-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install elm-sketch-importer
pnpm add elm-sketch-importer
yarn add elm-sketch-importer
bun add elm-sketch-importer
```

Provides the command `elm-sketch-importer`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2017-07-16 |
| First published | 2017-07-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 21 |
| Author | Noah Hall |
| Maintainers | enalicho |
| Keywords | elm, sketch, importer, exporter, static, design |

## Links

- npm: https://www.npmjs.com/package/elm-sketch-importer
- Repository: https://github.com/eeue56/elm-sketch-importer
- Homepage: https://github.com/eeue56/elm-sketch-importer#readme
- Issues: https://github.com/eeue56/elm-sketch-importer/issues
- npm.io page: https://npm.io/package/elm-sketch-importer

## Dependencies (3)

- [yargs](https://npm.io/package/yargs.md) ^8.0.2
- [progress](https://npm.io/package/progress.md) ^2.0.0
- [decompress](https://npm.io/package/decompress.md) ^4.2.0

## Recent versions

- 0.0.3 (latest) — 2017-07-16
- 0.0.2 — 2017-07-16
- 0.0.1 — 2017-07-16

## README

# elm-sketch-importer

Takes a Sketch file, and generates Elm out of it. This is particularly useful if you want to quickly export some part of a design into Elm.

This is a work in progress. PRs are welcome!

![](./sketch_github.gif)

## Installation 

We use elm-format in order to format the output correctly. It is recommeneded that you have this installed globally, via

```
npm install -g elm-format
```

Installing the elm-sketch-importer itself is pretty easy.

```
npm install -g elm-sketch-importer
```

## Usage


```
Usage: [sketchfile]

Options:
  -h, --help         Show help                                         [boolean]
  -o, --output       Configure the output directory for generated Elm
                                                          [default: "generated"]
  --ef, --elmformat  Specify the location of the elm-format binary
                                                         [default: "elm-format"]

Examples:
  elm-sketch-importer ~/Documents/example.sketch
```


## Support

## Layers

### Shapes and rects

| Feature | Supported? |
|---------|-------------|
| Rectangles | :white_check_mark: |
| Layer positions | :white_check_mark: |
| Layer sizes | :white_check_mark: |
| Multiple layers | :white_check_mark: |
| Fills | :white_check_mark: |
| Border | :warning: |
| Border color | :warning: |
| Colored fills | :white_check_mark: |
| Other shapes | :warning: |
| Groups | :warning: |
| Slices | :warning: |
| Images | :white_check_mark: |


###  Text

Right now, long text is not correctly exported. This is down to the fact that BPLists are a little difficult to parse in Elm. Support will be coming soon, once I've finished the parser!

| Feature | Supported? |
|---------|------------|
| Short text       | :white_check_mark: |
| Long text | :warning: |
| Horizional/vertical flips | :white_check_mark: |
| Position | :white_check_mark: |
| Size | :warning: |
| Color | :warning: |
| Font | :warning: |


## Roadmap

This roadmap intends to be a rough priority list. No dates nor time are fixed -- but the more PRs to help, the faster things get done :)

# Before 1.0

- Relative layout instead of fixed pixels
- Full support for importing Sketch files
	- Make sure that no features remain unsupported

# After 1.0

- Export views to Sketch

# Misc

- Generating elm-css or style-element based views

---
_Source: https://npm.io/package/elm-sketch-importer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._