Skip to content

An experimental tool to generate Swift code from Sketch files

License

Notifications You must be signed in to change notification settings

Rightpoint/SketchyCode

Repository files navigation

SketchyCode

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.

But Why?

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.

Does it work?

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.

Sketch File Format

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.

Stability

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.

Generating SketchClass.swift

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.sketch

If 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.

Plugins

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.

Contributing

If you are interested in Contributing, please reach out!

Shout 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!

But why not a Sketch Plugin?

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.

Why not SwiftGen

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.

About

An experimental tool to generate Swift code from Sketch files

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published