Sketch-UICode
Sketch-UICode is a design-to-code tool that can generate mobile app UI code (static part) from the Sketch design file WYSIWYG(what you see is what you get).
The problem that Sketch-UICode is trying to solve
In the development process of the mobile app, app's UI (static part) is designed by the UI designer, and then the development engineer implements it according to the design draft. This process is equivalent to the designer using the UI design tool to draw the design draft, and then the engineer uses the development tool (such as Xcode or Android Studio) to draw the design draft again (A large part of the work is to move the various values in the design draft into code or resource files).
Since UI design contains many details, engineers need to do a lot of meticulous work in order to accurately restore the design. After the engineer implements the UI, in order to ensure the effect of the UI implementation, the UI designer often needs to communicate with the engineer and ask the engineer to adjust the interface until they are satisfied or reach some kind of compromise.
The way Sketch-UICode works is to make full use of the information already in the UI design draft (such as the position, color, font, font size, transparency, rounded corners, etc. of UI elements), and at the same time, the user needs to use the Sketch plugin to supplement some information that is necessary to implement the UI (such as the type of components, the hierarchical relationship of components, the layout of components, etc.). Finally, use the Sketch plugin to generate UI code（including various resource files, such as images with different multiples).
In addition to the Sketch plugin, Sketch-UICode also has a preview app that can run on iOS simulators and real devices. Through this preview app, users can quickly preview the real running effect of the code to be generated by the plugin (This is achieved by generating and running Javascript code in real-time with the same logic as the code to be generated).In this way, users can verify whether their operations on the plug-in side are correct before generating code, and generate code after they are satisfied with the preview effect.
So in this way, the following effects can be achieved:
- Engineers no longer need to do the work of moving values.
- Since the generated code is WYSIWYG, engineers can more easily guarantee the quality of UI implementation. This also helps reduce unnecessary communication between UI designers and engineers.
Description of the generated code
The code generated by Sketch-UICode is WYSIWYG. "WYSIWYG" here means that when you run the generated code directly (without any modification), you see the same as what you see on the preview app.
There have been some tools that can generate UI code in the past. Programmers often have the impression of these tools that the code generated by these tools is far from what the programmers expects and cannot be used out of the box. The code generated by Sketch-UICode is generated according to the way programmers usually write code. After generating the code, you can add dynamic logic (such as logic for requesting and displaying data) as needed. While the style of the generated code may not satisfy all programmers' preferences, it is definitely usable out of the box.
Code generation targets currently include iOS-Objc-MVVM (UIKit), iOS-Objc-MVC (UIKit), and Android-Java-MVC. Support for Swift (UIKit) will be added in the future.
Demo videos
You can have an intuitive understanding of the effect of Sketch-UICode through the following demonstration videos.
The Sketch file used in the demo is the design file of an open source Bitcoin wallet BasicBitcoinWallet(The static UI code of BasicBitcoinWallet is completely generated by Sketch-UICode).
These videos are mainly to demonstrate the effect of the generated code and do not include the process of making a design draft. These videos contains only the operation, no audio commentary. (The design draft and app in these videos are in Chinese, but it should not affect your understanding of what these videos are trying to convey.)
The video is divided into 3 parts:
Demonstrate the effect of previewing the design draft on the preview app.
Demonstrate the process of generating iOS code and the running effect of the generated code.
Demonstrate the process of generating Android code and the running effect of the generated code.
You can view the generated code at: https://github.com/lianxianghui/S2C-BasicBitcoinWalletDemo
The current development status of Sketch-UICode
At present, there are still some functions in Sketch-UICode that need to be improved and are still under development. It is expected to be released before December 1st this year (2022)(The work of the previous period was delayed by some things, resulting in the failure to release as expected, and the estimated release time needs to be re-evaluated).
Its iOS code generation feature will be free at launch.
If you are interested in Sketch-UICode, you can send an email to hello@design-code.app with the subject of [Interested in Sketch-UICode], and an email will be sent to notify you when Sketch-UICode is released.