darthmall/sketch-transform

A plugin for Sketch that provides transformation tools that are useful for mocking up basic charts (bar, column, line, etc.).

Sketch Transform

A plugin for Sketch that provides transformation tools that are useful for mocking up basic charts (bar, column, line, etc.).

Example Use

Here's how I use these plugins to speed up my workflow when I'm mocking up basic charts in Sketch.

Bar Charts

This is how I create a fake column or bar chart that fits in a given size and aligns to pixel boundaries.

1. Draw a rectangle the size of the entire bar chart
2. Choose Plugins→Transform→Split into grid
3. Set the number of columns to the desired number of bars (or set rows for horizontal bars). For a continuous domain (e.g. for a histogram), leave the gutter at 0
4. Select all but the first rectangle (so that it remains at the original height)
5. Choose Plugins→Transform→Resize each
6. For column charts set a negative height (set a negative width for bars)
7. Turn on "Cumulative" (so each bar gets progressively smaller) and "Randomize" to introduce a little noise into the data
8. Select all of the bars and align to the appropriate baseline

sketch-transform's Issues

Segment path

Divide a path up into an even number of segments for easy perturbation for generating line charts.

Definition of Done

• Add a menu item for split path
• Dialog prompts user for the desired number of segments
• Plugin divides a path into the specified number of segments

Update README for line charts

Update the documentation with a how to for line charts.

• Create a gif that illustrates how to fake time series
• Add steps for creating line charts with these plugins

Nice AppKit UI

Illustrator-like blend tool

Document process for mocking up bar charts

Definition of Done

• Outline of steps for using tools to make a quick bar chart
• Animated gif of process

Split into grid

Divide a layer into multiple rows and/or columns with an optional gutter. Include an option to round to pixels.

Batch text layer creation

Create multiple layers from a list of strings for easy labeling of axes.

Website

Probably needs a website.

Name

This project needs a better name

Definition of Done

• GitHub repo is renamed

Move each

This should work on points on a path and support perturbation for generating line charts.

Definition of Done

• Add a menu item: Move each
• Show a dialog prompting the user to specify how much to move each vertex vertically and horizontally
• Checkbox to allow positions to be perturbed
• Checkbox to allow movement to be cumulative

Smooth path

Convert angles to Bézier curves for easy line chart generation

Definition of Done

• Menu item: Smooth path

Error checking

Numeric fields (rows, columns, gutters, etc.) should not accept non-numeric values.

Align to path

You should be able to draw a path and then use that to position objects so that it's easy to define the shape of a distribution. This should work on whole objects or just segments of an object (such as the tops of a group of rectangles for creating a histogram).

Alignment options for resizing

For easy bar chart generation, you should be able to set whether the resulting objects are justified top, bottom, left, or right, or centered vertically or horizontally.

Resize each

Set a number of pixels by which to change the height or width of each item in the selection. Values can be positive or negative and do not need to be whole numbers.

Definition of Done

• Menu item in Plugins menu
• Change width of layers by an amount set by the user
• Change height of layers by an amount set by the user
• Optionally resize cumulatively (each object is resized by i * resize amount)

Split each

For easy creation of stacked bars (and area charts?) you should be able to select a group of rectangles and split them into some number of rectangles either vertically or horizontally. The size of the subsequent rectangles should be randomizable.

Set size of grid cells on Split into grid

Set a width or height for the resulting grid to control the size of the resulting cells. The resulting grid should be centered within the original area if the original area is larger than the resulting grid. Otherwise it just overflows from the top-left corner of the original object.

This will make it easier to create bar charts if the bars have a standard size.

Perturb transformations

Resizing and moving transformations should have an option to perturb values randomly.

Definition of Done

• Implement a shared perturb function
• Add a checkbox to the Resize each dialog to toggle perturbation on