elm-sketch-importer

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
Layer positions
Layer sizes
Multiple layers
Fills
Border
Border color
Colored fills
Other shapes
Groups
Slices
Images

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
Long text
Horizional/vertical flips
Position
Size
Color
Font

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