‘Rough draft’-style graphics
Rough Draft is an Adobe XD plugin for creating ‘rough draft’ style graphics. It takes any set of graphic objects and gives them an object-appropriate hand-drawn look.
You can control the amount of roughness, the type of fill (solid or various kinds of sketched fill), the rough stroke and fill stroke weights, etc.
Rough Draft works in a way that doesn’t destroy the original object, and a roughened object (group) can be resized, rotated and moved, and, when unroughened, the original object will be still be intact with those changes applied.
Full documentation (as seen below) is built-in.
USAGE
Click Roughen to roughen any number of selected objects (including multiple times to get different roughenings). Click Unroughen to un-roughen any number of selected objects.
Note that only graphic shapes like rectangles, ellipses, lines, polygons, and paths will be roughened/unroughened. All other object types are ignored, so you can include them in selections freely. Images aren’t roughened (yet).
Rough Draft shows the number of roughenable, re-roughenable (already roughened but roughenable again for a new random result), and unroughenable objects (which have been roughened and thus can be un-roughened) in the selection, or else No selection.
When more or more roughened objects are selected, you can change their roughen settings “on the fly” using the fill style selector and the property sliders. If a non-roughened object is selected, it won’t be roughened by these reroughen changes–you have to explicitly roughen it first.
Note that if an object has ever been roughened and then un-roughened, it will maintain its roughening settings until it is roughened again. (In fact, it won’t let you change them in its un-roughened state.)
Rough Draft works by creating a group of roughened nodes in place of each original object, whose innner structure you shouldn’t tamper with. You can move the roughened group around, resize it, etc., and, in theory, when you un-roughen it, the original object should re-appear as if you had moved and resized it in its original form.
However, the un-roughened original object won’t reflect any changes made to the roughened group’s appearance, such as fill or stroke color. Rough Draft works best if you change the appearance of the unroughened object and work from there. Note that you can always un-roughen an object at any point to make those kinds of changes, and re-roughen.
CONTROLS
The Fill style controls the type of fill used in roughening. Whatever fill was applied to original object is preserved in the Solid case. If a non-simple-color fill is applied to the original object, then fill style control is ignored, and the original fill is used. (But note that radial fills will cause the roughening to fail, as they can’t be manipulated by plugins.) If a simple color fill is applied, then the other options obtain. Hachure is simple parallel strokes, Zig-zag is what it implies, and Cross-hatch as well. The original fill color is used for the strokes of any non-solid fill.
Roughness goes from 0 (minimal) to 10 (wacky). The “reasonable” values are generally between 0 and 2-3.
Stroke weight factor is multiplied by the original object’s stroke weight to get the weight when stroking the roughened object. So 1 is unchanged, 0.5 is half as thick, and 2 is twice as thick, etc.
Fill weight factor is multiplied by the original object’s stroke weight, to get the weight of the strokes used for any non-solid fill.
Fill gap is the distance between non-solid fill lines.
Fill angle controls the non-solid fill stroke angles, roughly. (Everything’s rough in here.)
HINTS & NOTES
You can pick up an object’s roughened “style” by just selecting it, and apply it to other unroughened objects.
Don’t try to change too many objects’ roughness at once by running the sliders up and down, especially with dense fill strokes. This will bog down XD. But you can move any slider by single-clicking on the new setting, which will only require one re-roughening.
Rough Draft has to rebuild groups for its operation at times, and replaces a roughened graphic object with a group (and re-replaces every time it’s roughened). So if you’re going to add interactions, add them to the roughened object groups after you’re all done roughening.
A roughened object’s look is greatly determined by the original object’s fill and stroke properties, shadow and blur. So, for example, if you want a smoother, felt-tip-pen-like look for the zig-zag lines, make sure the original object has rounded stroke joins.
Rough Draft’s main limitation (a side effect of how it has to work) is that as you get into extreme roughness on polygons and paths (and rounded rectangles), the fill isn’t nearly as random around the edges as the stroke.
CREDIT
Full credit for the roughening algorithms goes to Preet Shihn, whose open-source Rough.js package lies at the heart of Rough Draft. This plugin is offered in the same spirit.
