0.0.3 • Published 7 years ago
elm-sketch-importer v0.0.3
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!
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