SketchGen is a command line tool written in Swift that generates source code from sketch files.
✅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,
✅Use a templating system to generate source code for any programming language using your preferred style ✅Generate from anywhere including Linux and on CI
git clone firstname.lastname@example.org:omaralbeik/SketchGen.git cd SketchGen sketchgen generate -s Example/styles.sketch ~/Desktop/Output Example/templates -v open ~/Desktop/Output
Check generated source code in
brew tap omaralbeik/formulae brew install sketchgen
mint install omaralbeik/SketchGen
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
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
||Log tech details for nerds|
||Show help information|
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:
|Layer Type||Prefix||Examples of Valid Names|
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,
camelcased filters are added for more flexible source code generation.
See Example/templates for examples for Swift, ObjC, CSS, and XML templates.
This tool is powered by
- Sketch File Format
- Icons in the logo are made by freepik from flaticon.com.
- 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
SketchGen is released under the MIT license. See LICENSE for more information.