SketchyCode is a tool to generate code from Sketch files. It is currently very experimental, but is showing the signs of being useful. I am looking for ideas and contributions! This tool is incomplete, and this README is largely to see if there is interest in taking the idea further.
There are a few practical uses for generating code from Sketch, like synchronizing text styles and color paletes. There are also a few experimental ideas, like generating UIView subclasses, and replacing Interface Builder. These aspirations are described in further detail in Phase Two.
As a PoC, here is a template that will generate a
BonMot TextStyle enumeration with the
color and font of all of the text styles defined.
enum TextStyle {
{% for style in document.layerTextStyles.objects %}
static var {{ style.name.variabled }}: StringStyle {
var style = StringStyle()
{% if style.value.textStyle.color %}
style.color = {{ style.value.textStyle.color|colorLiteral }}
{% endif %}
{% if style.value.textStyle.font %}
style.font = UIFont(name: "{{ style.value.textStyle.font.fontName }}", size: {{ style.value.textStyle.font.pointSize }})
{% endif %}
return style
}
{% endfor %}
}
This is not a complete style definition yet, but it appears that all of the data is importing is working, it's just template work left.
The Sketch file format is open
and exportable to JSON via Sketch Tool. While
the file format is not stable or highly documented, the JSON is semi-self
describing and contains a key <class> with the class name of the JSON blobs as
they are exported.
In an attempt to establish a maintainable position, SketchyCode will use this information to parse any given Sketch file and generate Swift code that can import the JSON into a native set of Swift objects.
To see the generated Swift code that can import a Sketch file, check out SketchClasses.swift. This code is generated by SketchTypeBuilder.swift.
Users of SketchyCode will then use these objects to import the JSON from their Sketch files and pass them to a Stencil template to generate code.
The current SketchClass.swift is generated from a client Sketch file and
doesn't use all of Sketch's functionality. Without fully exercising the Sketch
feature set, the JSON dumped by Sketch Tool is missing keys and can not generate
proper import code. I am looking for a Sketch file that exercises the full
feature set of Sketch, but as there's no clear 'done' point. This will be an
important initial task during initial development.
Ideally, this wouldn't be needed if Sketch Tool had an official schema dump. If this tool becomes compelling I believe Sketch would be responsive to adding such a feature, but it's hard to tell. If you know anyone from Sketch it would be great to have a contact.
You can generate classes from your sketch file by modifying the file specified
in the run arguments of the SketchyCode (Model Generation) Scheme. It can also
be ran on the command line with:
sketchycode --generate-classes --file MyFile.sketchIf you search for SketchUnknown, you can find places where SketchyCode was
unable to infer the types. This usually happens when an empty array is
encountered in the Sketch Tool JSON.
I still need to explore how plugins store data in the SketchFiles and see how to
best import this data. I believe it's just storing userInfo keys off of these
objects, but it needs more investigation.
If you are interested in Contributing, please reach out!
A huge shout out to SwiftGen and Sourcery and Stencil. This turned out to be a few day project because I was able to steal massive amounts of code. Thanks!
This is a viable approach as well. However it would be in javascript, and would require running Sketch and (I believe) UI interaction to manage.
I was originally planning on a PR to SwiftGen, but this feels to be more experimental than the intent of SwiftGen. It would be great to stabilize features here and port them over. I also am interested in incorporating the FileWatcher behavior from Sourcery to monitor the Sketch file and regenerate code when it changes.