omaralbeik / SketchGen

SketchGen is a command line tool written in Swift that generates source code from sketch files.

Features

• ✅ Extract assets from a Sketch file including:
  • ➡️ colors (RGBA and HEX)
  • ➡️ shadows
  • ➡️ fonts
  • ➡️ borders
  • ➡️ radius values
• ✅ Multi-page Sketch file parsing
• ✅ Extract assets into a simple JSON file for easier interaction with other 3rd party tools
• ✅ Generate Readable, snake_cased, and camelCased, UPPERCASED, lowercased, and Capitalized names
• ✅ Use a templating system to generate source code for any programming language using your preferred style
• ✅ Generate from anywhere including Linux and on CI

tl;dr

SketchGen + Example/styles.sketch + Example/templates = Example/generated

After installation

git clone [email protected]:omaralbeik/SketchGen.git
cd SketchGen

sketchgen generate -s Example/styles.sketch ~/Desktop/Output Example/templates -v

open ~/Desktop/Output

Check generated source code in Desktop/Output

Installation

Homebrew (recommended)

brew tap omaralbeik/formulae
brew install sketchgen

Mint

mint install omaralbeik/SketchGen

Make

git clone https://github.com/omaralbeik/SketchGen.git
cd SketchGen
make install

Swift Package Manager

Use as CLI

git clone https://github.com/omaralbeik/SketchGen.git
cd SketchGen
swift run sketchgen

Use as dependency

Add the following to your Package.swift file's dependencies:

.package(url: "https://github.com/omaralbeik/SketchGen.git", from: "0.1.0"),

And then import wherever needed: import SketchGen

Usage

Parse a Sketch file

sketchkit parse <.sketch file path> <destination path>

# Example:
## Parse a a file named styles.sketch in Desktop and create a context.json in Desktop
sketchkit parse ~/Desktop/styles.sketch ~/Desktop

Generate source code

From .sketch file

sketchkit generate -s <.sketch file path> <destination path> <templates folder path>

# Example:
## Parse a file named styles.sketch in Desktop and create source code
## in Desktop/generated, using templates in /Desktop/templates folder:
sketchkit generate -s ~/Desktop/styles.sketch ~/Desktop/generated ~/Desktop/templates

From pre-generated context.json file

sketchkit generate -c <context.json file path> <destination path> <templates folder path>

# Example:
## Parse a context file named context.json in Desktop and create source code
## in Desktop/generated, using templates in /Desktop/templates folder:
sketchkit generate -c ~/Desktop/context.json ~/Desktop/generated ~/Desktop/templates

Flags

A word about conventions in your Sketch file

SketchGen expect the followingin your Sketch file:

• Sketch file with 1 or more pages
• Each page should have 1 or more artboards
• Each artboard should have exactly 1 rectangle or text layer
• layer names can have only english letters, numbers and _ and follow the following conventions:

See Example/styles.sketch for an example.

Source code templates

Templates are written in Stencil templating language.

On top of Stencil's built-in filters, snakecased and camelcased filters are added for more flexible source code generation.

See Example/templates for examples for Swift, ObjC, CSS, and XML templates.

Attributions

This tool is powered by

• SwiftCLI
• Stencil
• PathKit
• Sketch File Format
• Icons in the logo are made by freepik from flaticon.com.

Thanks

• Mattt for his great post Swift Program Distribution with Homebrew
• Yonas Kolb for his very organized README and scripts in XcodeGen that I ended up copying most of it 😅

License

SketchGen is released under the MIT license. See LICENSE for more information.